Vue前端代码过程 —— 与Spring Boot后端的数据请求演示

最新推荐文章于 2024-04-21 02:44:43 发布
最新推荐文章于 2024-04-21 02:44:43 发布
阅读量1.4k 收藏 2
点赞数
分类专栏： Vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/demo_yo/article/details/118512891
版权

文章目录

一、创建数据库

二、创建并启动SpringBoot项目

三、创建Vue项目

前端代码编写软件：HbuilderX
代码测试浏览器：谷歌浏览器（Chrome）

1. 创建空项目

在这里插入图片描述
导入vue框架文件 vue.js
导入vue联网文件 axios.min.js

2. 登录页面演示 userlogin.html

<!DOCTYPE html> 
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			用户名:<input id="username">
			<br>
			<button v-on:click="login">登录</button>
		</div>
	</body>
	<script src="vue.js"></script>
	<script>
		// 1.创建配置对象
		var config = {
			"el": "#app",
			// mounted:定义自动调用的方法
			"mounted": function() {
				console.log("mounted运行");
			},
			"methods": {
				"login": function() {
					console.log("login()运行");
				}
			}
		}
		// 2.启动vue框架
		var vue = new Vue(config);
	</script>
</html>

运行html文件
点击登录按钮，
右键->检查->console 查看控制台输出信息
在这里插入图片描述

3. 自动生成跳转网站的参数

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			账号:<input id="username">
			<br>
			密码:<input id="password">
			<br>
			<button v-on:click="login">登录</button>
		</div>
	</body>
	<script src="vue.js"></script>
	<script src="axios.min.js"></script>
	<script>
		// 1.创建配置对象
		var config = {
			// 绑定app元素
			"el": "#app",
			// mounted:定义自动调用的方法
			"mounted": function() {
				console.log("mounted运行");
			},
			"methods": {
				"login": function() {
					console.log("login()运行");
					// 1.接收用户输入的数据
					var username = document.getElementById("username").value;
					var password = document.getElementById("password").value;

					// 2.拼出联网的地址
					var serverUrl = "http:localhost:1314/user/login?" +
						"username=" + username +
						"&password=" + password;
					console.log(serverUrl);
				}
			}
		}
		// 2.启动vue框架
		var vue = new Vue(config);
	</script>
</html>

在这里插入图片描述复制控制台输出的地址在浏览器进行访问
在这里插入图片描述

4. 联网测试

在这里插入图片描述
若操作弹出联网失败，是跨域访问的问题

在相应的Controller控制器类中，添加跨域访问允许

@CrossOrigin // 允许别的网站用axios访问

在这里插入图片描述

5. 自动跳转网址

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			账号:<input id="username">
			<br>
			密码:<input id="password">
			<br>
			<button v-on:click="login">登录</button>
		</div>
	</body>
	<script src="vue.js"></script>
	<script src="axios.min.js"></script>
	<script>
		// 1.创建配置对象
		var config = {
			// 绑定app元素
			"el": "#app",
			// mounted:定义自动调用的方法
			"mounted": function() {
				console.log("mounted运行");
			},
			"methods": {
				"login": function() {
					console.log("login()运行");
					// 1.接收用户输入的数据
					var username = document.getElementById("username").value;
					var password = document.getElementById("password").value;

					// 2.拼出联网的地址
					var serverUrl = "http:localhost:1314/user/login?" +
						"username=" + username +
						"&password=" + password;
					console.log(serverUrl);

					// 3.用axios联网
					// 联网成功调用then()
					// 联网失败调用catch()
					axios.get(serverUrl)
					.then(function(res){
						window.alert("then:联网成功");
						var controllerResult = res.data;
						console.log("controllerResult");
						if(controllerResult){
							window.alert("登录成功");
						}
					})
					.catch(function(){
						window.alert("catch:联网失败")
					});
				}
			}
		}
		// 2.启动vue框架
		var vue = new Vue(config);
	</script>
</html>

