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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/diannao/20194.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

win10系统下WPS工具显示灰色全部用不了,提示登录

如果你在写文档或使用excel时发现导航栏的工具全部使用不了&#xff0c;弹出是需要您登录&#xff0c;可以通过以下操作不用登录。 按照 1&#xff08;搜索框&#xff09;—> 2&#xff08;应用&#xff09;—> 3&#xff08;WPS Office&#xff09;点鼠标左键—> 4&a…

大规模 Transformer 模型 8 比特矩阵乘

本文基于 Hugging Face Transformers、Accelerate 以及 bitsandbytes库。 Transformers&#xff1a;Hugging Face 提供的一个开源库&#xff0c;包含了多种预训练的 Transformer 模型&#xff0c;方便用户进行各种 NLP 任务。Accelerate&#xff1a;Hugging Face 开发的一个库…

物联网行业知识概览(一)

Mesh 小米科普&#xff1a;一文看懂路由器上的Mesh组网是什么 - IT之家 (ithome.com) 言简意赅就是&#xff1a; 分散在各个角落的多台路由器的信号合并成一个。只用连一个wifi&#xff0c;自动切换到信号最好的那台。 30秒简单理解Mesh组网_哔哩哔哩_bilibili TWS TWS是True W…

如何解决Ubuntu中软件包安装时的404错误(无法安装gdb、cgddb等)

目录 问题描述 解决方法 1. 更新软件包列表 2. 使用--fix-missing选项 3. 更换软件源 4. 清理和修复包管理器 总结 在使用Ubuntu进行软件包安装时&#xff0c;有时可能会遇到404错误。这种错误通常是由于软件源中的某些包已经被移除或迁移到其他位置。本文将介绍几种解决…

Spark SQL内置函数

Apache Spark SQL 提供了一组丰富的内置函数&#xff08;或称为UDFs&#xff0c;用户定义函数&#xff09;&#xff0c;用于在查询时处理数据。这些函数涵盖了字符串操作、日期/时间处理、数学运算、聚合等多个方面。以下是一些 Spark SQL 中常见的内置函数类别及其示例&#x…

04.k8s的附加组件

4.k8s的附加组件 4.1 dns服务 安装dns服务 1:下载dns_docker镜像包 wget http://192.168.12.201/docker_image/docker_k8s_dns.tar.gz2:导入dns_docker镜像包(所有节点或者node2节点) 3:修改skydns-rc.yaml&#xff0c;指定13的机器&#xff0c;该功能可加可不加 spec:node…

Arduino RP2040 CDC虚拟串口通讯--普通串口不显示

这两天在用RP2040运行些程序&#xff0c;但发现一个问题&#xff0c;使用arduino IDE可以通过串口显示数据&#xff0c;但是其他串口工具不会显示数据&#xff0c;可以打开串口&#xff0c;排查一下午无果&#xff0c;相当头疼&#xff0c; 晚上搜索时发现这个介绍&#xff1a…

详细分析async/await的基本知识以及用法(附Demo)

目录 前言1. 基本知识2. Demo2.1 单异步2.2 多异步2.3 配合钩子2.4 差异 3. 实战 前言 原先在小程序的时候用过这个用法&#xff0c;知识点差不过&#xff0c;推荐阅读&#xff1a;详细分析Js中的Promise.all基本知识&#xff08;附Demo&#xff09; 以下文章针对Vue3知识&am…

【康耐视国产案例】智能AI相机机器视觉精准快速实现包裹标签的智能粘贴

康耐视推出的3D-A1000是专业的、匹配物流行业各类分拣机及包裹检测应用的全功能视觉检测系统&#xff0c;其能够准确检测分拣机上是否有包裹、包裹是否超出边界、空车检测、是否有遗留物品等。由于搭载了专利的三维结构光技术&#xff0c;产品具有更强大的创新性以满足持续更新…

matlab图像处理入门

matlab在学校科研&#xff0c;仿真及基于模型开发的工作中有重要作用&#xff0c;在图像处理方面由于省去了复杂的上位机开发流程&#xff0c;因此可以让用户快速开发验证算法&#xff0c;下面简要介绍其在图像处理方面的应用。 matlab开发图像处理算法的流程主要是&#xff0c…

