Vue2学习笔记3 - 制作Login页面

在学会了用vue-cli安装环境，以及了解了vue-cli4的目录结构后，开始学习如何写代码，从登录页面开始，不过学习总要有参考对象和学习目标，作者打算学习制作一个基本的管理平台框架，先去码云（https://gitee.com/）平台搜索一些vue的代码作为参考学习对象。这里，主要参考 good_luck / vue-admin-beautiful （https://gitee.com/chu1204505056/vue-admin-beautiful），以及 花裤衩 / vue-admin-template （https://gitee.com/panjiachen/vue-admin-template），这两个都以element-ui作为主要的UI框架，并且相关的说明也都比较详细，也都有demo网站。

1. 改造根组件：App.vue

vue-cli默认创建的app.vue里内嵌了一堆我们用不上的东西，基本都清理掉，就保持最少的基本框架。代码如下：

<template>
  <div id="app">
    <router-view />
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

2. 安装element-ui，sass依赖包

目前在vue的项目中，大量实现了sass代码来实现可编译的css，以及参考的两个demo都使用了element-ui的依赖包，为了方便起见，我们这里也先安装好element-ui,sass,sass-loader依赖包。

npm install -S element-ui sass sass-loader

3.改造启动文件：main.js

需要在main.js中引用element-ui，来作为全局变量。

import Vue from 'vue'
import App from './App.vue'
import router from './router'

import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import locale from 'element-ui/lib/locale/lang/en' // lang i18n

Vue.config.productionTip = false

// set ElementUI lang to EN
Vue.use(ElementUI, { locale })
// 如果想要中文版 element-ui，按如下方式声明
// Vue.use(ElementUI)

new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

 

4.改造路由文件：router\index.js

参考vue-admin-template中的router\index.js文件，完整的路由页面比较多，我在这里仅为了制作login页面，把其余用不上的路由都删了，仅保留了login页面，home页面，404页面的路由

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)
export const constantRoutes = [
  {
    path: '/login',
    component: () => import('@/views/login/index'),
    hidden: true,
  },
  {
    path: '/404',
    name: '404',
    component: () => import('@/views/404'),
    hidden: true,
  },
  {
    path: '/',
    redirect: 'home',
  },
  {
    path: '/home',
    name: 'home',
    component: () => import('@/views/home/index'),
  },
  { path: '*', redirect: '/404', hidden: true }
]

const router = new VueRouter({
  // mode: 'history', // require service support
  scrollBehavior: () => ({ y: 0 }),
  routes: constantRoutes,
})


export default router

5.补充相关组件：login，home，404

在view目录下，根据路由文件中的路径，在src\view目录下,新增404.vue,login\index.vue,home\index.vue这些文件以及目录。其中404.vue，home.vue，并不是我们这里需要重点说明的组件，可以直接从demo中copy，也可以制作一个最简单的vue组件，里面仅表明这是XXX页面，如下：

<template>
  <div>
    this is home/404 page.
  </div>
</template>

重点需要说明的是login.vue组件，同样从vue-admin-template的项目源码从copy 过来对应的login.vue文件。这个文件的代码比较多，在这里我们先来进行简化，方便我们理解响应的知识点，删除掉整个style标签,整个script标签，template标签中，大量无用的，无法理解的都删掉，剩下的，基本都是最容易了解的了。

<template>
  <div class="login-container">
    <el-form label-position="left">
      <div class="title-container">
        <h3 class="title">Login Form</h3>
      </div>

      <el-form-item >
        <el-input placeholder="Username" name="username" type="text" />
      </el-form-item>

      <el-form-item >
        <el-input placeholder="Password" name="password" type="password" />
      </el-form-item>

      <el-button  type="primary" style="width:100%;margin-bottom:30px;" >Login</el-button>

      <div class="tips">
        <span style="margin-right:20px;">username: admin</span>
        <span> password: any</span>
      </div>
    </el-form>
  </div>
</template>

至此，我们启动serve模式，打开页面，输入网址：http://localhost:8080/#/login，登录页面就显示了。

6. Login组件实现前端校验功能，以及跳转页面

