vue与Spring boot数据交互例子【简单版】

文章目录

    • 什么是Vue?
    • 快速体验Vue
    • axios是什么?
    • 向Springboot后端发送数据
    • 接收Springboot后端数据
    • 小结

什么是Vue?

官网解释:Vue 是一套用于构建用户界面渐进式框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与现代化的工具链以及各种支持类库结合使用时,Vue 也完全能够为复杂的单页应用提供驱动。

快速体验Vue

<!DOCTYPE html>
<html lang="en">
<head><!--第一步引入vue.js这个库--><script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script><meta charset="UTF-8"><title>vue</title>
</head>
<body>
<div id="app"><input type="text" v-model="message"><div>输入内容为:{{message}}</div>
</div>
</body>
<script>new Vue({el: '#app',data: {message: ''}});
</script>
</html>

其中
v-model是实现表单元素和 Vue 实例中数据的双向绑定

new Vue({...}):这是创建 Vue 实例的语法。在这里,你创建了一个新的 Vue 实例,并传入了一个配置对象作为参数。配置对象包含了 Vue 实例的各种选项,其中 el 指定了 Vue 实例的挂载点(即 HTML 中的元素 ID),这里是 #app,表示 Vue 实例会挂载到 ID 为 app 的元素上。data 选项包含了 Vue 实例的数据属性,这里定义了一个名为 message 的数据属性

el: ‘#app’ 表示 Vue 实例会挂载到 ID 为 app 的 HTML 元素上。具体来说,#app 是 CSS 选择器语法,它表示选择 ID 为 app 的元素(例子在后面)。因此,Vue 实例将会控制位于 <div id="app"> 的元素内的内容。

一旦 Vue 实例挂载到了这个元素上,它就会开始监听这个元素内部的数据变化,并根据模板和数据的变化来更新页面。Vue 实例与挂载点相关联,因此在挂载点内的任何变化都会影响到 Vue 实例的行为,而 Vue 实例的行为也会反过来影响到挂载点内的内容。

CSS选择器语法举例(id选择器)

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>vue</title><style>#red {color: red;}</style>
</head>
<body><div id="red">hello</div>
</body>
</html>

#red { color: red; }:这是一个 CSS 样式规则,选择器 #red 匹配 ID 为 “red” 的元素,然后将其文字颜色设置为红色。

axios是什么?

axios 是一个基于 Promise 的 HTTP 客户端,用于在浏览器Node.js 中发起 HTTP 请求。它可以用于从前端应用程序向后端服务器发送请求,并处理服务器响应。

使用 axios 可以方便地发起各种类型的 HTTP 请求,例如 GET、POST、PUT、DELETE 等。它具有许多特性,包括自动转换 JSON 数据、拦截请求和响应、取消请求等。

html中通过引入<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>这行代码,将 axios 库引入到了页面中。这样就使得在页面的 JavaScript 代码中可以使用 axios 发起 HTTP 请求,从而与后端服务器进行数据交互。

向Springboot后端发送数据

前端资源直接放在resources里面
在这里插入图片描述

后端代码:

//定义一个User类
@Data
@AllArgsConstructor
public class User {private String name;private int age;
}//controller层
@RestController
@RequestMapping(value = "/test")
public class TestController {@GetMappingpublic ArrayList<User> getValue() {ArrayList<User> users = new ArrayList<>();for (int i = 1; i <= 5; i++) {User user = new User("name" + i, 20 + i);users.add(user);}return users;}
}

前端代码:

