ICode9

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

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

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

标签:拦截器 登录 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

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

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

ICode9版权所有