ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

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

2021-05-03 14:33:09  阅读:20  来源: 互联网

标签:拦截器 登录 vue js axios vhr 页面


只记录自己不熟的,不适合他人查阅!!!  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  成功后

 

配置拦截器

响应拦截器  与  请求拦截器  

view /  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动画的加载

 

 

 

 

 

 

标签:拦截器,登录,vue,js,axios,vhr,页面
来源: https://blog.csdn.net/ale1129809478/article/details/116331023

专注分享技术,共同学习,共同进步。侵权联系[admin#icode9.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有