10.vue3与springboot交互-前后分离【完成登陆验证及页面跳转】_springboot3+vue3跳转界面

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 对应数据库创建实体类，此处代码略@Mapperpublic interface UserDao extends BaseMapper<User> {}

业务层

@Servicepublic class UserService { @Resource private UserDao userDao; private QueryWrapper<User> wrapper = new QueryWrapper<User>(); 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

@Resourceprivate UserService userService;@PostMapping(\"/login\")public boolean login(@RequestBody User user){//框架会直接封装好前端传递的数据到user里面，方法直接用//前提：前端数据的user名字，正好对应User实体类的成员变量单词// uname upwd boolean b = userService.login(user); return b;}

mybatisPlus语法前面章节有分享
controller语法及vue的axios和restful 前面都有分享
主要是保证，章节只有 文章标题的 重点核心内容，其他的内容在另外的文章里面

三、vue前端

修改login.vue文件

<template> <h1>我是帮帮志的登陆界面</h1> <h2>这里可以写很多的标签及引入其他的vue标签来完善网页</h2> <h2>script里面可以写很多逻辑 来操作标签和联系后台</h2> <h2>style 写 这个vue文件标签用到的css样式</h2> <el-form :model=\"user\" style=\"margin-top: 40px\"> <el-form-item label=\"账号\" size=\"large\"> <el-input v-model=\"user.uname\" size=\"large\" style=\"width: 300px\"/> </el-form-item> <el-form-item label=\"密码\" size=\"large\"> <el-input type=\"password\" v-model=\"user.upwd\" size=\"large\" style=\"width: 300px\" @keyup.enter=\"login\"/>  </el-form-item> <el-button type=\"success\" @click=\"login\" size=\"large\">点击登录</el-button> </el-form></template><script>import {reactive, toRefs} from \"vue\";import {useRouter} from \"vue-router\";import axios from \"axios\";import { ElMessage } from \'element-plus\'; // 导入消息组件 //红色/绿色 网页头部中间会弹出显示 几秒消失export default { name: \"Login\", data(){ return { router:useRouter(), //赋值路由变量 user:{ //声明全局变量 uname:\'\', upwd:\'\' } } },methods:{ login(){ alert(this.user.uname) //检查一下 确定给后台数据了 alert(this.user.upwd) //this.user 全局变量 axios.post(\"http://localhost:8081/login\",this.user) .then(res => {  if (res.data) { this.$router.push(\'/welcome\'); //跳转首页  } else { ElMessage.error(res.data.message || \'账号或密码错误\');  } }) } }}</script>

四、登陆

启动springboot项目
启动vue项目

前端网页通过路由 ，访问login.vue

填写对应数据库的账号密码，点击登陆，跳转到了欢迎界面

下一小节：
11.vue网页开启自动提交springboot后台查询-首页显示数据库表
文章里面：后台代码和本文章大同小异，前端vue页面分享了两种不同写法：原始html的表格实现循环。。。和element-ui版本的写法去获取后台数据并循环显示表格

附小节
通过element-ui自带的功能去：
验证element-ui输入的内容
自定义规则，某些文本框必填，有些长度不能小于6，等等。

总结

说明一下：整个这个系列实现前后分离的springboot+vue项目。序号文章一共也就10几篇，只有核心图文重点操作步骤来实现这个目标(基本上您边看边写：一个小时或者一上午就能跟着一起手搓一个前后分离项目，然后您可以自行添加功能和内容在您项目里面)

其他扩展细节知识点，本系列省略了(或者有链接)如：
还有一些案例，但是现在案例基本满足大部分情况，毕竟当前我们的目的是：快速手搓一个前后分离的全栈。
axios的其他功能及使用，管它*现在*用不用的上，内容全部丢进来。各位看官自行消化。那~可能会很多很多了（又耗时）。当前 系列： 手搓出来之后，您可以自行加功能和内容

（会陆续更新非常多的IT技术知识及泛IT的电商知识，可以点个关注，共同交流。ღ( ´･ᴗ･` )比心）
（也欢迎评论，提问。 我会依次回答~）