亚洲人成www在线播放,日本精品中文字幕在线不卡,婷五月综合

一、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="http://www.imxmx.com/UploadFiles/2021-04-02/logo.png">

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="http://www.imxmx.com/UploadFiles/2021-04-02/logo.png">

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("操作失?。?quot;);
					}
				});
			}

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

<"1.0" encoding="UTF-8" "-//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

<"1.0" encoding="UTF-8""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`, `username`, `password`, `email`, `role`, `state`) VALUES (2, 'naughty', '888888', '[email protected]', '普通管理員', 0);
INSERT INTO `user`(`id`, `username`, `password`, `email`, `role`, `state`) VALUES (3, 'flysky01', '987654', '[email protected]', '普通用戶', 1);
INSERT INTO `user`(`id`, `username`, `password`, `email`, `role`, `state`) VALUES (4, 'anglybirds', '321654', '[email protected]', '普通用戶', 0);
INSERT INTO `user`(`id`, `username`, `password`, `email`, `role`, `state`) VALUES (7, 'admin003', 'q123456', '[email protected]', '普通用戶', 1);
INSERT INTO `user`(`id`, `username`, `password`, `email`, `role`, `state`) VALUES (8, 'admin005', '123456', '[email protected]', '普通用戶', 0);
INSERT INTO `user`(`id`, `username`, `password`, `email`, `role`, `state`) VALUES (9, 'admin007', '123456', '[email protected]', '普通用戶', 0);

表展示：

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