6. 端口连接测试

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			账号:<input id="username" />
			<br>
			密码:<input id="password" />
			<br>
			<button v-on:click="login">登录</button>
		</div>
	</body>
	<script src="vue.js"></script>
	<script src="axios.min.js"></script>
	<script>
		// 1.创建配置对象
		var config = {
			"el": "#app",
			"mounted": function() {
				console.log("mounted运行");
			},
			"methods": {
				"login": function() {
					console.log("login()运行")
					// 1.接收用户输入的数据
					var username = document.getElementById("username").value;
					var password = document.getElementById("password").value;

					// 2.拼出联网的地址：地址为UserController中login的网址
					var serverUrl = "http://localhost:1314/user/login?" +
						"username=" + username +
						"&password=" + password;
					console.log(serverUrl);
					// 右键 检查，找开调试窗口 console,看到serverUrl,双击访问url,不能显示 404，500

					// 3.用axios联网
					// 联网失败调用catch()
					// 联网成功调用then()
					axios.get(serverUrl)
						.then(function(res) {
							window.alert("then:联网成功")
							var controllerResult = res.data;
							console.log(controllerResult);
							if (controllerResult.id >= 1) {
								window.alert("登录成功")
							} else {
								window.alert("登录失败")
							}
						})
						.catch(function() {
							window.alert("catch:联网失败")
						});
				}
			}
		}
		// 2.启动vue框架
		var vue = new Vue(config);
	</script>
</html>

在这里插入图片描述

7. 首页 index.html

端口开启测试
在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			<table width="100%">
				<tr>
					<td v-for="category in categoryList">
						{{category.name}}
					</td>
				</tr>
			</table>
		</div>
	</body>
	<script src="vue.js"></script>
	<script src="axios.min.js"></script>
	<script>
		var config={
			"el":"#app",
			"data":{
				categoryList:[]
			},
			"mounted":function(){
				// selectAll()联网
				var serverUrl = "http://localhost:1314/category/selectAll";
				axios.get(serverUrl)
				.then(function(res){
					window.alert("then:联网成功")
					//给data中的集合赋值，赋值后，界面会自动更新
					this.vue.categoryList = res.data;
				})
				.catch(function(){
					window.alert("catch:联网失败")
				});
			}
		}
		var vue=new Vue(config);
	</script>
</html>

若联网失败，一般是跨越权限问题
加入@CrossOrigin 注解，允许跨域访问
在这里插入图片描述
停止后，重新运行 Spring Boot 程序，刷新网页
在这里插入图片描述在这里插入图片描述

8. 端口开启测试

在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			<table width="100%">
				<tr>
					<td v-for="category in categoryList">
						{{category.name}}
					</td>
				</tr>
			</table>
		</div>
	</body>
	<script src="vue.js"></script>
	<script src="axios.min.js"></script>
	<script>
		var config = {
			"el": "#app",
			"data": {
				categoryList: []
			},
			"methods": {
				"selectItem": function(id) {
					var serverUrl = "http://localhost:1314/item/selectByCategoryId?categoryId=" + id;
					axios.get(serverUrl)
						.then(function(res) {
							window.alert("then:联网成功")
						})
						.catch(function() {
							window.alert("catch:联网失败")
						});
				}
			},
			"mounted": function() {
				// 调用methods中的selectItem()
				this.selectItem(1);
				// selectAll()联网
				var serverUrl = "http://localhost:1314/category/selectAll";
				axios.get(serverUrl)
					.then(function(res) {
						window.alert("then:联网成功")
						//给data中的集合赋值，赋值后，界面会自动更新
						this.vue.categoryList = res.data;
					})
					.catch(function() {
						window.alert("catch:联网失败")
					});
			}
		}
		var vue = new Vue(config);
	</script>
</html>

运行index.html 联网成功

9. 根据数据库图片地址，显示图片

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			<table width="100%">
				<tr>
					<td v-for="category in categoryList">
						{{category.name}}
					</td>
				</tr>
			</table>
			<table>
				<tr v-for="item in itemList">
					<td>
						{{item.name}}
						<br>
						{{item.price}}
						<br>
						<img v-bind:src="item.image" width="100" height="100" />
					</td>
				</tr>
			</table>
		</div>
	</body>
	<script src="vue.js"></script>
	<script src="axios.min.js"></script>
	<script>
		var config = {
			"el": "#app",
			"data": {
				categoryList: [],
				itemList:[]
			},
			"methods": {
				"selectItem": function(id) {
					var serverUrl = "http://localhost:1314/item/selectByCategoryId?categoryId=" + id;
					axios.get(serverUrl)
						.then(function(res) {
							window.alert("then:联网成功")
							this.vue.itemList = res.data;
						})
						.catch(function() {
							window.alert("catch:联网失败")
						});
				}
			},
			"mounted": function() {
				// 调用methods中的selectItem()
				this.selectItem(1);
				// selectAll()联网
				var serverUrl = "http://localhost:1314/category/selectAll";
				axios.get(serverUrl)
					.then(function(res) {
						window.alert("then:联网成功")
						//给data中的集合赋值，赋值后，界面会自动更新
						this.vue.categoryList = res.data;
					})
					.catch(function() {
						window.alert("catch:联网失败")
					});
			}
		}
		var vue = new Vue(config);
	</script>
