实现vue项目和springboot项目前后端数据交互

1、安装node.js

  • 太高版本的win7不支持
    这里安装node-v12.16.2-x64.msi，指定安装位置后直接按下一步就可以。
  • npm是node内置的工具
    这里配置npm的镜像cnpm（提高下载速度，以后用到npm的命令都可以用cnpm命令替换）不指定cnpm版本使用如下命令会报错：
npm install -g cnpm --registry=https://registry.npm.taobao.org
  • 错误信息：
npm WARN notsup Unsupported engine for npm-normalize-package-bin@3.0.1: wanted:{"node":"^14.17.0 || ^16.13.0 || >=18.0.0"} (current: {"node":"12.16.2","npm":"6.14.4"})
npm WARN notsup Not compatible with your version of node/npm: npm-normalize-package-bin@3.0.1
  • 检查错误，参照网上的对应版本图，node12要用cnpm 6版本，输入如下命令：
npm install -g cnpm@6 --registry=https://registry.npm.taobao.org

在这里插入图片描述

  • 查看node和npm版本
node -v
npm -v

2、安装vue-cli脚手架

  • vue-cli是在node基础上构建的工具，而vue-cli又可以快速搭建含vue功能的模块（即模块化开发）。安装vue-cli 3.x脚手架命令如下：
cnpm install @vue/cli -g
  • 查看版本
vue -V

3、创建vue项目

vue-cli脚手架创建的是模块化项目，使用模块化开发（.vue后缀的文件为单文件组件，一个文件里封装了html、js、css代码）。项目属于单页面应用（SPA），通过路由跳转链接，不利于SEO（爬虫抓取不到内容），可以用Nuxt框架解决该问题（这是后话）。所以说vue比较适合做后台管理系统。但前端分离的插拔特性，可以让它方便地切换为移动端浏览器、app或小程序。

  • 这里有两种方法创建，第一种是用命令（会在当前文件夹下创建文件夹）：
vue create 项目名
  • 第二种用UI可视化界面创建：
vue ui

启动vue可视化工具，会在浏览器中打开，创建过项目的需要返回主页：
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
选手动配置
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
点创建即可。
在这里插入图片描述
这里不保存预设。
在这里插入图片描述
等待安装完，来到欢迎界面就可以就可以关闭网页了，后期安装其它插件我们可以通过命令行执行，也很方便。

  • 进入项目文件夹下，cmd执行命令启动项目
cd 项目文件夹名
npm run serve

运行后，显示如下，在浏览器中输入其中一个地址即可看到欢迎界面，说明vue项目成功跑起来了。
在这里插入图片描述
在这里插入图片描述

4、数据交互的准备工作

这里默认你已经懂得vue编码的一些基础知识，由于缩减篇幅，所以在此只会贴上关键代码。

前后端分离的项目，要进行数据交互，我们使用的是异步请求工具，JS使用的是Ajax，而vue使用的是axios

  • 安装axios插件：
cnpm install axios -S
cnpm i vue-axios -S

5、前后端数据交互之前端

前后端人员协商会有接口文档，我们以登录和注册为例：
在这里插入图片描述

  • 登录请求
//发送get请求 查询用户（用post更安全，这里只是举例使用方法）this.axios.get("http://localhost:80/api/user/login",{params:{"username":username,"password":password}}).then(resp => { //数据传输成功//用户名密码正确if(resp.data.data_status === 0){//路由跳转router.push("/")}else{//显示失败消息，可能是用户名或密码错误ElMessage({message:resp.data.data.message,duration:1000,type:"error"})}							}).catch(error => { //数据传输失败console.log(error)})
  • 注册
//访问后台保存用户(注册)this.axios.post("http://localhost:80/api/user/register",{"username":username,"email":email,"password":password}).then(function(response){//发送成功，接受返回注册状态信息if(response.data.data_status === 0){//注册成功,路由跳转							router.push("/login")}else{//显示注册失败，用户已存在ElMessage({message:response.data.data.message,duration:1000,type:"error"})}}).catch(function(response){alert("数据传输失败")})
  • 注意，这里的data_status、data.message是由后端返回的数据决定的，名称要与后端设定的返回值一致，可以先用console.log(response)查看一下返回的数据。

