前后端交互：axios 和 json；springboot 和 vue - IT评测·应用市场-qidao123.com

<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>

复制代码

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;
}
}

复制代码