当前位置：首页 > news >正文

vue3与springboot交互-前后分离【验证element-ui输入的内容】

news 来源：原创 2025/5/20 5:29:20

系列文章目录

提示：帮帮志会陆续更新非常多的IT技术知识，希望分享的内容对您有用。本章分享的是node.js和vue的使用。前后每一小节的内容是存在的有：学习and理解的关联性。【帮帮志系列文章】：每个知识点，都是写出代码和运行结果且前后关联上的去分析和说明（能大量节约您的时间）。

所有文章都*不会*直接把代码放那里，让您自己去看去理解。我希望我的内容对您有用而努力~

文章目录

系列文章目录
前言
一、前端
二、后端
总结

本文章是系列文章，技术栈内容为：【springboot+vue】【前后分离】
【详细图文，实操步骤分享，节约时间版】。最终完成一个商业化项目。内容有：
springboot知识
mybatisPlus知识
vue知识
node.js知识

本小节的内容是：
vue篇章之： 10.vue3实现与springboot交互【完成登陆及页面跳转】
的扩展附件篇章：
=验证element-ui输入的内容=

序号功能正文：10.vue3实现与springboot交互【完成登陆及页面跳转】
此文有全套的前端代码和后端代码，包括一系列的说明，来实现登陆跳转。
本文重点在验证上：
可能有读者并不需要去验证element-ui输入的内容。所以把内容拆开了。用于保证：对应文章的主题分享的内容：简洁清楚及核心重点详细

每一个文章小节都会把标题说的很清楚。前后关联看，可以快速实现：前后分离。本质上，额外文章链接和文章自己标题内容关系不大。

前面小节文章已经实现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路由整合起来
登陆验证成功跳转到其他页面(登陆逻辑实现就是序号10)

需要已经完成后台 springboot工程结构准备
包括springboot项目（dao、service、controller、pojo实体类）。controller类里面的方法能拿实现不同提交方式(get post put delete) 去调用service/dao。 dao通过mybatisPlus操作mysql数据库(前面章节有分享)

10.vue3与springboot交互-前后分离【完成登陆验证及页面跳转】
这个链接完成登陆功能(没有验证功能，描述的：整体登录跳转流程)，里面有详细的：
后端和前端的代码实现，每个关联的地方都有注释重点标记，文章内容包括：
获取标签数据 —》发送后端 —》controller接收—》service层代码dao层代码----》数据库验证 —》返回结果 —》跳转页面
也分享了：element-ui的安装和介绍及语法

一、前端

当前系列使用的是vue3，配合使用的是Element Plus
安装：

npm install element-plus --save

在main.js里面添加使用

import { createApp } from 'vue'
import App from './App.vue'
//这两句是新加的
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'const app = createApp(App)
app.use(ElementPlus) //这句也是新添加的
app.mount('#app')

编写标签代码

实现验证
el-form标签里面多了   :rules="rules"
el-form-item标签里面多了   prop="username"
下面有文字说明<template><el-form :model="data" :rules="rules" ref="formRef"><el-form-item label="用户名" prop="username"><el-input v-model="data.username"></el-input></el-form-item><el-form-item label="密码" prop="password"><el-input type="password" v-model="data.password"></el-input></el-form-item><el-button type="primary" @click="submitForm">提交</el-button></el-form>
</template><script setup>
import { ref } from 'vue';
import { ElMessage } from 'element-plus';const formRef = ref(null);
const data= ref({ //:model=里面  配置使用：username: '', //仅仅声明名字  没有赋值  这个是获取用户的数据 提交给后台的password: ''
});
const rules = { //:rules="验证对象"username: [ //每个需要验证对象的规则{ required: true, message: '请输入用户名', trigger: 'blur' }//{ required: 为true则表示必填, //message: '显示的提示信息文字', //trigger: '失去焦点验证' }//总结：失去焦点的时候，验证填了没有，如果验证失败(没填)，则显示提示信息],password: [{ required: true, message: '请输入密码', trigger: 'blur' },{ min: 6, message: '密码长度不能少于6位', trigger: 'blur' }//失去焦点的时候，验证长度是否大于6，如果验证失败(不满足)，则显示提示信息]
};//主要就是标签里面多了一个:rules=验证对象名字
//下面和data同层级 声明： 一个验证对象
//验证对象 里面根据格式去编写验证规则（属性规则名字：[{  ,  ,  }]）
//编写好 规则之后 在对应标签里面 使用：prop="属性规则名字" const submitForm = () => {formRef.value.validate((res) => {if (res) {alert('提交成功!');//路由.push(页面)} else {console.log('error submit!!');return false;}});
};
</script>//v-model="data.username"   这里对应的是  后端成员变量的属性名字
//controller  类    是  springmvc框架自动封装数据  ，需要对应：后端成员变量的属性名字

二、后端

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