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

vue

准备的

<template><div><button @click="sendData">发送数据</button><button @click="getData">接收</button><button @click="refresh">刷新</button><br><ul v-if="questions"><li v-for="(question ,index) in questions" :key="index"><p>{{ question.problem }}</p><p>{{ question.answer }}</p></li></ul></div></template><script setup>import { ref } from 'vue';import axios from 'axios';const myObject = ref({name: 'John',age: 30,city: 'New York'});const questions =ref()const refresh =()=>{questions.value=null;}const sendData = async () => {try {const jsonString = JSON.stringify(myObject.value);console.log(jsonString);const response = await axios.post('http://localhost:8081/test/login', jsonString, {headers: {'Content-Type': 'application/json'}});console.log('响应:', response.data);} catch (error) {console.error('发送数据时出错:', error);}};const getData = async () => {try {const response = await axios.get('http://localhost:8081/test/reviewmore');questions.value =response.data;console.log('响应:', response.data);} catch (error) {console.error('发送数据时出错:', error);}};</script>

<template><div><button @click="sendMsg">发送msg</button><button @click="getUser">获取一个User</button><ul v-if="users"><li v-for="(user ,index) in users" :key="index"><p>{{ user.name }}</p><p>{{ user.age }}</p><p>{{ user.city }}</p></li></ul></div>
</template><script setup>import axios from 'axios';import {ref} from 'vue';const msg='hello 后端';const sendMsg = async () => {try {const jsonString = JSON.stringify(msg);console.log(jsonString);const response = await axios.post('http://localhost:8081/teach/sendmsg', jsonString, {headers: {'Content-Type': 'application/json'}});console.log('响应:', response.data);} catch (error) {console.error('发送数据时出错:', error);}};const users =ref();const getUser = async () => {try {const response = await axios.get('http://localhost:8081/teach/getusers');console.log('响应:', response.data);users.value=response.data;} catch (error) {console.error('发送数据时出错:', error);}};
</script>

springboot

准备的

package com.example.demo.controller;import com.example.demo.pojo.Question;
import com.example.demo.pojo.User;
import org.springframework.web.bind.annotation.*;import java.util.ArrayList;
import java.util.List;@CrossOrigin
@RequestMapping("/test") // 将公共路径添加到类上
@RestController
public class DemoController {@PostMapping("/login")public String handleLoginRequest(@RequestBody User user) {// 这里可以对接收到的User对象进行处理System.out.println("接收到的用户信息：" + user.getName() + ", " + user.getAge() + ", " + user.getCity());// 返回一个简单的响应return "成功接收到用户信息";}@GetMapping("/get/{id}") // 在路径中定义了一个名为"id"的路径参数public String handleGetRequest(@PathVariable("id") String id) {// 根据接收到的路径参数进行条件查询逻辑// 假设这里根据id查询某个结果，这里只是简单示例if ("1".equals(id)) {System.out.println("查询到ID为1的结果");return "查询到ID为1的结果";} else {System.out.println("未查询到符合条件的结果");return "未查询到符合条件的结果";}}@GetMapping("/review")public Question handleReviewRequest(){return new Question("这是一个问题","这是一个答案");}@GetMapping("/reviewmore")public List<Question> handleReviewMoreRequest() {List<Question> questions = new ArrayList<>();questions.add(new Question("问题1", "答案1"));questions.add(new Question("问题2", "答案2"));questions.add(new Question("问题3", "答案3"));// 添加更多问题return questions;}
}

上课敲的

package com.example.demo.controller;import com.example.demo.pojo.User;
import org.springframework.web.bind.annotation.*;import java.util.ArrayList;
import java.util.List;@CrossOrigin
@RequestMapping("/teach") // 将公共路径添加到类上
@RestController
public class TeachController {@PostMapping("/sendmsg")public String handleLoginRequest(@RequestBody String msg) {System.out.println(msg);return "hello 前端";}@GetMapping("/getusers")public List<User> handleReviewRequest() {List<User> users = new ArrayList<>();users.add(new User("张三", 25,"北京市"));users.add(new User("李四", 30,"唐山"));users.add(new User("王五", 35,"天际"));return users;}}