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层

//User 对应数据库创建实体类，此处代码略

@Mapper
public interface UserDao extends BaseMapper<User> {

}

业务层

@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

@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文件

<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的电商知识，可以点个关注，共同交流。ღ( ´･ᴗ･` )比心）
（也欢迎评论，提问。 我会依次回答~）