6、前后端数据交互之后端

  • GET提交：请求的数据会附在URL之后，在地址栏显示出来；POST提交：把提交的数据放置在是 HTTP 包的包体（请求体）中。地址栏不会改变。
  • 后端Get不要在参数加@RequestBody，因为请求是在url里中传参
    Post要在参数加@RequestBody，因为是在请求体中取值
  • 后端登录
	//后端登录@GetMapping("/api/user/login")@ResponseBody//使用ajax时必须加，会把返回类转化为json  Get不要加@RequestBody，是在url里中传参public CommonResult<Message> loginVue(User user){//注册用户逻辑int data_status = userService.loginVue(user);if (data_status == 0) {return CommonResult.success(Message.createMessage("注册成功"));} //实际开发中的状态码举例：   10001 用户已存在  10002 用户名或密码错误  20001 商品已存在 。。。else if(data_status == 2){return CommonResult.failed(data_status, Message.createMessage("用户名或密码错误！！！"));}else {return null;}}
  • 后端注册
	@PostMapping("/api/user/register")@ResponseBody//使用ajax时必须加，会把返回类转化为json  Post要加@RequestBody，是在请求体中取值public CommonResult<Message> registerVue(@RequestBody User user){//System.out.println(username);
//		System.out.println(user);//注册用户逻辑int data_status = userService.registerVue(user);if (data_status == 0) {return CommonResult.success(Message.createMessage("注册成功"));			} else {return CommonResult.failed(data_status, Message.createMessage("用户名或邮箱已存在，请更改信息！！！"));}}

Get请求不要在参数前加@RequestBody，Post请求要在参数前加@RequestBody。重要的事情说三遍！！！

这样就可以直接使用User user参数来接受值

  • 后端登录还是注册都会有返回值，类名可以自定义，但类里的属性名称定义要和接口文档一致，这样前端接收到对应的值。这里我们定义了一个泛型的CommonResult<Message>。
package com.zzz.login_demo.utils;public class CommonResult<T> {private Integer data_status;private T data;protected CommonResult() {}protected CommonResult(int data_status, T data){this.data_status = data_status;this.data = data;}//返回成功（不带data信息）public static CommonResult<Object> success() {return new CommonResult<Object>(0, null);}//返回成功（带data信息）public static <T> CommonResult<T> success(T data) {return new CommonResult<T>(0, data);}//返回失败（带data信息）public static <T> CommonResult<T> failed(int data_status, T data) {return new CommonResult<T>(data_status, data);}//get/set...
}

