前后端交互: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;
    }

}
相关推荐
Smile_Gently2 小时前
前端:最简单封装nmp插件(组件)过程。
前端·javascript·vue.js·elementui·vue
李长渊哦6 小时前
使用Druid连接池优化Spring Boot应用中的数据库连接
数据库·spring boot·后端
web135085886356 小时前
【Spring Boot】Spring AOP动态代理,以及静态代理
spring boot·后端·spring
nihui1237 小时前
Uniapp 实现顶部标签页切换功能?
javascript·vue.js·uni-app
尚学教辅学习资料8 小时前
基于SpringBoot的图书借阅小程序+LW参考示例
spring boot·后端·小程序·java毕设·图书借阅
一 乐8 小时前
高校体育场管理系统系统|体育场管理系统小程序设计与实现(源码+数据库+文档)
前端·javascript·数据库·spring boot·高校体育馆系统
山海不说话8 小时前
从零搭建微服务项目Base(第5章——SpringBoot项目LogBack日志配置+Feign使用)
spring boot·后端·spring·spring cloud·微服务·logback
shengmeshi9 小时前
vue3项目img标签动态设置src,提示:ReferenceError: require is not defined
javascript·vue.js·ecmascript
BillKu9 小时前
vue3中<el-table-column>状态的显示
javascript·vue.js·elementui
我爱学习_zwj9 小时前
4.从零开始学会Vue--{{组件通信}}
前端·javascript·vue.js·笔记·前端框架