首页
所有分类
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 相关文章推荐
js实现连续英文字符自动换行兼容ie6 ie7和firefox
Sep 06 Javascript
浅析jquery某一元素重复绑定的问题
Jan 03 Javascript
Node.js项目中调用JavaScript的EJS模板库的方法
Mar 11 Javascript
JavaScript实现九九乘法表的简单实例
Jun 07 Javascript
Bootstrap3制作搜索框样式的方法
Jul 11 Javascript
jQuery获取select选中的option的value值实现方法
Aug 29 Javascript
微信小程序 连续旋转动画（this.animation.rotate）详解
Apr 07 Javascript
Node.js创建Web、TCP服务器
Dec 05 Javascript
vue2.0 实现导航守卫（路由守卫）
May 21 Javascript
Vue获取页面元素的相对位置的方法示例
Feb 05 Javascript
微信小程序手动添加收货地址省市区联动
May 18 Javascript
js实现点击按钮随机生成背景颜色
Sep 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
mounted(1) create(1) Next.js(1) 子查询(1) 脚手架(2) el-table(1) TableField(1) 日志格式分析(1) Mybatis-Plus(3) nginx(76)
You might like
PHP字符串长度计算 - strlen()函数使用介绍
2013/10/15 PHP
php遍历文件夹下的所有文件和子文件夹示例
2014/03/20 PHP
什么情况下可以不写PHP的闭合标签“?&gt;”
2014/08/28 PHP
PHP中使用break跳出多重循环代码实例
2015/01/21 PHP
Javascript &amp; DHTML 实例编程（教程）基础知识
2007/06/02 Javascript
JS运行耗时操作的延时显示方法
2010/11/19 Javascript
改进UCHOME的记录发布，增强可访问性用户体验
2011/01/17 Javascript
JavaScript传递变量: 值传递?引用传递?
2011/02/22 Javascript
extjs实现选择多表自定义查询功能 前台部分(ext源码)
2011/12/20 Javascript
js对象转json数组的简单实现案例
2014/02/28 Javascript
JavaScript动态改变div属性的实现方法
2015/07/22 Javascript
jQuery实现图片与文字描述左右滑动自动切换的方法
2015/07/27 Javascript
js表单提交和submit提交的区别实例分析
2015/12/10 Javascript
JavaScript ES5标准中新增的Array方法
2016/06/28 Javascript
详解如何较好的使用js
2016/12/16 Javascript
详解Weex基于Vue2.0开发模板搭建
2017/03/20 Javascript
微信小程序 开发MAP（地图）实例详解
2017/06/27 Javascript
JavaScript复制变量三种方法实例详解
2020/01/09 Javascript
javascript局部自定义鼠标右键菜单
2020/12/08 Javascript
[02:41]2015国际邀请赛中国区预选赛观战指南
2015/05/20 DOTA
python实现删除文件与目录的方法
2014/11/10 Python
zookeeper python接口实例详解
2018/01/18 Python
python中numpy的矩阵、多维数组的用法
2018/02/05 Python
30秒轻松实现TensorFlow物体检测
2018/03/14 Python
Python字典的基本用法实例分析【创建、增加、获取、修改、删除】
2019/03/05 Python
python 安装impala包步骤
2020/03/28 Python
使用Python画了一棵圣诞树的实例代码
2020/11/27 Python
html5/css3响应式页面开发总结
2018/10/16 HTML / CSS
压铸汽车模型收藏家：Diecastmodelswholesale.com
2016/12/21 全球购物
乐高官方旗舰店：LEGO积木玩具
2019/04/06 全球购物
中英文自我评价常用句型
2013/12/19 职场文书
感恩节活动方案
2014/01/27 职场文书
行政人事经理职位说明书
2014/03/05 职场文书
留学推荐信中文范文
2015/03/26 职场文书
2015教师年度思想工作总结
2015/04/30 职场文书
导游词之峨眉乐山/兵马俑/北京故宫御花园
2019/09/03 职场文书