极客园PC-第2章 登录
项目功能 - 登录
功能如下：
- 搭建登录页面结构
- 登录表单校验
- 登录逻辑
- 封装处理 token、axios 的工具函数
- 登录访问控制
基本结构
- Card组件的使用
import { Card } from 'antd'
class Login extends Component {
render() {
return (
<div className="login">
<Card className="login-container">
<p>Card content</p>
<p>Card content</p>
<p>Card content</p>
</Card>
</div>
)
}
}
- 准备样式
src/pages/Login/index.css
.login {
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
background-image: url(../../assets/login.png);
}
.login-container {
width: 440px;
height: 360px;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
- 准备logo
+ import logo from '../../assets/logo.png'
class Login extends Component {
render() {
return (
<div className="login">
<Card className="login-container">
+ <img className="login-logo" src={logo} alt="" />
</Card>
</div>
)
}
}
- 准备logo的样式
.login-logo {
width: 200px;
height: 60px;
display: block;
margin: 0 auto 20px;
}
绝对路径的使用
- 官网文档：https://facebook.github.io/create-react-app/docs/importing-a-component#absolute-imports
- 在根目录新建
jsconfig.json文件 - 配置以下内容
{
"compilerOptions": {
"baseUrl": "src"
},
"include": ["src"]
}
- 使用绝对路径
import logo from 'assets/logo.png'
相当于
'src/assets/logo.png'
重启项目
sass的使用
在react脚手架中已经有了sass的配置，因此只需要安装sass的依赖包，就可以直接使用sass了
- 安装sass依赖包
yarn add sass -D
- 把
index.css改成index.scss - 导入
index.scss文件
注意：如果使用了scss，scss中使用图片的绝对路径的时候需要加上~
background-image: url(~assets/login.png);
登录表单的使用
根据antd的表单组件进行修改https://ant.design/components/form-cn/#API
class Login extends Component {
render() {
return (
<div className="login">
<Card className="login-container">
<img className="login-logo" src={logo} alt="" />
{/* 表单 */}
<Form name="basic">
<Form.Item name="username">
<Input placeholder="请输入手机号" />
</Form.Item>
<Form.Item name="password">
<Input placeholder="请输入验证码" />
</Form.Item>
<Form.Item name="remember" valuePropName="checked">
<Checkbox>我已阅读并同意[用户协议]和[隐私条款]</Checkbox>
</Form.Item>
<Form.Item>
<Button type="primary" htmlType="submit" block>
登录
</Button>
</Form.Item>
</Form>
</Card>
</div>
)
}
}
- 调整表单控件的大小
<Form name="basic" size="large">
- 设置选中后的样式
.ant-checkbox-wrapper-checked span {
color: #1890ff;
}
登录表单校验
<Form.Item
name="username"
rules={[
{
pattern: /^1[3-9]\d{9}$/,
message: '手机号码格式不对',
},
{ required: true, message: '请输入手机号' },
]}
>
<Input placeholder="请输入手机号" />
</Form.Item>
<Form.Item
name="password"
rules={[
{
pattern: /^\d{6}$/,
message: '验证码格式不对',
},
{ required: true, message: '请输入验证码' },
]}
>
<Input placeholder="请输入验证码" />
</Form.Item>
<Form.Item
name="remember"
valuePropName="checked"
rules={[{ required: true, message: '请阅读协议' }]}
>
<Checkbox>我已阅读并同意[用户协议]和[隐私条款]</Checkbox>
</Form.Item>
收集表单数据
- 给表单注册事件
<Form
size="large"
validateTrigger={['onChange', 'onBlur']}
onFinish={this.onFinish}
>
- 提供事件处理函数
onFinish = (values) => {
console.log(values)
}
- 修改name属性
<Form.Item
+ name="mobile"
rules={[
{
pattern: /^1[3-9]\d{9}$/,
message: '手机号码格式不对',
},
{ required: true, message: '请输入手机号' },
]}
>
<Input placeholder="请输入手机号" />
</Form.Item>
<Form.Item
+ name="code"
rules={[
{
pattern: /^\d{6}$/,
message: '验证码格式不对',
},
{ required: true, message: '请输入验证码' },
]}
>
<Input placeholder="请输入验证码" />
</Form.Item>
<Form.Item
+ name="agree"
valuePropName="checked"
rules={[{ required: true, message: '请阅读协议' }]}
>
<Checkbox>我已阅读并同意[用户协议]和[隐私条款]</Checkbox>
</Form.Item>
设置 默认值
<Form
name="basic"
size="large"
onFinish={this.login}
initialValues={{
agree: true,
mobile: '13811111111',
code: '246810',
}}
>
封装axios 的工具函数
- 安装axios
yarn add axios
- 新建文件
utils/request.js
import axios from 'axios'
const instance = axios.create({
baseURL: 'http://geek.itheima.net/',
timeout: 5000,
})
// 请求拦截器
instance.interceptors.request.use(
function (config) {
return config
},
function (error) {
return Promise.reject(error)
}
)
// 响应拦截器
instance.interceptors.response.use(
function (response) {
return response.data
},
function (error) {
return Promise.reject(error)
}
)
export default instance
- 测试
api封装
- 新建文件
src/api/user.js
import request from 'utils/request'
/**
* 登录请求，用于用户登录
* @param {string} mobile 手机号
* @param {string} code 验证码
* @returns Promise
*/
export const login = (mobile, code) => {
return request({
method: 'POST',
url: '/authorizations',
data: {
mobile,
code,
},
})
}
- 发送请求进行登录
submit = async (values) => {
const { mobile, code } = values
try {
const res = await login(mobile, code)
// 存储token
localStorage.setItem('itcast_geek_pc', res.data.token)
// 跳转到首页
this.props.history.push('/home')
alert('登录成功')
} catch (err) {
alert(err.response.data.message)
}
}
消息提示组件的使用
submit = async (values) => {
const { mobile, code } = values
try {
const res = await login(mobile, code)
// 存储token
localStorage.setItem('itcast_geek_pc', res.data.token)
// 跳转到首页
this.props.history.push('/home')
message.success('登录成功')
} catch (err) {
message.warning(err.response.data.message, 1)
}
}
