欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

SpringBoot+Vue開(kāi)發(fā)之Login校驗(yàn)規(guī)則、實(shí)現(xiàn)登錄和重置事件

 更新時(shí)間：2020年10月19日 09:51:23   作者：訾博ZiBo  
這篇文章主要介紹了SpringBoot+Vue開(kāi)發(fā)之Login校驗(yàn)規(guī)則、實(shí)現(xiàn)登錄和重置事件,本文通過(guò)圖文實(shí)例相結(jié)合給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下

一、Login校驗(yàn)規(guī)則

1、校驗(yàn)規(guī)則寫(xiě)法可參考Element-ui官網(wǎng)文檔

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

2、Login.vue頁(yè)面 

<template>
	<div class="login_container">
		<!-- 登錄塊 -->
		<div class="login_box">
			<!-- 頭像 -->
			<div class="acator_box">
				<img src="../assets/logo.png" />
			</div>
			<!-- 表單區(qū)域 -->
			<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 {
				// 表單數(shù)據(jù)對(duì)象
				loginForm: {
					username: "username",
					password: "password"
				},
				// 驗(yàn)證對(duì)象
				loginRules: {
					//用戶名
					username:[
						//必填項(xiàng)驗(yàn)證，required意思為必須的，trigger意思為觸發(fā)機(jī)制，blur意思為失去焦點(diǎn)
						{ required: true, message: '請(qǐng)輸入用戶名稱', trigger: 'blur' },
						//長(zhǎng)度驗(yàn)證
						{ min: 5, max: 10, message: '長(zhǎng)度在 5 到 10 個(gè)字符', trigger: 'blur' }
					],
					//密碼
					password:[
						//必填項(xiàng)驗(yàn)證，required意思為必須的，trigger意思為觸發(fā)機(jī)制，blur意思為失去焦點(diǎn)
						{ required: true, message: '請(qǐng)輸入用戶密碼', trigger: 'blur' },
						//長(zhǎng)度驗(yàn)證
						{ min: 5, max: 10, message: '長(zhǎng)度在 5 到 10 個(gè)字符', trigger: 'blur' }
					]
				}
			};
		},
	};
</script>
<style lang="less" scoped>
	// 根節(jié)點(diǎn)樣式
	.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、運(yùn)行結(jié)果

思考：

Element UI作為一個(gè)CSS框架，竟然能夠進(jìn)行表單驗(yàn)證，我想這肯定內(nèi)部封裝了JS；

二、實(shí)現(xiàn)登錄和重置事件

1、在main.js中導(dǎo)入axios

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import './plugins/element.js'
//導(dǎo)入全局樣式
import './assets/css/global.css'
//引入圖標(biāo)
import './assets/font/iconfont.css'
//導(dǎo)入axios
import axios from 'axios'
 
//掛載
Vue.prototype.$http = axios
//設(shè)置訪問(wèn)根路徑
axios.defaults.baseURL = "http://localhost:9000"
 
 
Vue.config.productionTip = false
 
new Vue({
	router,
	render: h => h(App)
}).$mount('#app')

2、在Login頁(yè)面編寫(xiě)對(duì)應(yīng)方法

（注意登錄方法和重置方法的綁定和在下面的編寫(xiě)）

<template>
	<div class="login_container">
		<!-- 登錄塊 -->
		<div class="login_box">
			<!-- 頭像 -->
			<div class="acator_box">
				<img src="../assets/logo.png" />
			</div>
			<!-- 表單區(qū)域 -->
			<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 {
				// 表單數(shù)據(jù)對(duì)象
				loginForm: {
					username: "admin",
					password: "123456"
				},
				// 驗(yàn)證對(duì)象
				loginRules: {
					//用戶名
					username:[
						//必填項(xiàng)驗(yàn)證，required意思為必須的，trigger意思為觸發(fā)機(jī)制，blur意思為失去焦點(diǎn)
						{ required: true, message: '請(qǐng)輸入用戶名稱', trigger: 'blur' },
						//長(zhǎng)度驗(yàn)證
						{ min: 5, max: 10, message: '長(zhǎng)度在 5 到 10 個(gè)字符', trigger: 'blur' }
					],
					//密碼
					password:[
						//必填項(xiàng)驗(yàn)證，required意思為必須的，trigger意思為觸發(fā)機(jī)制，blur意思為失去焦點(diǎn)
						{ required: true, message: '請(qǐng)輸入用戶密碼', trigger: 'blur' },
						//長(zhǎng)度驗(yàn)證
						{ min: 5, max: 10, message: '長(zhǎng)度在 5 到 10 個(gè)字符', trigger: 'blur' }
					]
				}
			};
		},
		methods:{
			//重置表單內(nèi)容
			resetLoginForm(){
				this.$refs.loginFormRef.resetField();
			},
			//登錄
			login(){
				//表單驗(yàn)證
				this.$refs.loginFormRef.validate(async valid =>{
					if(!valid){
						return;
					}
					const {data:res} = await this.$http.post("login",this.loginForm);//訪問(wèn)后臺(tái)
					console.log(res.flag);
					if(res.flag == "ok"){
						this.$message.success("操作成功！");
						// up主是這么寫(xiě)的，this.$router.push({"/home"}});
						this.$router.push("/home");//頁(yè)面路由跳轉(zhuǎn)
						console.log(res.user);
						window.sessionStorage.setItem("user",res.user);
					}else{
						this.$message.success("操作失?。?);
					}
				});
			}
		}
	};
