vue3实现与springboot交互【完成登陆及页面跳转】
提示：帮帮志会陆续更新非常多的IT技术知识，希望分享的内容对您有用。本章分享的是node.js和vue的使用。前后每一小节的内容是存在的有：学习and理解的关联性。【帮帮志系列文章】：每个知识点，都是写出代码和运行结果且前后关联上的去分析和说明（能大量节约您的时间）。
所有文章都*不会*直接把代码放那里，让您自己去看去理解。我希望我的内容对您有用而努力~
文章目录
本文章是系列文章，技术栈内容为：【springboot+vue】【前后分离】
【详细图文，实操步骤分享，节约时间版】。最终完成一个商业化项目。内容有：
springboot知识
mybatisPlus知识
vue知识
node.js知识
本小节的内容是：
vue篇章 之 ： 11.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层
java
//User 对应数据库创建实体类，此处代码略
@Mapper
public interface UserDao extends BaseMapper<User> {
}业务层
java
@Service
public 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
java
@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文件
html
<template>
<h1>我是帮帮志的登陆界面</h1>
<h2>这里可以写很多的标签及引入其他的vue标签来完善网页</h2>
<h2>script里面可以写很多逻辑 来操作标签和联系后台</h2>
<h2>style 写 这个vue文件标签用到的css样式</h2>
<!-- vue 沿用了前面文章 依次分享 Axios 路由等等的代码,除了现在的新代码,其他哪里都没有修改 -->
<!-- el-form就是element-ui的内容，下面的:model="user" 就是声明vue文件的全局变量user js里面在用，标签里面也用，标签填数据就直接给user.xxx了 -->
<el-form
label-width="100px"
: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"/>
</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";
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}
}
}
</script>四、登陆
启动springboot项目
启动vue项目
前端网页通过路由 ，访问login.vue
填写对应数据库的账号密码，点击登陆，跳转到了欢迎界面
总结
说明一下：整个这个系列实现前后分离的springboot+vue项目。序号文章一共也就10几篇，只有核心图文重点操作步骤来实现这个目标(基本上您边看边写：一个小时或者一上午就能跟着一起手搓一个前后分离项目，然后您可以自行添加功能和内容在您项目里面)
其他扩展细节知识点，本系列省略了(或者有链接)如：
还有一些案例，但是现在案例基本满足大部分情况，毕竟当前我们的目的是：快速手搓一个前后分离的全栈。
axios的其他功能及使用，管它*现在*用不用的上，内容全部丢进来。各位看官自行消化。那~可能会很多很多了（又耗时）。当前 系列： 手搓出来之后，您可以自行加功能和内容
（会陆续更新非常多的IT技术知识及泛IT的电商知识，可以点个关注 ，共同交流。ღ( ´･ᴗ･` )比心）
（也欢迎评论，提问。 我会依次回答~）