头条管理系统：用户登录

莫凡是莫烦
182 阅读4分钟

一、创建组件并配置路由

1、创建 src/views/login/index.vue

<template>
  <div class="login-container">登录页面</div>
</template>

<script>
  export default {
    name: 'LoginIndex',
    components: {},
    props: {},
    data() {
      return {}
    },
    computed: {},
    watch: {},
    created() {},
    mounted() {},
    methods: {}
  }
</script>

<style scoped lang="less"></style>

自定义代码段：百度一下。

Sublime: Sublime 自定义代码段

Visual Studio Code：Visual Studio Code 代码段

补充：（vs自定义代码段）

（1）在vs--->文件--->首选项--->用户片段--->新建全局代码片段

（2）从sanp的位置就是你自定义的代码片段位置（"prefix": "快捷生成的关键字",）

这个网站可以进行替换：

snippet-generator.app/?descriptio…

2、将登陆页面组件配置到路由中

import Vue from 'vue'
import VueRouter from 'vue-router'
+ import Login from '@/views/login'

Vue.use(VueRouter)

// 路由配置表
const routes = [
+  {
+    path: '/login',
+    name: 'login',
+    component: Login
+  }
]

const router = new VueRouter({
  routes
})

export default router

3、最后手动输入 /login 访问测试。

页面布局

<template>
  <div class="login-container">
    <!--
      el-form 表单组件
      每个表单项都必须使用 el-form-item 组件包裹
     -->

    <div class="login-form-wrap">
      <div class="login-head">
        <div class="logo"></div>
      </div>
      <el-form class="login-form" ref="form" :model="user">
        <el-form-item>
          <el-input v-model="user.mobile" placeholder="请输入手机号"></el-input>
        </el-form-item>
        <el-form-item>
          <el-input v-model="user.code" placeholder="请输入验证码"></el-input>
        </el-form-item>
        <el-form-item>
          <el-checkbox v-model="checked"
            >我已阅读并同意用户协议和隐私条款</el-checkbox
          >
        </el-form-item>
        <el-form-item>
          <el-button class="login-btn" type="primary" @click="onSubmit"
            >登录</el-button
          >
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'LoginIndex',
    components: {},
    props: {},
    data() {
      return {
        user: {
          mobile: '', // 手机号
          code: '' // 验证码
        },
        checked: false // 是否同意协议的选中状态
      }
    },
    computed: {},
    watch: {},
    created() {},
    mounted() {},
    methods: {
      onSubmit() {
        console.log('submit!')
      }
    }
  }
</script>

<style scoped lang="less">
  .login-container {
  //背景填满
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background: url('./login_bg.jpg') no-repeat;
    background-size: cover;
    .login-form-wrap {
      min-width: 300px;
      padding: 30px 50px 10px;
      background-color: #fff;
      .login-head {
        display: flex;
        justify-content: center;
        .logo {
          width: 200px;
          height: 57px;
          background: url('./logo_index.png') no-repeat;
          background-size: contain;
        }
      }
      .login-form {
        .login-btn {
        //按钮
          width: 100%;
        }
      }
    }
  }
</style>

实现基本登录功能

思路：

  • 给登陆按钮注册点击事件
  <el-form-item>
        <el-button type="primary" @click="onLogin" class="login-btn">登录</el-button>
  </el-form-item>

  • 获取表单数据 （引入axios连接的接口）

  • 请求登录

  • 处理后端响应结果

    1.成功处理

    2.失败处理

onLogin () {
  // 获取表单数据（根据接口要求绑定数据）
  const user = this.user

  // 表单验证

  // 验证通过，提交登录
  request({
    method: 'POST',
    url: '/mp/v1_0/authorizations',
    // data 用来设置 POST 请求体
    data: user
  }).then(res => {
    console.log(res)

    // 登录成功
  }).catch(err => {
    console.log('登录失败', err)
    // 登录失败
  })
}

登录消息提示

  • 这里使用里Message组件

image.png

image.png

打开组件的代码可以看到，通过给组件的按钮加监听事件函数实现

image.png

完整代码

  methods: {
    onLogin () {
      // 获取表单数据（根据接口要求绑定数据）
      const user = this.user

      request({
        method: 'POST',
        url: '/mp/v1_0/authorizations',
        data: user
      }).then((result) => {
        console.log(result)
        this.$message({
          message: '登录成功',
          type: 'success'
        })
      }).catch((err) => {
        console.log('登录失败', err)
        this.$message.error('登录失败，手机号或验证码错误')
      })
    }
  }

