第四章，登录注册

目录

4.1 添加注册页面

4.2 注册表单验证

4.3提交注册信息

4.4 完善注册功能

4.5 完善登录功能

4.6 推出用户登录

4.7 用户登录界面

4.8 小结

---

4.1 添加注册页面

2、查找

src/components/layouts/TheHeader.vue

  

    

      {
  { item }}
    
  

  
  

    
  

 

> cd ~/Code/vuejs-essential
> npm install vue-router --save

 

import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

const routes = [
  {
    path: '/auth/register',
    name: 'Register',
    component: () => import('@/views/auth/Register')
  }
]

const router = new Router({
  mode: 'history',
  routes
})

export default router

在引入 vue-router 后，我们需要使用 Vue.use 来使用插件：

Vue.use(Router)

component: () => import('@/views/auth/Register')

component: () => import('@/views/auth/Register')

import Register from '@/views/auth/Register'

const routes = [
  {
    path: '/auth/register',
    name: 'Register',
    component: Register
  }
]

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

Vue.config.productionTip = false

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

我们先引入路由配置：

// 如果引入的是 index.js，可以使用下面的简写，等价于 import router from './router/index.js'
import router from './router'

然后在当前实例中注入路由：

new Vue({
  router
})

 

   注 册



   注 册

组件支持用户在具有路由功能的应用中导航，通过 上的 to 属性可以指定目标地址，这里是一个字符串 /auth/register，对应路由配置中的 path。
现在的页面效果如下：

 从上面的演示可以看到，当切换回首页时页面重新加载了，我们需要打开 TheHeader.vue 文件，将 Logo 链接用 替换：
src/components/layouts/TheHeader.vue

  {
  { logo.title }}
  



  {
  { logo.title }}
  

 

4.2 注册表单验证

function validate(el, modifiers, bindingValue) {
  bindingValue = bindingValue && typeof bindingValue === 'object' ? bindingValue : {}
  const value = typeof el.value === 'string' ? el.value.trim() : ''
  const { title = '该项', error } = bindingValue
  let defaultError = ''

  if (modifiers.required && value === '') {
    defaultError = `${title}不能为空`
  } else if (bindingValue.target) {
    const target = document.querySelector(bindingValue.target)
    const targetValue = target ? target.value : null

    if (targetValue !== value) {
      defaultError = `输入的${title}不匹配`
    }
  } else if (bindingValue.regex) {
    try {
      if (!bindingValue.regex.test(value)) {
        defaultError = `${title}格式不正确`
      }
    } catch (e) {}
  }

  if (defaultError) {
    if (error === undefined) {
      showError(el, defaultError)
    } else {
      showError(el, error)
    }
  } else {
    showError(el)
  }
}

function showError(el, error) {
  const parentElement = el.parentElement
  const errorElement = getErrorElement(el)

  if (error === undefined) {
    errorElement.style.display = 'none'
    parentElement.classList.remove('has-error')
  } else {
    errorElement.textContent = error
    errorElement.style.display = 'block'
    parentElement.classList.add('has-error')
  }
}

function getErrorElement(el) {
  const parentElement = el.parentElement
  let errorElement = parentElement.querySelector('.help-block')

  if (!errorElement) {
    const tpl = ``
    const fragment = document.createRange().createContextualFragment(tpl)

    parentElement.appendChild(fragment)
    errorElement = parentElement.querySelector('.help-block')
  }

  return errorElement
}

export default {
  bind(el, binding, vnode) {
    const { value, arg, modifiers } = binding
    const eventType = ['change', 'blur', '