Vue实战之后台管理系统（二）

　　接着上一篇，接下来要完成的是登陆注册页面，这两个页面在流程上很相近，这里主要以登陆页面来做说明．

1.创建相关文件夹及文件并进行配置

在src目录下创建一个view文件夹，之后所写的和页面相关的vue组件都放在此目录下，为了方便引用，要在webpack.base.config.js的resolve中进行配置．

这里为了便于维护，还可以在view下给每一个模块新建一个文件夹，因此这里我在view目录下还创建了一个auth文件夹，将用户登陆，注册相关的vue组件都放在view/auth中．

２.配置路由

在写具体的效果之前先进行路由配置，让我们可以在浏览器中访问到登陆页面．修改src/router/index.js文件：

• 引入Login组件
  由于之前我们已经配置了view文件夹的别名，因此这里的引用路径可以直接从view开始：

import Login from 'view/auth/Login'

• 配置路由路径
  在routes中添加一个对象，其中包含路由的路径，路由的名称，路由对应的组件：

export default new Router({
  routes: [
    {
      path: '/',
      name: 'Home',
      component: Home
    },
    {
      path: '/login',
      name: 'Login',
      component: Login
    }
  ]
})

这样在本地就可以通过http://localhost:8080/#/login来访问到登陆页面．

３.实现登陆表单

在写表单之前注意一点，vue2.0之后组件的template中只能有一个顶层结点，否则会报错，即

//正确
<template>
  <div class="login"></div>
</template>
//错误
<template>
  <div class="xxxx"></div>
  <div class="xxxx"></div>
</template>

element-ui提供了各种表单组件，具体的可以参考http://element.eleme.io/#/zh-CN/component/form，由于登陆都需要对用户输入进行验证，并且验证条件不同的系统也有所不同，因此这里选择了自定义校验规则这一类表单．

<template>
  <div class="login">
    <el-form :model="loginForm" :rules="loginFormRules" ref="loginForm" label-width="100px" class="demo-ruleForm">
      <el-form-item label="用户名" prop="name">
        <el-input v-model.number="loginForm.name"></el-input>
      </el-form-item>
      <el-form-item label="密码" prop="pass">
        <el-input type="password" v-model="loginForm.pass" auto-complete="off" @keyup.enter.native="submitForm"></el-input>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="submitForm" class="login-btn">登陆</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

注意：为了更好的用户体验，一般会监听回车事件，使用户可以使用回车键提交表单，vue中提供了键值修饰符来监听键盘事件：

<input v-on:keyup.enter="submit">
<!-- 缩写语法 -->
<input @keyup.enter="submit">

但在element-ui组件中，这样写是不能触发事件的，还需要加上.native修饰符，即

<el-input  @keyup.enter.native="submit"></el-input>

接下来定义相应的数据变量以及验证规则：

data() {
      var checkName = (rule, value, callback) => {
        if (value==='') {
          return callback(new Error('用户名不能为空'));
        }else{
          callback();
        }

      };
      var validatePass = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请输入密码'));
        }else {
          callback();
        }
      };
      return {
        loginForm: {
          pass: '',
          name: ''
        },
        loginFormRules: {
          pass: [
            {validator: validatePass, trigger: 'blur'}
          ],
          name: [
            {validator: checkName, trigger: 'blur'}
          ]
        }
      };

这里只验证了是否为空，还可以对长度和字符格式进行限制，这个根据需要可以自己限制，一般一个系统中会有多个地方都需要进行相同的验证，因此可以把验证方法写到外部的一个js文件中，然后在需要的地方进行引入，减少工作量以及重复代码．

最后来完成表单的提交方法，主要包括两个部分：
（１）只有表单验证都通过之后，表单才会被提交：

this.$refs.loginForm.validate((valid) => {
          if (valid) {
           //验证成功，进行表单提交
          } else {
          //验证失败，不提交表单
            console.log('error submit!!');
            return false;
          }
        });

（２）调用后台提借的接口进行登陆验证：
之前我们已经引入了axios，这里使用axios的post方法进行接口调用．

this.$axios.post('/auth/login',this.loginForm).then(res => {
//登陆成功，跳转到后台首页
}).catch(err => {
//登陆失败，进行错误提示
});

这样就完成了登陆页面，注册页面主要是在表单和接口调用上有所不同，这里就不再详细说明．

交流QQ群：255489119