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部分 -->

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

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

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

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

<！-- script部分 -->

data() { // 页面的初始数据
    return {
      ruleForm: { // 存储用户输入数据
        user: '',
        passwd: '',
      },
      rules: { // 可添加一些表单规则

}
}
},

methods: {

    submitForm() {
      this.axios.post('url ‘, { ...this.ruleForm }).then(res => { // post请求，携带参数为展开运算符=user: '', passwd: '',
   if (res.code != 0) return false; // 后台根据前端传来的数据返回对应的状态码，0为成功，继续往下执行，非0即失败（-1为用户名或者密码错误，1为空）停止往下执行

this.$message({ // 提示成功信息
   type: 'success',
   message: '登录成功'
   })
        this.$router.push('/home/index') //成功跳转到首页
      })

}
}