AXIOS测试

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 }

 

posted @ 2023-10-11 17:16  空嘘一场  阅读(73)  评论(0)    收藏  举报