首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

SpringBoot+Vue开发之Login校验规则、实现登录和重置事件

Posted in Javascript onOctober 19, 2020

一、Login校验规则

1、校验规则写法可参考Element-ui官网文档

https://element.eleme.cn/#/zh-CN/component/form

SpringBoot+Vue开发之Login校验规则、实现登录和重置事件

2、Login.vue页面 

<template>
	<div class="login_container">
		<!-- 登录块 -->
		<div class="login_box">
			<!-- 头像 -->
			<div class="acator_box">
				<img src="../assets/logo.png" />
			</div>
			<!-- 表单区域 -->
			<el-form ref="loginFormRef" :rules="loginRules" :model="loginForm" class="login_form" label-width="0">
				<!-- 用户名 -->
				<el-form-item prop="username">
					<el-input v-model="loginForm.username" prefix-icon="iconfont icon-denglu">
					</el-input>
				</el-form-item>
				<!-- 密码 -->
				<el-form-item prop="password">
					<el-input v-model="loginForm.password" prefix-icon="iconfont icon-mima">
					</el-input>
				</el-form-item>
				<!-- 按钮 -->
				<el-form-item class="btns">
					<el-button type="primary">提交</el-button>
					<el-button type="info">重置</el-button>
				</el-form-item>
			</el-form>
		</div>
	</div>
</template>
<script>
	export default {
		data() {
			return {
				// 表单数据对象
				loginForm: {
					username: "username",
					password: "password"
				},
				// 验证对象
				loginRules: {
					//用户名
					username:[
						//必填项验证，required意思为必须的，trigger意思为触发机制，blur意思为失去焦点
						{ required: true, message: '请输入用户名称', trigger: 'blur' },
						//长度验证
						{ min: 5, max: 10, message: '长度在 5 到 10 个字符', trigger: 'blur' }
					],
					//密码
					password:[
						//必填项验证，required意思为必须的，trigger意思为触发机制，blur意思为失去焦点
						{ required: true, message: '请输入用户密码', trigger: 'blur' },
						//长度验证
						{ min: 5, max: 10, message: '长度在 5 到 10 个字符', trigger: 'blur' }
					]
				}
			};
		},
	};
</script>
<style lang="less" scoped>
	// 根节点样式
	.login_container {
		background-color: #2b4b6b;
		height: 100%;
	}
 
	.login_box {
		width: 450px;
		height: 300px;
		background-color: #ffffff;
		border-radius: 3px;
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
 
		.acator_box {
			width: 130px;
			height: 130px;
			border: 1px solid #eeeeee;
			border-radius: 50%;
			padding: 10px;
			box-shadow: 0 0 10px #dddddd;
			position: absolute;
			left: 50%;
			transform: translate(-50%, -50%);
			background-color: #00eeee;
 
			img {
				width: 100%;
				height: 100%;
				border-radius: 50%;
				background-color: #eeeeee;
 
			}
		}
	}
 
	.btns {
		display: flex;
		justify-content: flex-end;
	}
 
	.login_form {
		position: absolute;
		bottom: 0%;
		width: 100%;
		padding: 0 10px;
		box-sizing: border-box;
	}
</style>

3、运行结果

SpringBoot+Vue开发之Login校验规则、实现登录和重置事件

思考：

Element UI作为一个CSS框架，竟然能够进行表单验证，我想这肯定内部封装了JS；

二、实现登录和重置事件

1、在main.js中导入axios

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import './plugins/element.js'
//导入全局样式
import './assets/css/global.css'
//引入图标
import './assets/font/iconfont.css'
//导入axios
import axios from 'axios'
 
//挂载
Vue.prototype.$http = axios
//设置访问根路径
axios.defaults.baseURL = "http://localhost:9000"
 
 
Vue.config.productionTip = false
 
new Vue({
	router,
	render: h => h(App)
}).$mount('#app')

2、在Login页面编写对应方法

（注意登录方法和重置方法的绑定和在下面的编写）

