AXIOS
1.注册测试
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <title>注册页面</title>
7 <!-- 引入vue -->
8 <script src="../js/vue.js"></script>
9 <!-- 引入axios -->
10 <script src="../js/axios.js"></script>
11
12 </head>
13 <body>
14 <div id="root">
15 姓名：<input type="text" v-model="user.name"><br/>
16 年龄：<input type="text" v-model="user.age"><br/>
17 邮箱：<input type="text" v-model="user.email"><br/>
18 <button @click="registerHandler">注册</button>
19 </div>
20
21
22 <script>
23 //创建一个Vue对象实例
24 new Vue({
25 el:'#root',//el用于指定当前Vue实例为那个容器服务，值通常是css选择器（id选择器）
26
27 data:{//data属性用于存储页面渲染的数据
28 user:{
29 name:'',
30 age:'',
31 email:''
32 }
33 },
34 methods:{
35 registerHandler(){
36 //向服务器发送ajax请求（携带注册用户信息） //参数1：url地址 参数2：请求参数（可选）
37 axios.post("http://localhost:8080/register",this.user).then(response=>{
38 //注意response。data代表服务器返回的数据对象
39 alert(response.data.data)
40 alert(response.data.code)
41 alert(response.data.message)
42 })
43 }
44 }
45 })
46
47 </script>
48 </body>
49 </html>
2.从后端获取数据渲染到前端页面测试
index.html
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <title>表格渲染</title>
7 <script src="../js/vue.js"></script>
8 <!-- 引入AXIOS -->
9 <script src="../js/axios.js"></script>
10 </head>
11 <body>
12 <div id="root">
13 <table border="1">
14 <tr>
15 <th>编号</th>
16 <th>姓名</th>
17 <th>操作</th>
18 <th>操作</th>
19 </tr>
20 <tr v-for="(person,index) of persons" :key="person.id">
21 <td>{{person.id}}</td>
22 <td>{{person.name}}</td>
23 <td>{{person.age}}</td>
24 <td><button @click="showInfoHandle(person)">点击</button></td>
25 </tr>
26 </table>
27 </div>
28
29 <script>
30 new Vue({
31 el:'#root',
32 data:{
33 name:'zhangsan',
34 persons:[
35 ]
36 },
37 mounted(){
38 axios.get("http://localhost:8080/getAll").then(persons=>{
39 this.persons = persons.data.data;
40 })
41 }
42 })
43 </script>
44 </body>
45 </html>
PersonController.java
1 package com.cn.springbootdemo.controller;
2
3 import com.cn.springbootdemo.entity.PersonDto;
4 import com.cn.springbootdemo.util.ResultVo;
5 import lombok.extern.slf4j.Slf4j;
6 import org.springframework.web.bind.annotation.CrossOrigin;
7 import org.springframework.web.bind.annotation.RequestMapping;
8 import org.springframework.web.bind.annotation.RestController;
9
10 import java.util.ArrayList;
11 import java.util.List;
12
13 /**
14 * @Author hxy
15 * @Description
16 * @Date 2023/10/11 16:53
17 * @Version 1.0
18 */
19 @RestController
20 @Slf4j
21 @CrossOrigin
22 public class PersonController {
23 @RequestMapping("getAll")
24 public ResultVo<List<PersonDto>> getAll() {
25 PersonDto personDto1 = new PersonDto(1,"张三", 20);
26 PersonDto personDto2 = new PersonDto(2,"李四", 21);
27 PersonDto personDto3 = new PersonDto(3,"王五", 23);
28 List<PersonDto> list = new ArrayList<>();
29 list.add(personDto1);
30 list.add(personDto2);
31 list.add(personDto3);
32 return ResultVo.success(list);
33 }
34 }
PersonDto.java
1 package com.cn.springbootdemo.entity;
2
3 import lombok.AllArgsConstructor;
4 import lombok.Data;
5 import lombok.NoArgsConstructor;
6
7 /**
8 * @Author hxy
9 * @Description
10 * @Date 2023/10/11 16:52
11 * @Version 1.0
12 */
13 @Data
14 @AllArgsConstructor
15 @NoArgsConstructor
16 public class PersonDto {
17 private int id;
18 private String name;
19 private int age;
20 }