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

vue

准备的

html 复制代码

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

html 复制代码

<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

准备的

java 复制代码

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

上课敲的

java 复制代码

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

}