</html>

查看数据库item表
在这里插入图片描述
下载相应图片，保存到项目目录中，名称与数据库相同
在这里插入图片描述

运行网页
在这里插入图片描述

10. 商品详情页面的跳转

根据点击的物品，自动匹配id参数，生成跳转网站的参数传递

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			<table width="100%">
				<tr>
					<td v-for="category in categoryList" v-on:click="selectItem(category.id)">
						{{category.name}}
					</td>
				</tr>
			</table>
			<table>
				<tr v-for="item in itemList">
					<td>
						<a v-bind:href="'detail.html?id='+item.id">
							{{item.name}}
							<br>
							{{item.price}}
							<br>
							<img v-bind:src="item.image" width="100" height="100" />
						</a>
					</td>
				</tr>
			</table>
		</div>
	</body>
	<script src="vue.js"></script>
	<script src="axios.min.js"></script>
	<script>
		var config = {
			"el": "#app",
			"data": {
				categoryList: [],
				itemList: []
			},
			"methods": {
				"selectItem": function(id) {
					var serverUrl = "http://localhost:1314/item/selectByCategoryId?categoryId=" + id;
					axios.get(serverUrl)
						.then(function(res) {
							//window.alert("then:联网成功")
							this.vue.itemList = res.data;
						})
						.catch(function() {
							window.alert("catch:联网失败")
						});
				}
			},
			"mounted": function() {
				// 调用methods中的selectItem()
				this.selectItem(1);
				// selectAll()联网
				var serverUrl = "http://localhost:1314/category/selectAll";
				axios.get(serverUrl)
					.then(function(res) {
						//window.alert("then:联网成功")
						//给data中的集合赋值，赋值后，界面会自动更新
						this.vue.categoryList = res.data;
					})
					.catch(function() {
						window.alert("catch:联网失败")
					});
			}
		}
		var vue = new Vue(config);
	</script>
</html>

点击第一台手机链接，导向该地址，自动匹配id的值 = 1

在这里插入图片描述

11. 商品详情页面

端口测试
在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			{{item.name}}<br>
			{{item.price}}<br>
			<img v-bind:src="item.image" />
			<br>
			{{item.itemDesc}}
		</div>
	</body>
	<script src="vue.js"></script>
	<script src="axios.min.js"></script>
	<script>
		var config = {
			"el": "#app",
			"data": {
				item: null
			},
			"mounted": function() {
				console.log("mounted运行了")
				// 接收商品的编号，在index.html中单击商品 detail.html?id=2
				var p = location.search;
				console.log(p); // ?id=2
				p = p.substr(1);
				console.log(p); // id=2
				// 字符串分隔
				var stringArray = p.split("=");
				console.log(stringArray[0]); // id
				console.log(stringArray[1]); // 商品编号

				var serverUrl = "http://localhost:1314/item/selectByItemId?id=" + stringArray[1];
				axios.get(serverUrl)
					.then(function(res) {
						//window.alert("then:联网成功")
						this.vue.item = res.data;
					})
					.catch(function() {
						window.alert("catch:联网失败")
					})
			}
		}
		var vue = new Vue(config);
	</script>
</html>

跳转成功
在这里插入图片描述