</script>
<style lang="less" scoped>
	// 根節(jié)點(diǎn)樣式
	.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、創(chuàng)建Home.vue頁(yè)面

（這里我們把安全退出也寫(xiě)進(jìn)去了，安全退出是將自己登錄之后的賬戶信息也清除掉了，安全退出之前還有一些工作要做，因?yàn)檫@些東西改動(dòng)的地方多而雜，搬來(lái)就不想繼續(xù)做筆記了，但是想想，確實(shí)里面也有很多新的知識(shí)點(diǎn)，還是硬著頭皮來(lái)吧）

<template>
	<div>
		Home 首頁(yè)！
		<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組件，并配置路由

（創(chuàng)建的.vue頁(yè)面被稱為組件，創(chuàng)建之后引入才能用，再配置路由進(jìn)行頁(yè)面的分發(fā)；關(guān)于路由，我本來(lái)并不懂這個(gè)概念，但當(dāng)我知道了他的寫(xiě)法和功能再加上對(duì)WiFi路由器的聯(lián)想，意思也許就是負(fù)責(zé)頁(yè)面分發(fā)吧，暫時(shí)就不去細(xì)查了）

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:"/",
  //將首頁(yè)“/”重定向到“/login”
  redirect:"/login"
 },{
  //將上面引入的Login與“/login”訪問(wèn)路徑進(jìn)行綁定
  path:"/login",
  component:Login
 },{
  //將上面引入的Home與“/home”訪問(wèn)路徑進(jìn)行綁定
  path:"/home",
  component:Home
 }
]
 
const router = new VueRouter({
 routes
})
 
export default router

5、登錄方法詳述（注釋說(shuō)明）

 //登錄
			login(){
				//表單驗(yàn)證
				this.$refs.loginFormRef.validate(async valid =>{
					if(!valid){
						return;
					}
					//這里我們發(fā)起post請(qǐng)求，傳入表單數(shù)據(jù)，將服務(wù)器返回值傳給res對(duì)象
					const {data:res} = await this.$http.post("login",this.loginForm);//訪問(wèn)后臺(tái)
					console.log(res.flag);
					//如果res的flag是一個(gè)ok的話，就說(shuō)明我們請(qǐng)求成功，并通過(guò)了用戶驗(yàn)證！
					if(res.flag == "ok"){
						this.$message.success("操作成功！");
						// up主是這么寫(xiě)的，this.$router.push({"/home"}});
						this.$router.push("/home");//頁(yè)面路由跳轉(zhuǎn)
						console.log(res.user);
						//這個(gè)是將user數(shù)據(jù)傳遞給全局變量，方便在其他地方獲取
						window.sessionStorage.setItem("user",res.user);
					}else{
						this.$message.success("操作失敗！");
					}
				});
			}

6、在后臺(tái)（spring boot項(xiàng)目）創(chuàng)建user對(duì)象

（我使用了lombok，第一次用了之后就離不開(kāi)了）

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、編寫(xiě)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、編寫(xiě)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、編寫(xiě)LoginController

（這里需要說(shuō)明一下，我們使用JSON工具將map對(duì)象轉(zhuǎn)換成了JOSN字符串，具體坐標(biāo)見(jiàn)下面的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、修改啟動(dòng)類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、數(shù)據(jù)庫(kù)中的數(shù)據(jù)

創(chuàng)建表：

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;

插入數(shù)據(jù)：

INSERT INTO `user`(`id`, `username`, `password`, `email`, `role`, `state`) VALUES (1, 'admin', '123456', '123@qq.com', '超級(jí)管理員', 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);

表展示：

13、演示

（前后端項(xiàng)目要同時(shí)啟動(dòng)，因?yàn)槲覀円呀?jīng)綁定了http://localhost:9000，是向后臺(tái)獲取數(shù)據(jù)）

登錄之前：

點(diǎn)擊“提交”按鈕之后：

安全退出：

（重置事件太簡(jiǎn)單了，是vue實(shí)現(xiàn)的，只需調(diào)用一個(gè)方法即可，見(jiàn)代碼?。?/p>

（我們暫時(shí)就演示到這里?。?/p>

到此這篇關(guān)于SpringBoot+Vue開(kāi)發(fā)之Login校驗(yàn)規(guī)則、實(shí)現(xiàn)登錄和重置事件的文章就介紹到這了,更多相關(guān)spring boot vue實(shí)現(xiàn)登錄和重置事件內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

相關(guān)文章

最新評(píng)論