到上面的步骤，我们发现，输入框中，任何输入都无效，参考element-ui官方文档是没有绑定v-model的原因，我们要开始增加script标签，以及在上面的标签中设定相关绑定参数。

.....
<el-form-item >
        <el-input placeholder="Username" name="username" type="text" v-model="loginForm.username" />
      </el-form-item>

      <el-form-item >
        <el-input placeholder="Password" name="password" type="password" v-model="loginForm.password" />
      </el-form-item>
....

<script>
export default {
  name: 'Login',
  data() {
    return {
      loginForm: {
        username: '',
        password: ''
      }
    }
  },
}

</script>

如上面代码，补上v-model，以及data()中增加return数据对象。用户名和密码就可以输入了，下一步就是增加提交按钮的事件了。用v-on:click='function_name'来增加事件监听。v-on：也可以用@来替代，所以在button上增加@click.native.prevent="handleLogin"，这里click后面的native,prevent被成为事件修饰符（参考：https://cn.vuejs.org/v2/guide/events.html#%E4%BA%8B%E4%BB%B6%E4%BF%AE%E9%A5%B0%E7%AC%A6），在封装好的组件上使用，所以要加上.native才能click，.prevent就相当于..event.preventDefault()，所以@click.native.prevent是用来阻止默认行为的 。

<el-button  type="primary" style="width:100%;margin-bottom:30px;" @click.native.prevent="handleLogin">Login</el-button>

接下来，我们来增加script中的methods对象，这个对象是用来存储函数方法的。methods，data()，watch，都是同层级别对象。

export default {
  data() {
    return {},
  },
  watch: {},
  methods: {},
}

我们在methods中增加handleLogin方法,可以用 handleLogin: function() { }，也可以如下面handleLogin() {} 来定义。另外，我们参考vue-admin-template ，使用element-ui中对form表单的验证方式，在template标签中的form标签中追加了mode和rules属性，在form-item标签中，追加prop属性，prop属性的值必须对应model属性绑定的数据中的对象。

<el-form label-position="left" ref="loginForm" :model="loginForm" :rules="loginRules" >

<el-form-item prop="username">

<el-form-item prop="password">

在script中，我们追加校验规则loginRules，规则中引用了validateUsername，validatePassword这两个对象来验证username，以及password，在handleLogin的方法中，通过this.$refs.loginForm来定位到form对象，再调用form对象的validate方法，这个是element-ui的form表单方法，对整个表单进行校验的方法，参数为一个回调函数。该回调函数会在校验结束后被调用，并传入两个参数：是否校验成功和未通过校验的字段。若不传入回调函数，则会返回一个 promise，

<script>
export function validUsername(str) {
  const valid_map = ['admin', 'editor']
  return valid_map.indexOf(str.trim()) >= 0
}

export default {
  name: 'Login',
  data() {
    const validateUsername = (rule, value, callback) => {
      if (!validUsername(value)) {
        callback(new Error('Please enter the correct user name'))
      } else {
        callback()
      }
    }
    const validatePassword = (rule, value, callback) => {
      if (value.length < 6) {
        callback(new Error('The password can not be less than 6 digits'))
      } else {
        callback()
      }
    }
    return {
      loginForm: {
        username: '',
        password: ''
      },
      loginRules: {
        username: [{ required: true, trigger: 'blur', validator: validateUsername }],
        password: [{ required: true, trigger: 'blur', validator: validatePassword }]
      },
      loading: false,
    }
  },

  methods: {
    handleLogin: function() {
      this.$refs.loginForm.validate(valid => {
        if (valid) {
          this.loading = true
          this.$router.push({ path: this.redirect || '/' })
          this.loading = false
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
  },
}

</script>

在上面的表单校验中，我们只是很简单的做了一个前端校验，只需要username为admin或editor，密码长度超过6为，就算通过。

参考资料：

https://www.cnblogs.com/lhjfly/p/10756650.html

https://element.eleme.cn/#/zh-CN/component/installation

https://www.cnblogs.com/jayjay798/p/11471220.html

https://www.cnblogs.com/liaochangqiang/p/11543675.html