vue实战——登录页面

一、入口文件main.js配置

（入口文件就是项目或系统被访问时第一个访问到的文件，所有的指令功能都是从这个文件分发出去，再找相对应的模块进行处理，初始化vue实例、编写全局方法、使用插件等）

  axios.interceptors.response.use(res => { // 请求拦截器，在发送请求或者响应请求之前做的一些操作或判断，此处为请求响应拦截器
     if (res.data.code == 0) { // 如果后台响应的状态码为0，当后台收到正确的用户信息，正确的用户名和密码就会返回状态码0，此时进行数据渲染
         return res.data
     } else if (res.data.code == 1) {/ /如果返回的状态码为1，意味着后端没有收到正确的登录信息，客户如果绕过登录页面，则强制返回到登录页面。
         router.push(‘/login‘)
     } else { // 网络异常状况
         Message({
            type: ‘error‘,
            message: res.data.msg || ‘网络异常，请重试。‘
         })
      }
    }, error => { // 请求出错时提示错误信息
       return Promise.reject(error)
  })

二、路由部分router.js

路由是一个项目的灵魂，每个组件都有对应的路由，根据不同的路由地址，展示不同的内容给用户。

routes: [{
      path: ‘/‘,
      redirect: ‘/home/login‘　// 路由重定向，当用户访问根路径时，重新跳转到home下的login组件　
   }，

   {
      path: ‘/login‘,
      name: ‘login‘,
      import(  ‘./views/Login.vue‘) // 定义login组件的路由
    }
 }]

三、组件部分login.vue

这里为最简单的登陆页面，没有注册部分，账号为后台生成

<！-- html部分 -->

<template>
  <div class="loginbody">
      <el-form v-model="ruleForm"  status-icon  :rules="rules"> 
        <!-- 用户名 -->
        <el-form-item>
          <el-input v-model="ruleForm.user" prefix-icon="el-icon-user" placeholder="用户名" autocomplete="off"></el-input>
        </el-form-item>
        <!-- 密码 -->
        <el-form-item label="">
          <el-input type="password" v-model="ruleForm.passwd" prefix-icon="el-icon-lock" placeholder="密码" autocomplete="off"></el-input>
        </el-form-item>
        <!-- 登录按钮 -->
        <el-form-item>
          <el-button type="primary" @click.enter="submitForm()" >登&nbsp;录</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

注释：1、使用的element表单组件

           2、v-model="ruleForm" 数据的双向绑定，试图上的数据与data里的数据保持一致

           3、autocomplete h5新增表单属性，自动完成功能，输入框会记录输入习惯，根据记忆迅速完成输入全部内容，off闭，on开启

           4、@click.enter：绑定个click事件，添加enter修饰符，用户点击按钮或按enter键时都可以触发事件

<！-- script部分 -->

原文：https://www.cnblogs.com/shidingzhang/p/11610533.html