登录页静态布局
我们可以在src/style下放一些通用的默认样式
//less
// 重置默认样式
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
// 文字溢出省略号
.text-ellipsis-2 {
overflow: hidden;
-webkit-line-clamp: 2;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-box-orient: vertical;
}
// 添加导航的通用样式
.van-nav-bar {
.van-nav-bar__arrow {
color: #333;
}
}
然后在main.js导入
最后一个的添加导航的通用样式,因为我们要确保页面颜色统一,在其他页面的箭头是同个颜色,还是在通用css中修改,利用浏览器获取属性名
1)首先,我们先设置通用样式
2)写静态页面,利用vant组件
记得导入
利用$router.go(-1)放回 或者$router.back()
图形验证码功能
做这个前我们要先明确需要做什么
1.我们要从后端接口中请求获得图片的url和对应的key值
2.然后将图片渲染到图形验证码的地方
axios封装
我们在utils下新建一个request.js文件,将axios请求方法封装到request模块
1.在request.js下先创建实例,实例在axios官网中有Axios 实例 | Axios中文文档 | Axios中文网
2.接着配置拦截器,拦截器 | Axios中文文档 | Axios中文网
注意我们创建的实例是instance,所以后面的拦截器也要将axios改为instance
然后要修改接口的基地址和在请求回的数据去掉一层(.data)
请求头要去掉,否则会报错,大概是因为浏览器跨域问题
最后一定要记得导出!
接下来在组件中导入request,调用图形验证码接口,并且在created钩子函数中调用即可
data下的就是我们需要的数据
获取到的data下的base64就是url地址,key则是后期做验证用的,我们接下来需要做的
1.先把url动态渲染到图形验证码处
2.给图形验证码出添加一个点击事件,点击就能更换验证码
第一点很好完成,声明变量用于接收,然后利用封装的request访问接口获取数据即可
但是最好还是做一个api接口模块,下面笔记有
可以学习的是getPicCode方法中的声明方法
const { data: { base64, key } } 后面直接赋值过去就可以了,不用访问太多层
第二点往组件上创建事件,点击时候调用一次getPicCode方法即可
要注意的是当数据还没有访问到的时候,图片无法正常显示,所以我们要添加一个v-if 有数据了再渲染
api接口模块
创建了api接口模块后,以后页面需要访问到接口,导入后直接使用该接口的方法即可
src下新建一个api文档存放所需的请求函数
login.js表示存放所有于登录有关的请求函数,要记得export和return!
接着在组件中导入后调用其请求方法即可