弥补缺陷,网络不好时，用户点击登录后会跳出多条提示。这样很不好，通过加载组件改善（button组件）

测试效果方法： image.png

image.png

（1）首先用一个boolean变量控制

      <el-form-item>
        <el-button type="primary" @click="onLogin"
        :loading="onLoading"
        class="login-btn">登录</el-button>
  </el-form-item>

（2）提表单后就开始启用状态

data () {
    return {
    ……
      onLoading: false
      // 让这个变量控制状态而不是写死
    }
  },

（3）接收到表单（无论登录成功与否），关闭loading状态

methods: {
    onLogin () {
      // 获取表单数据（根据接口要求绑定数据）
     ……
      this.onLoading = true
    ……
      }).then((result) => {
       ……
        this.onLoading = false
      }).catch((err) => {
        ……
        this.onLoading = false
      })
    }
  }

表单验证

手机号与验证码的验证

  1. 首先绑定规则 ，在el-form加：rules='rules' ，同时给el-form-item分别加prop='mobile'和prop="code"(prop 属性需要指定表单对象中的数据名称)

image.png 2. 写具体的规则


    data:{
        return{
        ……
             rules: {
            // 表单验证规则配置
            // 要验证的数据名称：规则列表[]
            mobile: [
              { required: true, message: '请输入手机号', trigger: 'change' },
              { pattern: /^1[3|5|7|8|9]\d{9}$/, message: '请输入正确的手机号码', trigger: 'blur' }
            ],
            code: [
              { required: true, message: '验证码不能为空', trigger: 'blur' },
              { pattern: /^\d{6}$/, message: '请输入正确的验证码格式' }
            ]
           }
        }
    }

为了防止表单未登录无法验证的的问题，这里要手动触发

  1. 给el-for的ref一个有意义的名字

image.png 2. 在登录的函数中进行触发验证的相关操作


methods: {
    onLogin () {
      // 获取表单数据（根据接口要求绑定数据）
      // 表单验证
      this.$refs['login-form'].validate((valid) => {
        console.log(valid)
        if (!valid) {
          // 验证没有通过就不执行登录操作，并进行验证提示
          return
        }
        // 验证通过进行登录
        this.login()
      })
    },
    login () {
      // 开启登陆中 loading...

      this.onLoading = true
      request({
        method: 'POST',
        url: '/mp/v1_0/authorizations',
        data: this.user
      }).then((result) => {
        console.log(result)
        this.$message({
          message: '登录成功',
          type: 'success'
        })
        // 关闭loading
        this.onLoading = false
      }).catch((err) => {
        console.log('登录失败', err)
        this.$message.error('登录失败，手机号或验证码错误')
        this.onLoading = false
      })
    }

  }

勾选协议验证

  1. 由elementUI的自定义方法可知

（git） image.png

image.png 2. 组装成我们需要的

（1） 给组件的el-form-item 加prop属性，绑定user.agree 这里是直接在user加agree:false image.png

image.png (2) 在验证规则的地方加上agree的验证


 rules: {
        // 表单验证规则配置
       ……
       ……
        agree: [
          {
            validator: (rule, value, callback) => {
              // value是agree的值
              if (value) {
                callback()
              } else {
                callback(new Error('请勾选同意协议'))
              }
            },
            trigger: 'change'
          }
        ]
      }
    }

封装请求模块

对于项目中的请求操作：

  • 接口请求可能需要重用
  • 实际工作中，接口非常容易变动，改起来麻烦

我们建议的做法是把所有的请求都封装成函数然后统一的组织到模块中进行管理，这样做的好处就是：管理维护更方便，也好重用。

下面是我们优化封装请求的具体操作。

1、创建 src/api/user.js，封装登录请求方法

import request from '@/utlis/request'

export const login = (data) => {
  return request({
    method: 'POST',
    url: '/mp/v1_0/authorizations',
    data
    // data === user
  })
}

2、在登录组件中加载使用

// 首先引入

import { login } from '@/api/user'

改写 image.png

对比之前

  request({
    method: 'POST',
    url: '/mp/v1_0/authorizations',
    // data 用来设置 POST 请求体
    data: user
  }).then(res => {
    console.log(res)
avatar
文章
阅读
粉丝