package com.zzz.login_demo.utils;public class Message {private String message;protected Message() {}public Message(String message) {super();this.message = message;}public static Message createMessage(String message) {return new Message(message);}//get/set...}
  • 测试前后端数据交互时报错：Access-Control-Allow-Origin
Access to XMLHttpRequest at 'http://xxx' from origin 'http://localhost:8080' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

这是跨域请求出错，可以在前端或后端配置跨域请求。
感觉添加后端配置跨域请求比较方便，在每个Controller类的注解@Contoller的下一行添加注解@CrossOrigin即可。

7、扩展

vue项目如何部署到服务器？（Nginx）
前端、后端分开开发时如何模拟用假数据测试？（mockjs、postman）
感兴趣的童靴可以留言给我，我会安排写作。

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

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

相关文章

【USMA】N1CTF2022-praymoon

【USMA】N1CTF2022-praymoon

前言 本题主要利用 USMA 解题&#xff0c;当然还有其他做法&#xff0c;暂时不表 程序分析 启动脚本就不看了&#xff0c;该开的保护都开了。看下文件系统初始化脚本&#xff1a; #!/bin/shmkdir /tmp mount -t proc none /proc mount -t sysfs none /sys mount -t devtmpf…
阅读更多...
JS加密/解密之闭包的运用

JS加密/解密之闭包的运用

深入探讨JavaScript闭包的演变与应用 摘要&#xff1a; 本文将深入探讨JavaScript闭包的概念、特性以及其在实际开发中的应用。我们将从闭包的起源开始&#xff0c;探讨它在JavaScript编程中的重要性&#xff0c;并通过实例展示闭包在不同场景下的灵活应用。 引言 JavaScrip…
阅读更多...
CSS3 渐变

CSS3 渐变

CSS3 渐变可以让你在两个或多个指定的颜色之间显示平稳的过渡。 CSS3渐变有两种类型&#xff1a;线性渐变&#xff08;Linear Gradients&#xff09;和径向渐变&#xff08;Radial Gradients&#xff09;。 线性渐变&#xff08;Linear Gradients&#xff09;&#xff1a; 线性…
阅读更多...
点击查看详情 | 网页版微信客户管理系统如何操作试用？

点击查看详情 | 网页版微信客户管理系统如何操作试用？

微信作为我们日常生活中最常用的社交应用之一&#xff0c;早已成为我们与朋友、家人和同事保持联系的重要工具&#xff0c;也是营销引流的重要平台。 通过微信营销&#xff0c;可以比较精准定向亲近用户。而微信的功能并没有很能满足做微信营销的人群&#xff0c;所以我们需要借…
阅读更多...
linux复习笔记02（小滴课堂）

linux复习笔记02（小滴课堂）

linux下输入输出错误重定向&#xff1a; 输入重定向&#xff1a;< 一个大于号是进行了覆盖。 两个大于号是追加。 输出重定向可以用于以后日志打印。 错误重定向&#xff1a; 错误重定向是不把信息打印到屏幕上而是打印到指定文件中去&#xff1a; 输出重定向其实是用的1…
阅读更多...
基于TCP的RPC服务

基于TCP的RPC服务

TCP服务器上的RPC&#xff0c;通过创建一个服务器进程监听传入的tcp连接&#xff0c;并允许用户 通过此TCP流执行RPC命令 -module(tr_server). -author("chen"). -behaviour(gen_server).%% API -export([start_link/1,start_link/0,get_count/0,stop/0 ]).-export(…
阅读更多...
Android问题笔记 - 关于SuperNotCalledException报错异常信息的解决方案

Android问题笔记 - 关于SuperNotCalledException报错异常信息的解决方案

点击跳转>Unity3D特效百例点击跳转>案例项目实战源码点击跳转>游戏脚本-辅助自动化点击跳转>Android控件全解手册点击跳转>Scratch编程案例点击跳转>软考全系列 &#x1f449;关于作者 专注于Android/Unity和各种游戏开发技巧&#xff0c;以及各种资源分享&…
阅读更多...
屏幕录像推荐：Apeaksoft Screen Recorder 中文 for mac

屏幕录像推荐：Apeaksoft Screen Recorder 中文 for mac

Apeaksoft Screen Recorder 是一款功能强大的屏幕录制软件&#xff0c;它允许用户在 Windows 和 Mac 系统上捕捉和录制屏幕活动。无论是记录游戏过程、创建教学视频、制作演示文稿还是捕捉在线流媒体内容&#xff0c;该软件都提供了丰富的功能和工具。 以下是 Apeaksoft Scree…
阅读更多...
【c++Leetcode】141. Linked List Cycle

【c++Leetcode】141. Linked List Cycle

问题入口 思想&#xff1a;Floyds Tortoise and Hare 这个算法简单来说就是设置一个慢指针&#xff08;一次移动一个位置&#xff09;和一个快指针&#xff08;一次移动两个位置&#xff09;。在遍历过程中&#xff0c;如果慢指针和快指针都指向同一个元素&#xff0c;证明环…
阅读更多...
JAVA基础-String StringBuffer 和 StringBuilder 类(9)

JAVA基础-String StringBuffer 和 StringBuilder 类(9)

目录 String创建字符串字符串长度连接字符串创建格式化字符串String 方法 **StringBuilder**StringBuffer String 创建字符串 String s1 "Runoob"; // String 直接创建 String s2 "Runoob"; // String 直接创建 String s3 s…
阅读更多...
C语言实现模拟 strcmp 字符串比较函数，实现字符串大小的比较

C语言实现模拟 strcmp 字符串比较函数，实现字符串大小的比较

完整代码&#xff1a; // 模拟 strcmp 字符串比较函数&#xff0c;实现字符串大小的比较 #include<stdio.h> //strcmp函数是两个字符串自左向右逐个字符相比&#xff08;按 ASCII 值大小相比较&#xff09;&#xff0c;直到出现不同的字符或遇 \0 为止&#xff0c;如果字…
阅读更多...
【RNA folding】RNA折叠算法与生物物理约束

【RNA folding】RNA折叠算法与生物物理约束

文章目录 RNA折叠RNA folding representation1 DP for simple folds1.1 Nussinov Algorithm objective1.2 energy constraints1.3 The key idea of the algorithm 2 DP for stacking and complex foldsStochastic context free grammars 来自Manolis Kellis教授&#xff08;MIT…
阅读更多...
进制转换（二进制、八进制、十进制、十六进制）

进制转换（二进制、八进制、十进制、十六进制）

目录 一&#xff1a;十进制转换为二进制、八进制、十六进制 &#xff08;1&#xff09;整数转换 &#xff08;2&#xff09;小数转换 1&#xff09;十进制转二进制 2&#xff09;十进制转八进制 3&#xff09;十进制转十六进制 二&#xff1a;二进制、八进制、十六进制转…
阅读更多...
安装Sentinel

安装Sentinel

大家好今天来安装Sentinel . 安装Sentinel 下载 : 大家可以选择相应版本(最新版本1.8.6) 官网下载地址 : Release v1.8.6 alibaba/Sentinel GitHub 链接&#xff1a;Sentinel_免费高速下载|百度网盘-分享无限制 (baidu.com) 提取码&#xff1a;8eh9 运行 : 将jar包放到任…
阅读更多...
redis怎么设计一个高性能hash表

redis怎么设计一个高性能hash表

问题 redis 怎么解决的hash冲突问题 &#xff1f;redis 对于扩容rehash有什么优秀的设计&#xff1f; hash 目标是解决hash冲突&#xff0c;那什么是hash冲突呢&#xff1f; 实际上&#xff0c;一个最简单的 Hash 表就是一个数组&#xff0c;数组里的每个元素是一个哈希桶&…
阅读更多...
EasyCVR视频汇聚平台显示有视频流但无法播放是什么原因？该如何解决？

EasyCVR视频汇聚平台显示有视频流但无法播放是什么原因？该如何解决？

视频汇聚/视频云存储/集中存储/视频监控管理平台EasyCVR能在复杂的网络环境中&#xff0c;将分散的各类视频资源进行统一汇聚、整合、集中管理&#xff0c;实现视频资源的鉴权管理、按需调阅、全网分发、云存储、智能分析等&#xff0c;视频智能分析平台EasyCVR融合性强、开放度…
阅读更多...
【LeetCode 算法专题突破】滑动窗口（⭐）

【LeetCode 算法专题突破】滑动窗口（⭐）

文章目录 前言1. 长度最小的子数组题目描述代码 2. 无重复字符的最长子串题目描述代码 3. 最大连续1的个数 III题目描述代码 4. 将 x 减到 0 的最小操作数题目描述代码 5. 水果成篮题目描述代码 6. 找到字符串中所有字母异位词题目描述代码 7. 串联所有单词的子串题目描述代码 …
阅读更多...
asp.net特色商品购物网站系统VS开发sqlserver数据库web结构c#编程Microsoft Visual Studio

asp.net特色商品购物网站系统VS开发sqlserver数据库web结构c#编程Microsoft Visual Studio

一、源码特点 asp.net特色商品购物网站系统 是一套完善的web设计管理系统&#xff0c;系统采用mvc模式&#xff08;BLLDALENTITY&#xff09;系统具有完整的源代码和数据库&#xff0c;系统主要采用B/S模式开发。开发环境为 vs2010&#xff0c;数据库为sqlserver2008&a…
阅读更多...
动手实现H5仿原生app前进后退切换效果

动手实现H5仿原生app前进后退切换效果

动手实现H5仿原生app前进后退切换效果 前言 最近在优化H5页面&#xff0c;我注意到当开发完成的移动端H5页面嵌入到微信小程序或者原生app中时&#xff0c;当触发页面路由切换会与原生app看上去有点格格不入&#xff0c;因为H5页面<router-view>切换路由时是直接替换了…
阅读更多...
网站、小程序常见布局样式记录

网站、小程序常见布局样式记录

文章目录 &#x1f380;前言&#xff1a;&#x1f415;网页样式展示小程序&#xff1a;《携程网》&#x1f380;持续更新... &#x1f380;前言&#xff1a; 本篇博客会收藏一些作者见到的网页、小程序页面&#xff0c;目的是用来寻找制作项目网页页面的灵感&#xff0c;有需要…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023