<template>
	<div class="login_container">
		<!-- 登录块 -->
		<div class="login_box">
			<!-- 头像 -->
			<div class="acator_box">
				<img src="../assets/logo.png" />
			</div>
			<!-- 表单区域 -->
			<el-form ref="loginFormRef" :rules="loginRules" :model="loginForm" class="login_form" label-width="0">
				<!-- 用户名 -->
				<el-form-item prop="username">
					<el-input v-model="loginForm.username" prefix-icon="iconfont icon-denglu">
					</el-input>
				</el-form-item>
				<!-- 密码 -->
				<el-form-item prop="password">
					<el-input v-model="loginForm.password" prefix-icon="iconfont icon-mima" type="password">
					</el-input>
				</el-form-item>
				<!-- 按钮 -->
				<el-form-item class="btns">
					<el-button type="primary" @click="login()">提交</el-button>
					<el-button type="info" @click="resetLoginForm()">重置</el-button>
				</el-form-item>
			</el-form>
		</div>
	</div>
</template>
<script>
	export default {
		data() {
			return {
				// 表单数据对象
				loginForm: {
					username: "admin",
					password: "123456"
				},
				// 验证对象
				loginRules: {
					//用户名
					username:[
						//必填项验证，required意思为必须的，trigger意思为触发机制，blur意思为失去焦点
						{ required: true, message: '请输入用户名称', trigger: 'blur' },
						//长度验证
						{ min: 5, max: 10, message: '长度在 5 到 10 个字符', trigger: 'blur' }
					],
					//密码
					password:[
						//必填项验证，required意思为必须的，trigger意思为触发机制，blur意思为失去焦点
						{ required: true, message: '请输入用户密码', trigger: 'blur' },
						//长度验证
						{ min: 5, max: 10, message: '长度在 5 到 10 个字符', trigger: 'blur' }
					]
				}
			};
		},
		methods:{
			//重置表单内容
			resetLoginForm(){
				this.$refs.loginFormRef.resetField();
			},
			//登录
			login(){
				//表单验证
				this.$refs.loginFormRef.validate(async valid =>{
					if(!valid){
						return;
					}
					const {data:res} = await this.$http.post("login",this.loginForm);//访问后台
					console.log(res.flag);
					if(res.flag == "ok"){
						this.$message.success("操作成功！");
						// up主是这么写的，this.$router.push({"/home"}});
						this.$router.push("/home");//页面路由跳转
						console.log(res.user);
						window.sessionStorage.setItem("user",res.user);
					}else{
						this.$message.success("操作失败！");
					}
				});
			}
		}
	};
</script>
<style lang="less" scoped>
	// 根节点样式
	.login_container {
		background-color: #2b4b6b;
		height: 100%;
	}
 
	.login_box {
		width: 450px;
		height: 300px;
		background-color: #ffffff;
		border-radius: 3px;
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
 
		.acator_box {
			width: 130px;
			height: 130px;
			border: 1px solid #eeeeee;
			border-radius: 50%;
			padding: 10px;
			box-shadow: 0 0 10px #dddddd;
			position: absolute;
			left: 50%;
			transform: translate(-50%, -50%);
			background-color: #00eeee;
 
			img {
				width: 100%;
				height: 100%;
				border-radius: 50%;
				background-color: #eeeeee;
 
			}
		}
	}
 
	.btns {
		display: flex;
		justify-content: flex-end;
	}
 
	.login_form {
		position: absolute;
		bottom: 0%;
		width: 100%;
		padding: 0 10px;
		box-sizing: border-box;
	}
</style>

3、创建Home.vue页面

（这里我们把安全退出也写进去了，安全退出是将自己登录之后的账户信息也清除掉了，安全退出之前还有一些工作要做，因为这些东西改动的地方多而杂，搬来就不想继续做笔记了，但是想想，确实里面也有很多新的知识点，还是硬着头皮来吧）

<template>
	<div>
		Home 首页！
		<el-button class="info" @click="logout()">
			安全退出！
		</el-button>
	</div>
</template>
 
<script>
	export default {
		methods:{
			logout(){
				window.sessionStorage.clear();
				this.$router.push("/login");
			}
		}
	}
</script>
 
<style>
</style>

4、在index.js中引入home组件，并配置路由

（创建的.vue页面被称为组件，创建之后引入才能用，再配置路由进行页面的分发；关于路由，我本来并不懂这个概念，但当我知道了他的写法和功能再加上对WiFi路由器的联想，意思也许就是负责页面分发吧，暂时就不去细查了）

import Vue from 'vue'
import VueRouter from 'vue-router'
//引入login组件
import Login from '../components/Login.vue'
//引入home组件
import Home from '../components/Home.vue'
 
Vue.use(VueRouter)
 
