2. 程式人生 > 程式設計 >SpringBoot+Vue開發之Login校驗規則、實現登入和重置事件

SpringBoot+Vue開發之Login校驗規則、實現登入和重置事件

阿新 • • 發佈：2020-10-21

一、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' }
					]
				}
			};
		},};
</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"
				},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%);
			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','[email protected]','超級管理員',1);
INSERT INTO `user`(`id`,`state`) VALUES (2,'naughty','888888','[email protected]','普通管理員',0);
INSERT INTO `user`(`id`,`state`) VALUES (3,'flysky01','987654','[email protected]','普通使用者',`state`) VALUES (4,'anglybirds','321654','[email protected]',`state`) VALUES (7,'admin003','q123456','[email protected]',`state`) VALUES (8,'admin005','[email protected]',`state`) VALUES (9,'admin007','[email protected]',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校驗規則、實現登入和重置事件

一、Login校驗規則 1、校驗規則寫法可參考Element-ui官網文件 https://element.eleme.cn/#/zh-CN/component/form

前端Vue中常用rules校驗規則

rules: { //驗證非空和長度 name: [{ required: true, message: \"站點名稱不能為空\", trigger: \"blur\" },{ min: 3,max: 5,message: \'長度在 3 到 5 個字元\',trigger: \'blur\'}], //驗證數值 age: [{type: \'

Vue中常用rules校驗規則

Vue常見效驗規則 1、是否合法IP地址 export function validateIP(rule, value,callback) { if(value==\'\'||value==undefined||value==null){

23.Django（form元件 自定製校驗規則、鉤子、更改圖書管理系統）

自定製校驗規則 之前form表單給我們提供了一些校驗功能： 這些基本你的校驗功能，不足以滿足我們日常的需要，使用者名稱不允許出現敏感字元，電話號碼的驗證，等等。

Elenent ui中的表單校驗規則、自定義校驗規則、預驗證功能

校驗規則 html <el-form ref=\"addFormRef\" :model=\"addForm\" :rules=\"addFormRules\" label-width=\"70px\">

SpringBoot學習入門之Hello專案的構建、單元測試和熱部署等（配圖文，配置資訊詳解，附案例原始碼）

前言：  本文章主要是個人在學習SpringBoot框架時做的一些準備，參考老師講解進行完善對SpringBoot構建簡單專案的學習彙集成本篇文章，作為自己對SpringBoot框架的總結與筆記。

vue+element-ui 自定義校驗規則實現郵箱驗證

技術標籤：vueelementui 表單 <div class="informa"> <div class="tetli">經營者資訊</div>

springboot表單提交之validator校驗

前言 表單提交是最常見的資料提交方式，我們經常會填寫表單資訊，比如使用者名稱，身份證，手機號等等，因此就會產生身份證是否合法，使用者名稱是否為空，雖然我們可以直接在前臺使用js就進行格式的校驗，但如果使用

Vue Element-ui表單校驗規則實現

目錄1、前言2、規則校驗的入門模式2.1、示例程式碼2.2、form項2.3、prop項2.4、rules項2.5、rule項2.6、使用規則2.7、規則校驗的核心3、規則校驗的進階模式3.1、巢狀物件屬性名3.2、自定義校驗器validator3.3、型別t

vue el-form 自定義校驗規則

<el-form-item class=\'fzfp\' label=\'分值分配：\' prop=\'fzfp\'><div v-if=\'preview\'>{{ this.rowData.socreOptionValue }}</div><div v-else><el-row class=\'fzfp_row\'>&l

Vue.js 型別(數字、整數、小數、負數、手機號、座機號等)校驗規則

Vue.prototype.validator = function (type) {switch (type) {case \'number\':return /^(\\-|\\+)?\\d+(\\.\\d+)?$/;///^[0-9]*$/;case \'integer\':return /^\\d*$/;case \'float\':return /^[+-]?((0|([1-9]\\d*

springboot之引數校驗---------validation 多實體接受引數

pom.xml引入依賴 <!--引數校驗--> <dependency> <groupId>org.springframework.boot</groupId>

vue + Element UI 之 rules校驗

vue + Element UI 之rules校驗 rules: { name: [ /*required 是否必填trigeer 觸發檢查的方式 blur 失去焦點時檢查 change 值發生改變時觸發*/

SpringBoot如何優雅的處理校驗引數的方法

前言 做web開發有一點很煩人就是要校驗引數，基本上每個介面都要對引數進行校驗，比如一些格式校驗 非空校驗都是必不可少的。如果引數比較少的話還是容易 處理的一但引數比較多了的話程式碼中就會出現大量的IF ELSE

golang之資料校驗的實現程式碼示例

目前大都是使用validator 安裝 go get gopkg.in/go-playground/validator.v9 原理 當然只能通過反射來實現了，之前寫過一篇反射的文章golang之反射和斷言 ，裡面有寫到怎麼通過反射獲取struct tag。

vue-cli3 取消eslint校驗程式碼的解決辦法

在網上找了各種辦法都沒解決，看了下文件就解決了關閉vue-cli3.0 報錯：eslint-disable-next-line to ignore the next line. 注意我這裡是VUE3.0

SpringBoot中的異常處理與引數校驗的方法實現

兄弟們好，這次來跟老鐵交流兩個問題，異常和引數校驗，在說引數校驗之前我們先來說異常處理吧，因為後面引數的校驗會牽扯到異常處理這塊的內容。

SpringBoot +Vue開發考試系統的教程

一、考試系統簡介 新鮮出爐的一款SpringBoot +Vue的考試系統，支援多種題型：選擇題、多選題、判斷題、填空題、綜合題以及數學公式。支援線上考試，教師線上批改試卷。

vue路由許可權校驗功能的實現程式碼

引言 做後臺系統的時候，難免會有使用者許可權的判斷。admin可以檢視全部選單，user只能檢視部分選單。

解析SpringBoot專案開發之Gzip壓縮過程

為了減少資料在網路中的傳輸量，從而減少傳輸時長，增加使用者體驗，瀏覽器大都是支援Gzip壓縮技術的，http的請求頭 Accept-Encoding:gzip,deflate 就表示這次請求可以接受Gzip壓縮後的資料，圖片不要進行壓縮，因為