微人事vhr 前端篇 -2 登录页面

只记录自己不熟的，不适合他人查阅！！！  css不会 目前不想学css

打开项目后,在控制台安装element-ui  命令 npm i element-ui -S

装好后在package.json文件中就有了 

然后在main.js中引入element-ui及其css

在路由中配置登录页的路由

开始在views文件夹下写登录页面Login.vue

 :model :rules :src 这种数据的绑定都写在 return中

data(){
    return{

    }
}

数据的非空验证  一定要使用  :rules

注意要校验的userName ，password ，code  是元素中prop的属性   这里最好取名和 loginForm中的同名  因为后期接口调用时，处理数据就不用再转换了

 

调用接口  使用axios

安装axios   命令  npm install axios  成功后

 

配置拦截器

响应拦截器  与  请求拦截器  

utils /  app.js  注意 url 中的内容是 `` 引起来的而不是 单引号

 

使用nodejs实现跨域请求  这样做是为了简单

在项目的根目录下创建  vue.config.js 

 

获取验证码  

username 不能写成userName 与后端要统一 涉及到spring security

登录

utils / api.js 中写请求拦截器 封装 get/post/put/delete 请求

main.js 中引入封装的get/post/put/delete 请求 以便各单页面组件能够直接使用，不用再页面中引入

login.vue 的submitLogin函数进行登录  this.$router.replace 的页面没有返回  this.$router.push 的页面有返回

这里有个loading动画的加载