const routes = [
 {
  path:"/",
  //将首页“/”重定向到“/login”
  redirect:"/login"
 },{
  //将上面引入的Login与“/login”访问路径进行绑定
  path:"/login",
  component:Login
 },{
  //将上面引入的Home与“/home”访问路径进行绑定
  path:"/home",
  component:Home
 }
]
 
const router = new VueRouter({
 routes
})
 
export default router

5、登录方法详述（注释说明）

//登录
			login(){
				//表单验证
				this.$refs.loginFormRef.validate(async valid =>{
					if(!valid){
						return;
					}
					//这里我们发起post请求，传入表单数据，将服务器返回值传给res对象
					const {data:res} = await this.$http.post("login",this.loginForm);//访问后台
					console.log(res.flag);
					//如果res的flag是一个ok的话，就说明我们请求成功，并通过了用户验证！
					if(res.flag == "ok"){
						this.$message.success("操作成功！");
						// up主是这么写的，this.$router.push({"/home"}});
						this.$router.push("/home");//页面路由跳转
						console.log(res.user);
						//这个是将user数据传递给全局变量，方便在其他地方获取
						window.sessionStorage.setItem("user",res.user);
					}else{
						this.$message.success("操作失败！");
					}
				});
			}

6、在后台（spring boot项目）创建user对象

（我使用了lombok，第一次用了之后就离不开了）

package com.zibo.sport.bean;
 
import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;
 
@Data
@NoArgsConstructor
@AllArgsConstructor
public class User {
  private int id;
  private String username;
  private String password;
  private String email;
  private String role;
  private boolean state;
 
}

7、编写UserDao

package com.zibo.sport.dao;
 
import com.zibo.sport.bean.User;
import org.apache.ibatis.annotations.Param;
import org.springframework.stereotype.Repository;
 
@Repository
public interface UserDao {
  User getUserByMessage(@Param("username") String username, @Param("password") String password);
}

8、编写UserDao.xml

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
    "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.zibo.sport.dao.UserDao">
  <select id="getUserByMessage" parameterType="String" resultType="user">
    select * from user where username=#{username} and password=#{password} and state=1;
  </select>
</mapper>

9、编写LoginController

（这里需要说明一下，我们使用JSON工具将map对象转换成了JOSN字符串，具体坐标见下面的pom.xml）

package com.zibo.sport.controller;
 
import com.alibaba.fastjson.JSON;
import com.zibo.sport.bean.User;
import com.zibo.sport.dao.UserDao;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
 
import java.util.HashMap;
import java.util.Map;
 
@RestController
public class LoginController {
 
  @Autowired
  UserDao userDao;
 
  @RequestMapping("/login")
  public String login(@RequestBody User user){
    String flag = "error";
    System.out.println("user:" + user);
    User user1 = userDao.getUserByMessage(user.getUsername(), user.getPassword());
    System.out.println("user1:" + user1);
    if(user1!=null){
      flag = "ok";
    }
    Map<String,Object> map = new HashMap<>();
    map.put("flag",flag);
    map.put("user",user1);
    return JSON.toJSONString(map);
  }
 
}

10、修改启动类SportApplication，使其能够扫描dao

package com.zibo.sport;
 
import org.mybatis.spring.annotation.MapperScan;
import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;
 
@MapperScan("com.zibo.sport.dao")//扫描dao
@SpringBootApplication
public class SportApplication {
 
  public static void main(String[] args) {
    SpringApplication.run(SportApplication.class, args);
  }
 
}

