智慧商城项目--登录页静态布局和图形验证码功能（通用默认样式，axios封装，api接口模块）

登录页静态布局

我们可以在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！

接着在组件中导入后调用其请求方法即可