vue3+node.js 高校裝置管理系統設計5-前端登入介面
阿新 • • 發佈:2022-03-09
目錄
Login.vue元件製作
1.在components資料夾中新建Login.vue,並建立vue預設樣式
2.在router資料夾中的index.js修改路由
- 首先匯入Login元件
import Login from '../components/Login.vue'
- 修改路由重定向至Login介面
const routes = [{ path: '/', redirect: '/login', },{ path: '/login', name: '/login', component: Login, } ]
3.Login程式碼
<template> <div class="login_bg"> <div class="login_box"> <!-- LOGO --> <div class="avatar_box"> <img src="../assets/logo.png" alt="" /> </div> <!-- 表單 --> <el-form ref="loginFormRef" :model="loginForm" :rules="loginFormRules" class="login_form" > <!-- 使用者名稱 --> <el-form-item prop="username"> <el-input v-model="loginForm.username" prefix-icon="el-icon-user" ></el-input> </el-form-item> <!-- 密碼 --> <el-form-item prop="password"> <el-input v-model="loginForm.password" prefix-icon="el-icon-lock" type="password" ></el-input> </el-form-item> <!-- 按鈕 --> <el-form-item class="btns"> <el-button type="primary" plain @click="login">登入</el-button> <el-button type="primary" plain @click="resetLoginForm" >重置</el-button > </el-form-item> </el-form> </div> </div> </template> <script> export default { data() { return { loginForm: { username: "admin", password: "admin", msg: "", // 接收資料 }, loginList: {}, loginFormRules: { // 驗證使用者名稱是否合法 username: [ { required: true, message: "請輸入賬號", trigger: "blur" }, { min: 3, max: 5, message: "長度在 3 到 10 個字元", trigger: "blur" }, ], // 驗證密碼是否合法 password: [ { required: true, message: "請輸入密碼", trigger: "blur" }, { min: 3, max: 5, message: "長度在 3 到 10 個字元", trigger: "blur" }, ], }, }; }, created() {}, methods: { // 點選重置按鈕 resetLoginForm() { this.$refs.loginFormRef.resetFields(); }, login() { // 重置Cookie this.$cookies.remove("user_id"); this.$cookies.remove("username"); this.$cookies.remove("token"); this.$cookies.remove("role_name"); this.$cookies.remove("rightsList"); this.$axios .post(this.HOST + "/api/login", { username: this.loginForm.username, password: this.loginForm.password, }) .then((result) => { this.status = result.data.status; if (this.status === 200) { this.$message.success("登入成功!"); this.loginList = result.data.data; this.$cookies.set("user_id", result.data.user_id, { expires: 7, }); this.$cookies.set("username", result.data.username, { expires: 7, }); this.$cookies.set("token", result.data.token, { expires: 7, }); this.$cookies.set("role_name", result.data.role_name, { expires: 7, }); this.addUserLogin(); this.$router.push("/home"); } else if(this.status === 404){ this.$message.error("無此使用者!"); } else if(this.status === 403){ this.$message.error("該使用者被禁用!"); } else { this.$message.error("密碼錯誤!"); } }) .catch((err) => { console.log(err); }); }, // 記錄使用者登入時間 addUserLogin() { this.user_id = this.$cookies.get("user_id"); this.$axios .post(this.HOST + "/api/addUserLogin", { user_id: this.user_id, }) .then((result) => { this.status = result.data.status; if (this.status === 200) { this.$message.success("記錄使用者登入時間成功"); } else { this.$message.error("記錄使用者登入時間失敗"); } }) .catch((error) => { console.log(error); }); }, }, }; </script> <style lang="less" scoped> .login_bg { background: url('../assets/bg.jpg') fixed 100%; height: 100%; } .login_box { width: 450px; height: 300px; background-color: #fff; border-radius: 3px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .avatar_box { height: 130px; width: 130px; border: 1px solid #eee; border-radius: 50%; padding: 10px; box-shadow: 0 0 10px #ddd; position: absolute; left: 50%; transform: translate(-50%, -50%); background-color: #fff; img { width: 100%; height: 100%; border-radius: 50%; background-color: #eee; } } .login_form { position: absolute; bottom: 0; width: 100%; padding: 0 20px; box-sizing: border-box; } .btns { display: flex; justify-content: flex-end; } </style>
4.部分程式碼解釋及元件介紹
el-from
<el-form
ref="loginFormRef"
:model="loginForm"
:rules="loginFormRules"
class="login_form"
>
</el-form>
- ref 繫結控制元件,$refs 獲取控制元件,methods 裡就可以用
this.refs.loginFormRef.validate((valid) => {} - :model 動態繫結loginForm表單
- :rules 動態繫結驗證規則,通過loginFormRules屬性傳入約定的驗證規則
- class 繫結樣式