11、pom.xml

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
     xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd">
  <modelVersion>4.0.0</modelVersion>
  <parent>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-parent</artifactId>
    <version>2.3.4.RELEASE</version>
    <relativePath/> <!-- lookup parent from repository -->
  </parent>
  <groupId>com.zibo</groupId>
  <artifactId>sport</artifactId>
  <version>0.0.1-SNAPSHOT</version>
  <name>sport</name>
  <description>Demo project for Spring Boot</description>
 
  <properties>
    <java.version>1.8</java.version>
  </properties>
 
  <dependencies>
    <dependency>
      <groupId>com.alibaba</groupId>
      <artifactId>fastjson</artifactId>
      <version>1.2.74</version>
    </dependency>
    <dependency>
      <groupId>org.projectlombok</groupId>
      <artifactId>lombok</artifactId>
    </dependency>
    <dependency>
      <groupId>org.springframework.boot</groupId>
      <artifactId>spring-boot-starter-jdbc</artifactId>
    </dependency>
    <dependency>
      <groupId>org.springframework.boot</groupId>
      <artifactId>spring-boot-starter-web</artifactId>
    </dependency>
    <dependency>
      <groupId>org.mybatis.spring.boot</groupId>
      <artifactId>mybatis-spring-boot-starter</artifactId>
      <version>2.1.3</version>
    </dependency>
 
    <dependency>
      <groupId>mysql</groupId>
      <artifactId>mysql-connector-java</artifactId>
      <scope>runtime</scope>
    </dependency>
    <dependency>
      <groupId>org.springframework.boot</groupId>
      <artifactId>spring-boot-starter-test</artifactId>
      <scope>test</scope>
      <exclusions>
        <exclusion>
          <groupId>org.junit.vintage</groupId>
          <artifactId>junit-vintage-engine</artifactId>
        </exclusion>
      </exclusions>
    </dependency>
  </dependencies>
 
  <build>
    <plugins>
      <plugin>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-maven-plugin</artifactId>
      </plugin>
    </plugins>
  </build>
 
</project>

12、数据库中的数据

创建表：

CREATE TABLE `zb`.`user` (
 `id` int(0) NOT NULL AUTO_INCREMENT COMMENT '主键',
 `username` varchar(255) CHARACTER SET utf8 COLLATE utf8_general_ci NOT NULL,
 `password` varchar(255) CHARACTER SET utf8 COLLATE utf8_general_ci NOT NULL,
 `email` varchar(255) CHARACTER SET utf8 COLLATE utf8_general_ci NOT NULL,
 `role` varchar(255) CHARACTER SET utf8 COLLATE utf8_general_ci NOT NULL,
 `state` tinyint(0) NOT NULL DEFAULT 0,
 PRIMARY KEY (`id`) USING BTREE
) ENGINE = InnoDB AUTO_INCREMENT = 10 CHARACTER SET = utf8 COLLATE = utf8_general_ci ROW_FORMAT = Dynamic;

插入数据：

INSERT INTO `user`(`id`, `username`, `password`, `email`, `role`, `state`) VALUES (1, 'admin', '123456', '123@qq.com', '超级管理员', 1);
INSERT INTO `user`(`id`, `username`, `password`, `email`, `role`, `state`) VALUES (2, 'naughty', '888888', '456@qq.com', '普通管理员', 0);
INSERT INTO `user`(`id`, `username`, `password`, `email`, `role`, `state`) VALUES (3, 'flysky01', '987654', 'qwe@qq.com', '普通用户', 1);
INSERT INTO `user`(`id`, `username`, `password`, `email`, `role`, `state`) VALUES (4, 'anglybirds', '321654', 'aaaa@163.com', '普通用户', 0);
INSERT INTO `user`(`id`, `username`, `password`, `email`, `role`, `state`) VALUES (7, 'admin003', 'q123456', 'c@qq.com', '普通用户', 1);
INSERT INTO `user`(`id`, `username`, `password`, `email`, `role`, `state`) VALUES (8, 'admin005', '123456', 'cxz@qq.com', '普通用户', 0);
INSERT INTO `user`(`id`, `username`, `password`, `email`, `role`, `state`) VALUES (9, 'admin007', '123456', 'rty@qq.com', '普通用户', 0);

表展示：

SpringBoot+Vue开发之Login校验规则、实现登录和重置事件

13、演示

（前后端项目要同时启动，因为我们已经绑定了http://localhost:9000，是向后台获取数据）

登录之前：

SpringBoot+Vue开发之Login校验规则、实现登录和重置事件

点击“提交”按钮之后：

SpringBoot+Vue开发之Login校验规则、实现登录和重置事件

安全退出：

SpringBoot+Vue开发之Login校验规则、实现登录和重置事件

（重置事件太简单了，是vue实现的，只需调用一个方法即可，见代码！）

（我们暂时就演示到这里！）

到此这篇关于SpringBoot+Vue开发之Login校验规则、实现登录和重置事件的文章就介绍到这了,更多相关spring boot vue实现登录和重置事件内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木！

SpringBoot+Vue开发之Login校验规则、实现登录和重置事件

- Author -

