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

系列文章目次

提示：帮帮志会陆续更新非常多的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
安装：

1. npm install element-plus --save

复制代码

在main.js里面添加使用

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

复制代码

编写标签代码

1. 实现验证
2. el-form标签里面多了   :rules="rules"
3. el-form-item标签里面多了   prop="username"
4. 下面有文字说明
6. <template>
7.   <el-form :model="data" :rules="rules" ref="formRef">
8.     <el-form-item label="用户名" prop="username">
9.       <el-input v-model="data.username"></el-input>
10.     </el-form-item>
11.     <el-form-item label="密码" prop="password">
12.       <el-input type="password" v-model="data.password"></el-input>
13.     </el-form-item>
14.     <el-button type="primary" @click="submitForm">提交</el-button>
15.   </el-form>
16. </template>
18. <script setup>
19. import { ref } from 'vue';
20. import { ElMessage } from 'element-plus';
23. const formRef = ref(null);
24. const data= ref({ //:model=里面  配置使用：
25.   username: '', //仅仅声明名字  没有赋值  这个是获取用户的数据 提交给后台的
26.   password: ''
27. });
28. const rules = { //:rules="验证对象"
29.   username: [ //每个需要验证对象的规则
30.     { required: true, message: '请输入用户名', trigger: 'blur' }
31.     //{ required: 为true则表示必填,
32.     //message: '显示的提示信息文字',
33.     //trigger: '失去焦点验证' }
34.     //总结：失去焦点的时候，验证填了没有，如果验证失败(没填)，则显示提示信息
35.   ],
36.   password: [
37.     { required: true, message: '请输入密码', trigger: 'blur' },
38.     { min: 6, message: '密码长度不能少于6位', trigger: 'blur' }
39.     //失去焦点的时候，验证长度是否大于6，如果验证失败(不满足)，则显示提示信息
40.   ]
41. };
43. //主要就是标签里面多了一个:rules=验证对象名字
44. //下面和data同层级 声明： 一个验证对象
45. //验证对象 里面根据格式去编写验证规则（属性规则名字：[{  ,  ,  }]）
46. //编写好 规则之后 在对应标签里面 使用：prop="属性规则名字"
49. const submitForm = () => {
50.   formRef.value.validate((res) => {
51.     if (res) {
52.       alert('提交成功!');
53.       //路由.push(页面)
54.     } else {
55.       console.log('error submit!!');
56.       return false;
57.     }
58.   });
59. };
60. </script>
62. //v-model="data.username"   这里对应的是  后端成员变量的属性名字
63. //controller  类    是  springmvc框架自动封装数据  ，需要对应：后端成员变量的属性名字

复制代码

---

二、后端

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

复制代码

---

总结

说明一下：整个这个系列实现前后分离的springboot+vue项目。序号文章一共也就10几篇，只有焦点图文重点操作步调来实现这个目的(根本上您边看边写：一个小时或者一上午就能跟着一起手搓一个前后分离项目，然后您可以自行添加功能和内容在您项目里面)
其他扩展细节知识点，本系列省略了(或者有链接)如：
还有一些案例，但是现在案例根本满足大部分环境，毕竟当前我们的目的是：快速手搓一个前后分离的全栈。
许多文章都有链接，除了实现前后分离步调之外，还可以查看链接具体分享的文章，后面根据需求自行添加内容到项目里面
（会陆续更新非常多的IT技能知识及泛IT的电商知识，可以点个关注，共同互换。ღ( ´･ᴗ･` )比心）
（也欢迎批评，提问。 我会依次回复~）

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。