ARM虚拟机安装OMV

OMV(OpenMediaVault)是基于 Debian GNU/Linux 的网络连接存储&#xff08;network attached storage&#xff0c;NAS&#xff09;解决方案。它包含 SSH、(S) FTP、SMB/CIFS、DAAP 媒体服务器、rsync、 BitTorrent 等很多种服务。它可用于 x86-64 和 ARM 平台。 在x86-64平台上&…

企业级网络安全问题及其解决手段

随着企业信息化程度的不断提高&#xff0c;网络安全问题已成为企业面临的重大挑战。本文将探讨企业级网络安全问题的现状、原因以及相应的解决手段。 一、企业级网络安全问题的现状 近年来&#xff0c;企业级网络安全事件频发&#xff0c;给企业带来了巨大的经济损失和声誉损…

「浏览器」服务端渲染

前言 服务端渲染&#xff08;Server-Side Rendering&#xff0c;SSR&#xff09;是一种常见于网页应用的技术&#xff0c;它指的是在服务器上将网页的内容生成&#xff0c;然后发送完整的HTML页面到客户端的浏览器的过程。这与传统的客户端渲染&#xff08;Client-Side Render…

docker错误

启动docker容器报错&#xff1a;library initialization failed - unable to allocate file descriptor table - out of memory 修改/etc/systemd/system/docker.service文件中的LimitNOFILE、LimitNPROC和LimitCORE配置为65535固定值&#xff0c;原先配置中这三个参数都设置为…

Bean作用域和生产周期已经Bean的线程安全问题

bean 的作用域 单例(Singletion) : Spring 容器中只有一个 bean &#xff0c;这个 bean 在整个应用程序内共享。 原话(Prototype) : 每次 getBean()&#xff0c; 都是不同的bean&#xff0c;都会创建一个实例。 请求(Request)&#xff1a;每个HTTP请求都会创建一个新的 Bean …

旧衣回收小程序带来的收益优势,小程序有哪些功能?

随着互联网的快速发展&#xff0c;大众对旧衣回收市场也越来越了解&#xff0c;对于闲置的旧衣物也有了适合的处理方式。旧衣回收也符合了当下资源回收利用&#xff0c;因此&#xff0c;旧衣回收市场获得了爆发式增长&#xff0c;市场规模不断扩大。同时市场中还吸引了越来越多…

【调试笔记-20240530-Linux-在 OpenWRT-23.05 上为 nginx 配置 HTTPS 网站】

调试笔记-系列文章目录 调试笔记-20240530-Linux-在 OpenWRT-23.05 上为 nginx 配置 HTTPS 网站 文章目录 调试笔记-系列文章目录调试笔记-20240530-Linux-在 OpenWRT-23.05 上为 nginx 配置 HTTPS 网站 前言一、调试环境操作系统&#xff1a;OpenWrt 23.05.3调试环境调试目标…

安全风险 - 组件导出风险

在安全审查中关于组件导出风险是一种常见问题&#xff0c;不同组件都有可能遇到这种问题&#xff0c;而且从一定角度来看的话&#xff0c;如果涉及到三方业务&#xff0c;基本处于无法解决的场景&#xff0c;所以我们需要说明为何无法避免这种风险 组件导出风险能不能规避&…

【智能AI相机】基于AI的新型成像和照明技术

缩短检测时间 降低废品率和成本 更快捕捉更多缺陷 ” Trevista CI Dome将康耐视专利的计算成像算法与结构化漫射圆顶照明相结合&#xff0c;提供无与伦比的地形图像质量&#xff0c;为光泽和哑光表面检测提供创新解决方案。有助于&#xff1a;缩短检测时间、降低废品率和成本…

深入URP之Shader篇16: UNITY_BRANCH和UNITY_FLATTEN

Shader中的if分支 我们在shader中写if语句&#xff0c;例如&#xff1a; if(a>0){//do some cool thing }else{//do other cool thing }实际上&#xff0c;编译器会进行优化&#xff0c;以及处理成多种不同的情况。比如编译器会将if和else展开&#xff0c;分别执行其中的代…