訾博ZiBo

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
javascript时间自动刷新实现原理与步骤
Jan 06 Javascript
javascript中attachEvent用法实例分析
May 14 Javascript
JavaScript解八皇后问题的方法总结
Jun 12 Javascript
jQuery实例—选项卡的简单实现(js源码和jQuery)
Jun 14 Javascript
angularjs 源码解析之scope
Aug 22 Javascript
详解利用exif.js解决ios手机上传竖拍照片旋转90度问题
Nov 04 Javascript
angular2路由之routerLinkActive指令【推荐】
May 30 Javascript
原生JS实现自定义下拉单选选择框功能
Oct 12 Javascript
JavaScript设计模式之责任链模式实例分析
Jan 16 Javascript
解决vue项目运行npm run serve报错的问题
Oct 26 Javascript
使用原生javascript开发计算器实例代码
Feb 21 Javascript
5种 JavaScript 方式实现数组扁平化
Oct 05 Javascript
vue+node 实现视频在线播放的实例代码
Oct 19 #Javascript
js实现网页随机验证码
Oct 19 #Javascript
JS实现4位随机验证码
Oct 19 #Javascript
如何编写一个 Webpack Loader的实现
Oct 18 #Javascript
JavaScript中EventBus实现对象之间通信
Oct 18 #Javascript
vuex刷新后数据丢失的解决方法
Oct 18 #Javascript
JavaScript大数相加相乘的实现方法实例
Oct 18 #Javascript
太阳码(1) 条码(1) JDBC(3) 日志(1) 延时任务(1) openGauss(1) 二维码(2) Post(1) Word(2) Get(1)
You might like
超人钢铁侠联手合作？美漫作家呼吁DC漫威合作联动以抵抗疫情
2020/04/09 欧美动漫
新浪微博API开发简介之用户授权(PHP基础篇)
2011/09/25 PHP
分享一下贝贝成长进度的php代码
2012/09/14 PHP
php防止sql注入之过滤分页参数实例
2014/11/03 PHP
php 使用curl模拟登录人人(校内)网的简单实例
2016/06/06 PHP
thinkPHP5框架实现基于ajax的分页功能示例
2018/06/12 PHP
Laravel框架Eloquent ORM简介、模型建立及查询数据操作详解
2019/12/04 PHP
jQuery 隐藏和显示 input 默认值示例
2014/06/03 Javascript
JS实现自动变化的导航菜单效果代码
2015/09/09 Javascript
Bootstrap字体图标无法正常显示的解决方法
2016/10/08 Javascript
Vue.js 递归组件实现树形菜单（实例分享）
2016/12/21 Javascript
CSS3+JavaScript实现翻页幻灯片效果
2017/06/28 Javascript
微信小程序使用Socket的实例
2017/09/19 Javascript
Node.js学习之查询字符串解析querystring详解
2017/09/28 Javascript
JS实现基于拖拽改变物体大小的方法
2018/01/23 Javascript
vuejs使用axios异步访问时用get和post的实例讲解
2018/08/09 Javascript
详解nodejs http请求相关总结
2019/03/31 NodeJs
vue中keep-alive组件的入门使用教程
2019/06/06 Javascript
JavaScript 扩展运算符用法实例小结【基于ES6】
2019/06/17 Javascript
Vue使用Clipboard.JS在h5页面中复制内容实例详解
2019/09/03 Javascript
细说webpack6 Babel的使用详解
2019/09/26 Javascript
centos 下面安装python2.7 +pip +mysqld
2014/11/18 Python
Linux下通过python访问MySQL、Oracle、SQL Server数据库的方法
2016/04/23 Python
代码分析Python地图坐标转换
2018/02/08 Python
python实现简单神经网络算法
2018/03/10 Python
Python txt文件加入字典并查询的方法
2019/01/15 Python
sklearn+python:线性回归案例
2020/02/24 Python
Python unittest框架操作实例解析
2020/04/13 Python
解决django框架model中外键不落实到数据库问题
2020/05/20 Python
Pandas之缺失数据的实现
2021/01/06 Python
Python机器学习工具scikit-learn的使用笔记
2021/01/28 Python
娇韵诗法国官网：Clarins法国
2019/01/29 全球购物
如何为DataGridView添加一个定制的Column Type
2014/01/21 面试题
三八妇女节活动主持词
2014/03/17 职场文书
2014年员工工作总结范文
2014/11/18 职场文书
学校教师师德师风承诺书
2015/04/28 职场文书