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

安装:

html 复制代码
npm install element-plus --save

在main.js里面添加使用

javascript 复制代码
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')

编写标签代码

javascript 复制代码
实现验证
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框架自动封装数据  ,需要对应:后端成员变量的属性名字

二、后端

java 复制代码
@Resource
private UserService userService;

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

总结

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

其他扩展细节知识点,本系列省略了(或者有链接)如:
还有一些案例,但是现在案例基本满足大部分情况,毕竟当前我们的目的是:快速手搓一个前后分离的全栈。
很多文章都有链接,除了实现前后分离步骤之外,还可以查看链接详细分享的文章,后面根据需求自行添加内容到项目里面

(会陆续更新非常多的IT技术知识及泛IT的电商知识,可以点个关注 ,共同交流。ღ( ´・ᴗ・` )比心)

(也欢迎评论,提问。 我会依次回答~)

相关推荐
sniper_fandc2 小时前
SpringBoot系列—入门
java·spring boot·后端
Albert Edison7 小时前
【最新版】IntelliJ IDEA 2025 创建 SpringBoot 项目
java·spring boot·intellij-idea
Piper蛋窝8 小时前
深入 Go 语言垃圾回收:从原理到内建类型 Slice、Map 的陷阱以及为何需要 strings.Builder
后端·go
六毛的毛10 小时前
Springboot开发常见注解一览
java·spring boot·后端
AntBlack11 小时前
拖了五个月 ,不当韭菜体验版算是正式发布了
前端·后端·python
315356691311 小时前
一个简单的脚本,让pdf开启夜间模式
前端·后端
uzong11 小时前
curl案例讲解
后端
开开心心就好12 小时前
免费PDF处理软件,支持多种操作
运维·服务器·前端·spring boot·智能手机·pdf·电脑
一只叫煤球的猫12 小时前
真实事故复盘:Redis分布式锁居然失效了?公司十年老程序员踩的坑
java·redis·后端
猴哥源码12 小时前
基于Java+SpringBoot的农事管理系统
java·spring boot