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

论坛 期权论坛 编程之家     
选择匿名的用户   2021-6-2 17:35   2023   0

只记录自己不熟的,不适合他人查阅!!! 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动画的加载

分享到 :
0 人收藏
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

积分:3875789
帖子:775174
精华:0
期权论坛 期权论坛
发布
内容

下载期权论坛手机APP