17. 基於Vue+Element+nodeJs+Express+MySql後臺管理系統-登錄頁面

我這裏的頁面一般分爲三部分：html、js和css。接下來開啓我們的頁面構建之旅。

一、 想實現的效果

二、 頁面實現

1. html

首先我們想將登錄的佈局寫出來。

<template>
  <div class="login-container">
    <el-form class="login-main sub-center-center" :model="formData" :rules="formRules" ref="formData" label-position="left" label-width="0px">
      <h3 class="title">週報管理系統登錄</h3>
      <el-form-item prop="name">
        <el-input type="text" v-model="formData.name" auto-complete="off" placeholder="賬號"></el-input>
      </el-form-item>
      <el-form-item prop="password">
        <el-input type="password" v-model="formData.password" auto-complete="off" placeholder="密碼"></el-input>
      </el-form-item>
      <el-form-item class="btn-box">
        <el-button type="primary" @click="submitLogin('formData')">登錄</el-button>
        <el-button @click="resetForm('formData')">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

2. css

然後來寫一下登錄頁面的樣式，我一些共用的樣式，統一放在了全局的scss文件裏，頁面裏只放一些這個頁面獨有的樣式。

<style scoped lang="scss">
.login-container{position: relative; width: 100vw; height: 100vh;background-image:url('../assets/images/login_bg.png'); background-size: cover; overflow: hidden;
  .login-main{ -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; background-clip: padding-box; width: 350px; padding: 35px 35px 15px; background: #fff; border: 1px solid #eaeaea; box-shadow: 0 0 25px #cac6c6;
    h3{text-align: center;}
    .btn-box{text-align: center;}
  }
}
</style>

3. JS

接下來就是我們的重中之重JS了，在這個頁面裏我用js主要實現一下功能：登錄表單驗證、登錄請求和登錄成功之後的跳轉。

<script>
import { userLogin } from '@/config/interface'
export default {
  data () {
    // 用戶名和密碼的驗證規則
    const validate = (rule, value, callback) => {
      const reg = /^[0-9a-zA-Z]*$/g
      if (!value) {
        callback(new Error('請輸入內容'))
      } else if (value.length < 3 || value.length > 6) {
        callback(new Error('內容長度需在 3 到 6 個字符'))
      } else if (!reg.test(value)) {
        callback(new Error('內容需爲字母或數字'))
      } else {
        callback()
      }
    }
    return {
      formData: {
        name: null,
        password: null
      },
      formRules: {
        name: [
          { validator: validate, trigger: 'blur' }
        ],
        password: [
          { validator: validate, trigger: 'blur' }
        ]
      },
      reqFlag: {
        login: true
      }
    }
  },
  methods: {
    // 登錄請求
    submitLogin (formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          const url = userLogin
          if (this.reqFlag.login) {
            this.reqFlag.login = false
            let params = {
              name: this.formData.name,
              password: this.$md5(this.formData.password)
            }
            this.$http(url, params)
            .then(res => {
              if (res.code == 1) {
                let data = res.data
                localStorage.setItem('userInfo', JSON.stringify(data))
                this.$store.dispatch('saveUserInfo', data)
                this.$common.toast('登陸成功', 'success', false)
                // 登陸成功後跳轉到用戶管理頁面
                this.$router.push({
                  path: '/home/user',
                  query: {}
                })
              }
              this.reqFlag.login = true
            })
          }
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    // 重置登錄填寫的信息
    resetForm (formName) {
      this.$refs[formName].resetFields()
    }
  }
}
</script>

至此，我的登錄界面就算是完成了。

三、項目體驗鏈接

週報管理系統體驗鏈接： https://www.17sucai.com/pins/35488.html

本人前端程序員，長期混跡於各種前端開發中，現在專門爲前端熱愛者建了個微信羣，和大家一起分享自己在工作、學習中遇到的技術知識或問題，還有各種資料和課程，各位感興趣的可以加入哦~