页面布局
登录页面主体是表单,使用Element的Form表单就可以了
- 由于使用了ESLint,所以拷贝下来的代码在各种方面都需要注意分号和函数后面的空格等等小细节
- 给密码的
<el-input>
设置`type="password"
<template>
<div class="login">
<template>
<div class="login">
<!-- Form 组件 -->
<el-form ref="form" :model="form" label-width="80px">
<el-form-item label="手机号">
<el-input v-model="form.name"></el-input>
</el-form-item>
<el-form-item label="密码">
<el-input type="password" v-model="form.name"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="onSubmit">立即创建</el-button>
</el-form-item>
</el-form>
</div>
</template>
</div>
</template>
<script>
export default {
name: 'LoginIndex',
data () {
return {
form: {
name: ''
}
}
},
methods: {
onSubmit () {
console.log('submit!')
}
}
}
</script>
<style lang="scss" scoped></style>
通过设置 label-position
属性可以改变表单域标签的位置,可选值为 top
、left
,当设为 top
时标签会置于表单域的顶部
将表单域标签(label)的对齐方式设置为顶部对齐
<el-form
label-position="top"
ref="form"
:model="form"
label-width="80px">
</el-form>
样式细节处理:
<style lang="scss" scoped>
.login {
height: 100vh;
display: flex;
// 垂直水平居中
justify-content: center;
align-items: center;
.el-form {
background-color: #fff;
padding: 20px;
width: 300px;
border-radius: 10px;
.el-button {
width: 100%;
}
}
}
</style>
功能分析
- 数据绑定
- 表单验证
- 请求登录
- 请求结果处理(响应处理)
- 成功
- 失败
接口测试
登录接口:地址
测试方式1
通过接口文档自带提供的测试功能测试
登陆成功:
登录失败:
测试方式2
使用Postman接口测试工具
下载地址:https://www.postman.com/downloads/
使用方法:
然后填上该接口所需要的数据即可
登录成功:
登录失败:
在书写功能的时候,如果需要经常操作某些接口,可以在Postman中创建集合,保存接口信息便于测试。
新建集合的方式如下:
以后需要的时候就可以点击左侧列表中的某个接口进行测试就可以啦
如果测试的接口都是具有相同的基地址,可以给集合设置变量,简化书写
更新完之后记得保存哦