前后端交互：axios 和 json；springboot 和 vue

vue

准备的

1. <template>
2.     <div>
3.       <button @click="sendData">发送数据</button>
4.       <button @click="getData">接收</button>
5.       <button @click="refresh">刷新</button>
6.       <br>
7.       <ul v-if="questions">
8.         <li v-for="(question ,index) in questions" :key="index">
9.           <p>{{ question.problem }}</p>
10.           <p>{{ question.answer }}</p>
11.         </li>
12.       </ul>
13.     </div>
14.   </template>
15.   
16.   <script setup>
17.   import { ref } from 'vue';
18.   import axios from 'axios';
19.   
20.   const myObject = ref({
21.     name: 'John',
22.     age: 30,
23.     city: 'New York'
24.   });
25.   const questions =ref()
26.   const refresh =()=>{
27.     questions.value=null;
28.   }
29.   const sendData = async () => {
30.     try {
31.       const jsonString = JSON.stringify(myObject.value);
32.       console.log(jsonString);
33.       const response = await axios.post('http://localhost:8081/test/login', jsonString, {
34.         headers: {
35.           'Content-Type': 'application/json'
36.         }
37.       });
38.       console.log('响应:', response.data);
39.     } catch (error) {
40.       console.error('发送数据时出错:', error);
41.     }
42.   };
43.   const getData = async () => {
44.     try {
45.   
46.       const response = await axios.get('http://localhost:8081/test/reviewmore');
47.       questions.value =response.data;
48.       console.log('响应:', response.data);
49.   
50.     } catch (error) {
51.       console.error('发送数据时出错:', error);
52.     }
53.   };
54.   </script>
55.   

复制代码

1. <template>
2.     <div>
3.         <button @click="sendMsg">发送msg</button>
4.         <button @click="getUser">获取一个User</button>
5.         <ul v-if="users">
6.             <li v-for="(user ,index) in users" :key="index">
7.                 <p>{{ user.name }}</p>
8.                 <p>{{ user.age }}</p>
9.                 <p>{{ user.city }}</p>
10.             </li>
11.         </ul>
12.     </div>
13. </template>
15. <script setup>
16.     import axios from 'axios';
17.     import {ref} from 'vue';
18.     const msg='hello 后端';
19.     const sendMsg = async () => {
20.     try {
21.       const jsonString = JSON.stringify(msg);
22.       console.log(jsonString);
23.       const response = await axios.post('http://localhost:8081/teach/sendmsg', jsonString, {
24.         headers: {
25.           'Content-Type': 'application/json'
26.         }
27.       });
28.       console.log('响应:', response.data);
29.     } catch (error) {
30.       console.error('发送数据时出错:', error);
31.     }
32.   };
33.   const users =ref();
34.   const getUser = async () => {
35.     try {
36.       const response = await axios.get('http://localhost:8081/teach/getusers');
37.       console.log('响应:', response.data);
38.         users.value=response.data;
39.     } catch (error) {
40.       console.error('发送数据时出错:', error);
41.     }
42.   };
43. </script>

复制代码

springboot

准备的

1. package com.example.demo.controller;
3. import com.example.demo.pojo.Question;
4. import com.example.demo.pojo.User;
5. import org.springframework.web.bind.annotation.*;
7. import java.util.ArrayList;
8. import java.util.List;
10. @CrossOrigin
11. @RequestMapping("/test") // 将公共路径添加到类上
12. @RestController
13. public class DemoController {
15.     @PostMapping("/login")
16.     public String handleLoginRequest(@RequestBody User user) {
17.         // 这里可以对接收到的User对象进行处理
18.         System.out.println("接收到的用户信息：" + user.getName() + ", " + user.getAge() + ", " + user.getCity());
20.         // 返回一个简单的响应
21.         return "成功接收到用户信息";
22.     }
24.     @GetMapping("/get/{id}") // 在路径中定义了一个名为"id"的路径参数
25.     public String handleGetRequest(@PathVariable("id") String id) {
26.         // 根据接收到的路径参数进行条件查询逻辑
27.         // 假设这里根据id查询某个结果，这里只是简单示例
28.         if ("1".equals(id)) {
29.             System.out.println("查询到ID为1的结果");
30.             return "查询到ID为1的结果";
31.         } else {
32.             System.out.println("未查询到符合条件的结果");
33.             return "未查询到符合条件的结果";
34.         }
35.     }
36.     @GetMapping("/review")
37.     public Question handleReviewRequest(){
38.         return new Question("这是一个问题","这是一个答案");
39.     }
40.     @GetMapping("/reviewmore")
41.     public List<Question> handleReviewMoreRequest() {
42.         List<Question> questions = new ArrayList<>();
43.         questions.add(new Question("问题1", "答案1"));
44.         questions.add(new Question("问题2", "答案2"));
45.         questions.add(new Question("问题3", "答案3"));
46.         // 添加更多问题
48.         return questions;
49.     }
50. }

复制代码

上课敲的

1. package com.example.demo.controller;
3. import com.example.demo.pojo.User;
4. import org.springframework.web.bind.annotation.*;
6. import java.util.ArrayList;
7. import java.util.List;
9. @CrossOrigin
10. @RequestMapping("/teach") // 将公共路径添加到类上
11. @RestController
12. public class TeachController {
13.     @PostMapping("/sendmsg")
14.     public String handleLoginRequest(@RequestBody String msg) {
15.         System.out.println(msg);
16.         return "hello 前端";
17.     }
18.     @GetMapping("/getusers")
19.     public List<User> handleReviewRequest() {
20.         List<User> users = new ArrayList<>();
21.         users.add(new User("张三", 25,"北京市"));
22.         users.add(new User("李四", 30,"唐山"));
23.         users.add(new User("王五", 35,"天际"));
24.         return users;
25.     }
27. }

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。