<!DOCTYPE html>
<html lang="en">
<head><!--将 Vue.js 库引入到你的 HTML 页面中--><script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script><!--引入这个库 可以快速发送请求--><script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script><meta charset="UTF-8"><title>vue</title>
</head>
<body><div id='app'><button @click="getValues">点击获取数据</button><table><tr><th>username</th><th>age</th></tr><tr v-for="user in users"><td>{{user.name}}</td><!--因为后端传过来的是name 所以不能用user.username取--><td>{{user.age}}</td></tr></table>
</div>
</body>
<script>new Vue({el: "#app",data: {users: []},methods: {// 发送get请求getValues() {axios.get('/test').then(res => {this.users = res.data}).catch(err => {console.log(err)})}}});
</script>
</html>

效果图:
在这里插入图片描述

接收Springboot后端数据

后端代码:

//pojo
@Data
@AllArgsConstructor
public class User {private String name;private int age;
}//controller层
@RestController
@RequestMapping(value = "/test")
@Slf4j
public class TestController {@PostMappingpublic String postValue(@RequestBody User user) {System.out.println(user);return "发送成功";}
}

前端代码:

<!DOCTYPE html>
<html lang="en">
<head><!--将 Vue.js 库引入到你的 HTML 页面中--><script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script><!--引入这个库 可以快速发送请求--><script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script><meta charset="UTF-8"><title>vue</title>
</head>
<body><div id='app'><form @submit.prevent="postValues"><input type="text" placeholder="username" v-model="user.name" required><input type="text" placeholder="age" v-model="user.age" required><button type="submit">提交</button></form><div>{{res}}</div>
</div>
</body>
<script>new Vue({el: "#app",data: {user: {name: '',age: ''},res: ''},methods: {// 发送post请求postValues() {axios.post('/test', this.user).then(res => {this.res = res.data}).catch(err => {console.log(err)})}}});
</script>
</html>

效果图:
在这里插入图片描述

小结

引入 Vue.js 和 Axios 库:在 HTML 页面中引入了 Vue.js 和 Axios 库,Vue.js 用于构建前端界面,Axios 用于发送 HTTP 请求。

总的来说,你使用 Vue.jsAxios 实现了前端页面的交互和数据展示,同时使用了 Spring Boot 构建了后端 API,通过 HTTP 请求来获取数据,实现了前后端的数据交互。这种方式可以使得前端页面能够动态地展示后端提供的数据,并与用户进行交互。

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

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

相关文章

黑马微服务课程1

目录 一、GateWay 二、服务调用OpenFeign 三、Sentinel 1. 流量控制&#xff08;限流规则&#xff09; 2. 隔离和降级 2.1 FeignClient整合Sentinel 2.2 线程隔离&#xff08;舱壁模式&#xff09; 2.3 熔断降级 3. 授权规则 3.1 授权规则 3.2 自定义异常结果 4. 规…

功能测试前景揭秘:会被淘汰吗?

在当今快速发展的信息时代&#xff0c;软件已经成为我们工作、学习乃至生活中不可或缺的一部分。随着技术的不断进步和应用的广泛普及&#xff0c;软件测试作为保障软件质量和功能实现的关键步骤&#xff0c;其职业发展路径也受到了广泛的关注。特别是针对功能测试这一细分领域…

T1级,生产环境事故—Shell脚本一键备份K8s的YAML文件

大家好&#xff0c;我叫秋意零。 最近对公司进行日常运维工作时&#xff0c;出现了一个 T1 级别事故。导致公司的“酒云网”APP的无法使用。我和我领导一起搞了一个多小时&#xff0c;业务也停了一个多小时。 起因是&#xff1a;我的部门直系领导&#xff0c;叫我**删除一个 …

计算机视觉 CV 八股分享 [自用](更新中......)

目录 一、深度学习中解决过拟合方法 二、深度学习中解决欠拟合方法 三、梯度消失和梯度爆炸 解决梯度消失的方法 解决梯度爆炸的方法 四、神经网络权重初始化方法 五、梯度下降法 六、BatchNorm 七、归一化方法 八、卷积 九、池化 十、激活函数 十一、预训练 十二…

MemFire解决方案-物联网数据平台解决方案

方案背景 随着各种通讯、传感技术发展&#xff0c;数据通讯成本的急剧下降&#xff0c;数以万亿计的智能设备&#xff08;智能手环、智能电表、智能手机、各种传感器设备等&#xff09;接入网络&#xff0c;并源源不断的产生海量的实时数据。这些海量数据的价值挖掘&#xff0…

【算法基础实验】图论-基于DFS的连通性检测

基于DFS的连通性检测 理论基础 在图论中&#xff0c;连通分量是无向图的一个重要概念&#xff0c;特别是在处理图的结构和解析图的组成时。连通分组件表示图中的一个子图&#xff0c;在这个子图中任意两个顶点都是连通的&#xff0c;即存在一条路径可以从一个顶点到达另一个顶…

【Webgl_glslThreejs】搬运分享shader_飘落心形

来源网站 https://www.shadertoy.com/view/4sccWr效果预览 代码演示 将shadertory上的代码转成了threejs可以直接用的代码&#xff0c;引入文件的material&#xff0c;并在创建mesh或已有物体上使用material即可&#xff0c;使用时请注意uv对齐。 import { DoubleSide, Shad…

深度学习从入门到精通—Transformer

1.绪论介绍 1.1 传统的RNN网络 传统的RNN&#xff08;递归神经网络&#xff09;主要存在以下几个问题&#xff1a; 梯度消失和梯度爆炸&#xff1a;这是RNN最主要的问题。由于序列的长距离依赖&#xff0c;当错误通过层传播时&#xff0c;梯度可以变得非常小&#xff08;消失…

(MSFT.O)微软2024财年Q3营收619亿美元

在科技的浩渺宇宙中&#xff0c;一颗璀璨星辰再度闪耀其光芒——(MSFT.O)微软公司于2024财政年度第三季展现出惊人的财务表现&#xff0c;实现总营业收入达到令人咋舌的6190亿美元。这一辉煌成就不仅突显了微软作为全球技术领导者之一的地位&#xff0c;更引发了业界内外对这家…

第十五届蓝桥杯题解-数字接龙

题意&#xff1a;经过所有格子&#xff0c;并且不能进行交叉&#xff0c;走的下一个格子必须是当前格子值1%k&#xff0c;输出路径最小的那一条&#xff08;有8个方向&#xff0c;一会粘图&#xff09; 思路&#xff1a;按照8个方向设置偏移量进行dfs&#xff0c;第一个到达终…

C/C++ 入门(7)string类(STL)

个人主页&#xff1a;仍有未知等待探索-CSDN博客 专题分栏&#xff1a;C 请多多指教&#xff01; 目录 一、标准库中的string 1、了解 2、string类常用接口说明 1、常见的构造函数 2、容量操作 ​编辑 3、访问及遍历操作 4、修改操作 5、非成员函数 二、string类实现 …

LeetCode57. 插入区间

LeetCode57.插入区间 题目思路: 代码 /* 前置知识&#xff1a; vector<vector<int>> a,b; 二维vector数组是可以将二维中的一维vector数组给push_back的&#xff0c; 不是只有单个元素才可以&#xff0c;整个一维的vector数组也可以 b[0] {1,2,3},b[1] {4,5,6}…

【AIGC调研系列】大型语言模型如何减少幻觉生成

在解读大型语言模型&#xff08;LLMs&#xff09;中的长格式事实性问题时&#xff0c;我们首先需要认识到这些模型在生成内容时可能会产生与既定事实不一致的情况&#xff0c;这种情况通常被称为“幻觉”[2][3]。这种现象不仅可能导致信息的误传&#xff0c;还可能对社会造成误…

封装 H.264 视频为 FLV 格式然后推流

封装 H.264 视频为 FLV 格式并通过 RTMP 推流 flyfish 协议 RTMP (Real-Time Messaging Protocol) RTSP (Real Time Streaming Protocol) SRT (Secure Reliable Transport) WebRTC RTMP&#xff08;Real Time Messaging Protocol&#xff09;是一种用于实时音视频流传输的协…

indexDB 大图缓存

背景 最近在项目中遇到了一个问题&#xff1a;由于大屏背景图加载速度过慢&#xff0c;导致页面黑屏时间过长&#xff0c;影响了用户的体验。从下图可以看出加载耗时将近一分钟 IndexDB 主要的想法就是利用indexDB去做缓存&#xff0c;优化加载速度&#xff1b;在这之前&am…

C语言——内存函数的实现与模拟

1. memcpy 函数 与strcpy 函数类似 1.头文件 <string.h> 2.基本格式 • 函数memcpy从source的位置开始向后复制num个 字节 的数据到destination指向的内存位置。 • 这个函数在遇到 \0 的时候并不会停下来。 • 如果source和destination有任何的重叠&#xff0…

C# WinForm —— 10 单选按钮与复选框的介绍与使用

单选按钮 RadioButton 一组单选按钮中&#xff0c;只能选择一个&#xff0c;互相排斥 常用属性、事件&#xff1a; 属性用途(Name)单选按钮的ID&#xff0c;在代码里引用的时候会用到,一般以 rb开头Text单选按钮旁边显示的 文本信息Checked单选按钮的勾选状态Appearance控制单…

SpringCloud系列(18)--将服务提供者Provider注册进Consul

前言&#xff1a;在上一章节中我们把服务消费者Consumer注册进了Zookeeper&#xff0c;并且成功通过服务消费者Consumer调用了服务提供者Provider&#xff0c;而本章节则是关于如何将服务提供者Provider注册进Consul里 准备环境&#xff1a; 先安装Consul&#xff0c;如果没有…

【OceanBase诊断调优】—— 4013 内存爆问题的排查

本文介绍 4013 内存爆问题的排查。 内存爆的类型 内存爆主要分为五类&#xff0c;可以通过关键词 OOPS 确定内存爆的类型。 内存爆的类型日志信息&#xff08;关键字为 [OOPS]&#xff09;SINGLE_ALLOC_SIZE_OVERFLOWsingle alloc size large than 4G is not allowed(alloc_…

vue项目使用百度地图

打开百度地图开放平台 百度地图开放平台 | 百度地图API SDK | 地图开发 在控制台新建应用 复制访问应用的ak 可修改地图样式 使用部分 <!-- 引入地图 --><div class"main-aside"><div id"b-map-container"></div></div> …