登录页静态布局
在src目录下新建 styles，主要用于 存放公共样式。在该文件夹下新建common.less文件，并将其在main.js中引入
将图片拷贝到src文件夹下的 assets文件夹下
完成静态布局
点击左箭头能返回到首页
所有组件头部返回左箭头颜色都是一样的，可以定义为通用样式
<!-- 登录页 -->
<template>
<div class="login">
<van-nav-bar title="会员登录" left-arrow @click-left="$router.go(-1)" />
<div class="container">
<div class="title">
<h3>手机号登录</h3>
<p>未注册的手机号登录后将自动注册</p>
</div>
<div class="form">
<div class="form-item">
<input class="inp" maxlength="11" placeholder="请输入手机号码" type="text">
</div>
<div class="form-item">
<input class="inp" maxlength="5" placeholder="请输入图形验证码" type="text">
<img src="@/assets/code.png" alt="">
</div>
<div class="form-item">
<input class="inp" placeholder="请输入短信验证码" type="text">
<button>获取验证码</button>
</div>
</div>
<div class="login-btn">登录</div>
</div>
</div>
</template>
<script>
export default {
name: 'LoginPage'
}
</script>
<style lang="less" scoped>
.container {
padding: 49px 29px;
.title {
margin-bottom: 20px;
h3 {
font-size: 26px;
font-weight: normal;
}
p {
line-height: 40px;
font-size: 14px;
color: #b8b8b8;
}
}
.form-item {
border-bottom: 1px solid #f3f1f2;
padding: 8px;
margin-bottom: 14px;
display: flex;
align-items: center;
.inp {
display: block;
border: none;
outline: none;
height: 32px;
font-size: 14px;
flex: 1;
}
img {
width: 94px;
height: 31px;
}
button {
height: 31px;
border: none;
font-size: 13px;
color: #cea26a;
background-color: transparent;
padding-right: 9px;
}
}
.login-btn {
width: 100%;
height: 42px;
margin-top: 39px;
background: linear-gradient(90deg,#ecb53c,#ff9211);
color: #fff;
border-radius: 39px;
box-shadow: 0 10px 20px 0 rgba(0,0,0,.1);
letter-spacing: 2px;
display: flex;
justify-content: center;
align-items: center;
}
}
</style>
request模块 - axios封装
备用接口：欢迎使用 - B站-AJAX和黑马头条-数据管理平台
安装axios时，显示eslint与axios依赖冲突。现在将eslint版本在 package.json中修改保存，然后在powershell进入项目根目录将 node_modules目录和 package-lock.json文件全部删除，然后重新安装所有依赖
现在安装axios ~完美
在utils文件夹下新建request模块，在里边发请求。复制axios创建实例代码到request中，创建实例的好处是发送请求互不影响。
配置响应/请求/拦截器
拦截器是加在了原始的axios实例上，但是因为我们就是不希望污染原始axios实例才创建了axios实例，所以这里将加在原始实例上的配置给加到创建的axios实例上
修改后
将基地址这些进行修改，删除headers,加data，导出创建好的实例
登陆页请求数据 -- 请求图形验证码
图形验证码 功能
控制台打印出来的请求数据
在短信验证码的请求中是需要key的，所以图形验证码请求出数据后也一并将key保留下来
将请求部分封装为一个方法在created中调用即可
将请求回来的结果解构出来data中的 base64 和 key ,并且分别存储到picCode和picUrl中，然后在模板中进行渲染
v-model绑定用户输入，将来用于输入提交，比较用户输入和接口给的图形数据比较，看用户输入是否正确
总结
<!-- 登录页 -->
<template>
<div class="login">
<van-nav-bar title="会员登录" left-arrow @click-left="$router.go(-1)" />
<div class="container">
<div class="title">
<h3>手机号登录</h3>
<p>未注册的手机号登录后将自动注册</p>
</div>
<div class="form">
<div class="form-item">
<input v-model="picCode" class="inp" maxlength="11" placeholder="请输入手机号码" type="text">
</div>
<div class="form-item">
<input class="inp" maxlength="5" placeholder="请输入图形验证码" type="text">
<img v-if="picUrl" :src="picUrl" @click="getPicCode" alt="">
<!-- v-if当picURL有的时候才渲染图片 -->
<!-- 每次点击重新去调用一下发送请求 -->
</div>
<div class="form-item">
<input class="inp" placeholder="请输入短信验证码" type="text">
<button>获取验证码</button>
</div>
</div>
<div class="login-btn">登录</div>
</div>
</div>
</template>
<script>
import request from '@/utils/request'
export default {
name: 'LoginPage',
data () {
return {
picCode: '', // 用户输入的图形验证码
picKey: '', // 将来请求传递的图形验证码唯一标识
picUrl: ''// 存储请求渲染的图片地址
}
},
async created () {
this.getPicCode() // 将发请求的部分封装为一个方法
},
methods: {
// 获取图形验证码
async getPicCode () {
const { data: { base64, key } } = await request.get('/captcha/image')
this.picUrl = base64 // 存储地址
this.picKey = key // 存储唯一标识
}
}
}
</script>
<style lang="less" scoped>
.container {
padding: 49px 29px;
.title {
margin-bottom: 20px;
h3 {
// 字号大小
font-size: 26px;
// 字体粗细
font-weight: normal;
}
p {
line-height: 40px;
font-size: 14px;
color: #b8b8b8;
}
}
.form-item {
border-bottom: 1px solid #f3f1f2;
padding: 8px;
margin-bottom: 14px;
// 将元素设置为弹性布局
display: flex;
// 在弹性布局中，当一个元素被设置为 display: flex; 成为弹性容器后，其内部的直接子元素即弹性项目。
// align-items: center; 会使这些弹性项目在交叉轴上居中对齐
align-items: center;
.inp {
display: block;
border: none;
// 去除元素在获得焦点时默认显示的轮廓线
outline: none;
height: 32px;
font-size: 14px;
flex: 1;
}
img {
width: 94px;
height: 31px;
}
button {
height: 31px;
border: none;
font-size: 13px;
color: #cea26a;
background-color: transparent;
padding-right: 9px;
}
}
.login-btn {
width: 100%;
height: 42px;
margin-top: 39px;
background: linear-gradient(90deg,#ecb53c,#ff9211);
color: #fff;
border-radius: 39px;
box-shadow: 0 10px 20px 0 rgba(0,0,0,.1);
letter-spacing: 2px;
display: flex;
// 当一个元素被设置为 display: flex; 成为弹性容器后，其内部的直接子元素即弹性项目
// justify-content: center; 会使这些弹性项目在主轴上居中对齐
justify-content: center;
align-items: center;
}
}
</style>
