10.vue3与springboot交互-前后分离【完成登陆验证及页面跳转】
vue3实现与springboot交互【完成登陆及页面跳转】
提示：帮帮志会陆续更新非常多的IT技术知识，希望分享的内容对您有用。本章分享的是node.js和vue的使用。前后每一小节的内容是存在的有：学习and理解的关联性。【帮帮志系列文章】：每个知识点，都是写出代码和运行结果且前后关联上的去分析和说明（能大量节约您的时间）。
所有文章都*不会*直接把代码放那里，让您自己去看去理解。我希望我的内容对您有用而努力~
文章目录
- vue3实现与springboot交互【完成登陆及页面跳转】
- 前言
- 一、element-ui
- 介绍
- 安装及配置使用
- 二、springboot后台
- 数据库
- dao层
- 业务层
- controller
- 三、vue前端
- 四、登陆
- 总结
本文章是系列文章，技术栈内容为：【springboot+vue】【前后分离】
【详细图文，实操步骤分享，节约时间版】。最终完成一个商业化项目。内容有：
springboot知识
mybatisPlus知识
vue知识
node.js知识
本小节的内容是：
vue篇章 之 ： 10.vue3实现与springboot交互【完成登陆及页面跳转】
每一个文章小节都会把 标题 说的很清楚。前后关联看，可以快速实现：前后分离。本质上，额外文章链接和文章自己标题内容关系不大。
前面小节文章已经实现springboot的创建，springboot关联前端数据swagger和springboot通过mybatisplus操作数据库：
【2025年】基于电脑的jdk1.8通过idea创建springboot2.x版本(非常简洁快速)
【上榜文章，一文搞定】现在springboot是3.x以上版本，jdk版本至少要求17.但是很多时候我们电脑是jdk1.8(求稳定性和安全性)。文本分享本机电脑1.8的jdk。idea如何非常简洁快速的创建springboot
文章里面也有 为什么只能是jdk17起和地址指定为阿里云报错的解决办法
前面小节已经安装好node.js和分享了一些vue语法，及RESTful风格及安装配置swagger使用，和：
如何启动vue项目及vue语法组件化不同标签应对的作用说明
通过工具生成的vue案例(工具生成vue项目工程结构，里面有一个欢迎界面网页)为切入点，逐步逐步修改分享讲解，完成vue项目如何启动。及自行编写一些标签和样式来替换默认的内容，帮助理解包括里面的标签，js代码，样式如何配合的
前言
完成 前端 vue.js工程结构准备
前端能启动vue项目(vue项目的工程结构及vue语法分享在前面章节)。当前已经分享完毕的进度：vue项目里面网页写Axios取后台的值和发送数据到后台。已完成实现点击不同链接显示不同页面内容，vue-router路由配置
本小节：把Axios和router路由整合起来，登陆验证成功跳转到其他页面
完成 后台 springboot工程结构准备
包括springboot项目（dao、service、controller、pojo实体类）。controller类里面的方法能拿实现不同提交方式(get post put delete) 去调用service/dao。 dao通过mybatisPlus操作mysql数据库(前面章节有分享)
一、element-ui
介绍
element-ui一款基于Vue.js 2.0 的桌面端UI框架，有很多的功能，文本现在用于：
实现组件之间的传值。
element-ui 字面意思：标签-ui
提供了一致视觉风格和便捷的API接口：
按钮、图标、颜色和字体： 提供统一的颜色调色板和字体样式，确保界面视觉一致性。
输入框（Input）：支持文本、密码、数字输入等多种类型，还包含搜索框、清除按钮等功能。
选择器（Select）：提供单选、多选、多级联动等多种选择方式，适配复杂的数据选择场景。
表格（Table）：提供分页、排序、筛选等功能，可以灵活处理大量数据。
标签语法：
el-xxxx
如el-form 就是element-ui表单的标签
项目里面，但凡看见el-开头的标签 就是使用了element-ui
安装及配置使用
接上一个介绍分享，element-ui是vue2.0的插件
而vue3.0使用的是element-plus。当前系列实现前后分离，使用的是vue3.所以安装：
npm install element-plus --save
安装完毕，检查一下package.json的依赖，是否已经添加了
在main.js里面引入element-plus
二、springboot后台
数据库
dao层
//User 对应数据库创建实体类，此处代码略 @Mapper public interface UserDao extends BaseMapper { }业务层
@Service public class UserService { @Resource private UserDao userDao; private QueryWrapper wrapper = new QueryWrapper(); public boolean login(User user){ User u = userDao.selectOne(wrapper.eq("uname",user.getUname())); if(u == null){ return false; }else{ if(u.getUpwd().equals(user.getUpwd())){ return true; }else{ return false; } } } }controller
@Resource private UserService userService; @PostMapping("/login") public boolean login(User user){ //框架会直接封装好前端传递的数据到user里面，方法直接用 //前提：前端数据的user名字，正好对应User实体类的成员变量单词 // uname upwd boolean b = userService.login(user); return b; }mybatisPlus语法前面章节有分享
controller语法及vue的axios和restful 前面都有分享
主要是保证，章节只有 文章标题的 重点核心内容，其他的内容在另外的文章里面
三、vue前端
修改login.vue文件
我是帮帮志的登陆界面
这里可以写很多的标签及引入其他的vue标签来完善网页
script里面可以写很多逻辑 来操作标签和联系后台
style 写 这个vue文件标签用到的css样式
点击登录 import {reactive, toRefs} from "vue"; import {useRouter} from "vue-router"; import axios from "axios"; export default { name: "Login", setup(){ //创建一个路由 const router = useRouter(); const data = reactive({ user:{ //声明一个user对象 uname:'', //声明user对象的属性 upwd:'' //el-form标签，会自动把数据放到对应的属性里面 这里和后台名称对应 } }); const login = () => { axios.post("http://localhost:8081/login",{user}).then(res => { if(res){//后台controller方法，返回的就是一个boolean router.push('/welcome') //成功跳转欢迎界面 }else{ //失败 ElMessage.error('账号密码错误！') } }) } return {...toRefs(data),login} } }四、登陆
启动springboot项目
启动vue项目
前端网页通过路由 ，访问login.vue
填写对应数据库的账号密码，点击登陆，跳转到了欢迎界面
下一小节：
11.vue网页开启自动提交springboot后台查询-首页显示数据库表
文章里面：后台代码和本文章大同小异，前端vue页面分享了两种不同写法：原始html的表格实现循环。。。和element-ui版本的写法去获取后台数据并循环显示表格
附小节
通过element-ui自带的功能去：
验证element-ui输入的内容
自定义规则，某些文本框必填，有些长度不能小于6，等等。
总结
说明一下：整个这个系列实现前后分离的springboot+vue项目。序号文章一共也就10几篇，只有核心图文重点操作步骤来实现这个目标(基本上您边看边写：一个小时或者一上午就能跟着一起手搓一个前后分离项目，然后您可以自行添加功能和内容在您项目里面)
其他扩展细节知识点，本系列省略了(或者有链接)如：
还有一些案例，但是现在案例基本满足大部分情况，毕竟当前我们的目的是：快速手搓一个前后分离的全栈。
axios的其他功能及使用，管它*现在*用不用的上，内容全部丢进来。各位看官自行消化。那~可能会很多很多了（又耗时）。当前 系列： 手搓出来之后，您可以自行加功能和内容
（会陆续更新非常多的IT技术知识及泛IT的电商知识，可以点个关注，共同交流。ღ( ´･ᴗ･` )比心）
（也欢迎评论，提问。 我会依次回答~）