Whitemeen太白
关注
专栏目录
详解比springSecurity和shiro更简单优雅的轻量级Sa-Token框架，比如登录认证,权限认证,单点登录,OAuth2.0,分布式Session会话,微服务网关鉴权
念兮为美
08-30 3924
详解比springSecurity和shiro更简单优雅的轻量级Sa-Token框架，比如登录认证,权限认证,单点登录,OAuth2.0,分布式Session会话,微服务网关鉴权。演示SpringBoot集成Sa-Token和Spring WebFlux集成Sa-Token这两个常用的开发框架。......
vue+Springboot 前后端数据交互
QXqmz的博客
02-27 8900
springboot与Vue交互一般有两种方式 build前端vue项目，然后把生成的dist目录下的文件拷贝到resources下的static下即可 分开部署 现在我们讨论的就是第二种方式。 如果vue项目没有打包放在 springboot 项目下的话，需要开启跨域支持 在 vue 项目里 config 目录下的 index.js 文件，找到 proxyTable 加上 // 路...
基于vue+spring boot的前端发送get请求，后端如何接收的问题
weixin_43824526的博客
10-20 1307
基于vue+spring boot的前端发送get请求，后端如何接收的问题 一、前端 第一种写法 functionName(){ this.$axios.get("url",{ params: { key:value key2：value2 }}).then(res=>{ console.log（res.data） }).catch(err=>{
vue封装axios请求springboot 及跨域问题
m0_70658371的博客
05-07 524
/** 封装post请求 @param url @param data @returns {Promise} */ export function post(url,data = {}){ return new Promise((resolve,reject) => { axios.post(url,data) .then(response => { resolve(response.data); },err => { reject(err) }) }) } /**
vue工程搭建及调用后台spring boot工程
kaijixin的博客
04-23 1065
       前面笔者写过一片文章《一个Vue前端框架使用简单实例》，这种方案就是在html中直接使用script标签引入vue和一些常用的组件，这种方式和以前传统的开发是一样的，只是可以很爽的使用vue的双向数据绑定，这种方式只适合于普通的全栈开发，这不是我们推荐的方案。本篇使用一种新方案：即使用vue官方的脚手架创建单独的前...
Vue调用SpringBoot后台实现文件下载功能
04-02
该案例实现前端Vue通过axios请求SpringBoot后台，实现文件下载功能。 filepack ： 前端项目 8081端口。 fileServer： 后端项目 8080端口。
云E办Springboot+vue——前端项目完整版（含源码）
热门推荐
涵盖了计算机专业基础知识、数学建模相关实践、复杂网络论文研究、LeetCode算法刷题经验、C语言开发经验、前端Vue、React框架开发实战相关知识
08-10 5万+
本项目基于Vue+Spring Boot构架一个前后端分离项目。前端使用社区非常活跃的开源框架vue进行构建。受疫情的影响，许多企业由线上办公转为线下办公。随着线上办公的人数的增多，线上办公的优点逐步凸显：通过实现工作流程的自动化、节省企业办公费用、实现绿色办公，同时提升办公效率。前端使用的技术有： Vue、Vue-cli、Vuex、VueRouter、ElementUI、Axios、ES6、Webpack、WebSocket、font-awesome、js-file-download、vue-chat 项
一步步使用SpringBoot结合Vue实现登录和用户管理功能
最新发布
2301_78145364的博客
04-21 993
按照官方文档，来进行MP的分页。作为Mybatis的增强工具，MP自然是支持自定义sql的。其实在MP中，单表操作基本上是不用自己写sql。这里只是为了演示MP的自定义sql，毕竟在实际应用中，批量操作、多表操作还是更适合自定义sql实现。修改pom.xml，在 中添加：**/*.xmltrue配置文件：在application.properties中添加mapper扫描路径及实体类别名包今天的文章可谓是积蓄了我这几年来的应聘和面试经历总结出来的经验，干货满满呀！
2023全新借贷APP系统源码 独立uni前端 java后端 全开源
08-17
《2023全新借贷APP系统源码：独立Uni前端与Java后端解析》 在当前信息化社会，借贷服务已经成为日常生活中不可或缺的一部分。随着技术的不断进步，2023年的全新借贷APP系统源码应运而生，以其独立的Uni前端和Java...
【计算机专业Springboot2-毕业设计100套之】基于vue的地方美食分享网站等
04-03
在技术实现上，这可能涉及到前后端数据交换，比如通过RESTful API进行通信，后端处理请求并返回JSON数据，前端接收并渲染在页面上。 “资源说明.txt”可能是项目中包含的文档，详细介绍了项目的结构、技术栈、...
Spring Boot + Vue 前后端分离开发，前端网络请求封装与配置
weixin_33913377的博客
05-21 694
前端网络访问，主流方案就是 Ajax，Vue 也不例外，在 Vue2.0 之前，网络访问较多的采用 vue-resources，Vue2.0 之后，官方不再建议使用 vue-resources ，这个项目本身也停止维护，目前建议使用的方案是 axios。今天松哥就带大家来看看 axios 的使用。 axios 引入 axios 使用步骤很简单，首先在前端项目中，引入 axios： npm inst...
Spring Boot+Vue｜axios异步请求数据的12种操作
吻得太逼真的博客
04-17 2638
Spring Boot + Vue 前后端分离最核心的操作就是通过异步请求完成数据同步，这其中又可以分为很多种不同的情况，比如是 GET 请求还是 POST 请求？参数是普通变量还是 JSON？基于 RESTful 架构如何操作等等，今天楠哥就把这些不同的请求方式做了一个汇总，一次性写清楚，以后需要用的时候直接来查这篇文章即可。 前后端分离异步请求共包含以下 12 种情况： 1、GET 请求 ...
vue 静态html 请求后台接口（springboot）
zhangxiaoliang666的博客
03-09 2513
vue html <html> <h1> 计算属性-vs-侦听属性 </h1> <div id="demo"> <div>{{ firstName }}</div> <input v-model="firstName"/> <h4>表格</h4> <ul> <li v-for="item in list" :key="item.id"&gt
springboot——（6）添加一个vue项目调用springboot接口
qifengsunny的博客
08-25 4434
前两篇博文描述了node.js下载安装、cnpm创建vue项目相关内容，我们得到了一个能运行的最基础的vue框架。具体博文如下： https://blog.csdn.net/qq_15903671/article/details/82052035 https://blog.csdn.net/qq_15903671/article/details/82052251 vue项目命令行常用指令： ...
vue封装axios请求springboot 及跨域问题，自学者福利
2401_84140080的博客
04-11 637
/@Component //在启动类加了@ServletComponentScan无需加这个了。//前端传过来的是json类型的值 需要加上这个注解@RequestBody 不然接收不到值。//@ServletComponentScan //加载启动类上了。启动类代码加上 @ServletComponentScan。前端config下的index.js加上。@Order(3)//设置优先级加载。还有一种方法 加上过滤器 过滤。后端建个CorsConfig。执行后浏览器控制台出现了。
vue+springboot，vue跨域调取springboot控制器接口
干饭人的食堂
11-14 913
背景 写项目的时候，使用 vue 的 created 加载数据的时候，遇到了前后端交互的问题，查了很多资料，简单记录下。 做数据交互的时候是使用 axios 的代理服务器来解决的。 代理服务器可以避免浏览器的同源策略保护，达到前后端交互的目的 可能发生跨域的情况 一般URL地址： [ 协议 ] : // [ IP地址 ] : [ 端口号 ] / … / … 协议不同，如：http 或者 https IP地址不同，如：192.168.127.1 或者 192.168.127.2 端口号不同，如：8000 或
Vue传递数据到后台SpringMVC接收解析返回
huangdi1309的博客
10-16 2万+
最近在自学vue，开始以为跟angular大同小异，但是真正使用的时候发现还是很多不一样的地方，可能是因为刚刚开始理解的还不够深入O(∩_∩)O。 下面说说前端jsp怎么和后台交互，后台使用的是springMvc框架。 html部分 &lt;div id="app"&gt; &lt;table class="table table-bordered table-striped" style...
从0开始搭建vue项目，到获取springboot或微服务后端数据
weixin_47356044的博客
03-20 1129
1.下载vue模板 完整版：vue-element-admin GitHub地址：https://github.com/PanJiaChen/vue-element-admin 项目在线预览：https://panjiachen.gitee.io/vue-element-admin 精减版：vue-admin-template GitHub地址：https://github.com/PanJiaChen/vue-admin-template 结果：下面我将基于精简版进行第二次开发 2.了解安装vue依赖
Vue3+SpringBoot实现文件上传详细教程
majingbobo的博客
12-21 2442
文件上传的功能实现是我们做Web应用时候最为常见的应用场景，比如：实现头像的上传，Excel文件数据的导入等功能，都需要我们先实现文件的上传，然后再做图片的裁剪，excel数据的解析入库等后续操作。流程为：先将图片上传到Springboot服务器上，服务器返回给图片的http访问地址，将http访问地址与商品的信息再一起上传到服务器上。今天通过这篇文章，我们就来一起学习一下如何在Vue3+SpringBoot中实现文件的上传，这篇文章主要使用图片上传进行讲解。1. SpringBoot 中核心代码。
vue前端怎么传参给spring boot后端
05-24
在Vue前端向Spring Boot后端传递参数时，可以使用以下方法： 1. 通过URL传递参数：在Vue前端通过URL传递参数给Spring Boot后端。例如，将参数添加到URL的查询字符串中，然后在Spring Boot后端使用@RequestParam注解获取参数。 2. 使用POST请求传递参数：在Vue前端通过POST请求向Spring Boot后端传递参数。在Vue中，使用axios或其他HTTP客户端库发送POST请求，并在Spring Boot后端使用@RequestBody注解获取参数。 3. 使用FormData传递参数：在Vue前端使用FormData对象，将参数编码为key-value形式，然后通过POST请求向Spring Boot后端传递参数。在Spring Boot后端，使用@ModelAttribute注解获取参数。 总之，可以根据具体的需求和场景选择合适的方式来传递参数。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Whitemeen太白

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值