网硕互联帮助中心今天你喝水了嘛（读到这句话的人要记得多喝水哦~）
电商后台管理
零、前言
今天是我们开始正式搭建项目的第一天，不过在此之前我们要解决提下遗留问题（😓）
1.关于@别名路径没办法自动补全问题：
我们要在项目根目录下加入一个名叫jsconfig.json的文件，内容如下：
{
"compilerOptions": {
"baseUrl": "./",
"paths": {
"@/*":[
"src/*"
]
}
}
}
保存之后再写@的时候就会自动列出目录列表啦
2.关于redux内的user.js里面的name字段缺失问题：
要在配置的user里面加一个name字段才可以识别不同的仓库哦，所以我们加一下就可以了
好的历史问题解决完啦，我们来正式开展以下我们今天的登录页面搭建把吧！（有问题的话我会在评论区或者下一P中集中改正的）
一、准备工作
1.ant design组件库安装
“要想造车，首先要造轮子~”这里蕴含着我们编程的一个基本思想：组件式开发！将一个大项目拆分成一个个组件，既确保了单一职责，又提高了复用效率！那组件怎么写呢~别急，早就有人给我们准备好喽。下面我们来安装一下最近很流行的ant design组件库把！
# npm
npm install @ant-design/cssinjs –save
# yarn
yarn add @ant-design/cssinjs
在命令行输入这二者之一即可，完成下载！
那怎么使用呢，让我们来看文档（大家要养成看文档的好习惯呦）
打开官网，点击开始使用
可以看到里面有好多的组件，每一个组件要使用的化只需导入对应包，然后再js里面需要的地方使用即可，下面还有很多代码演示，直接给出了使用例子，快去试试吧
2.下载scss包
SCSS 是 CSS 的超集，所有标准的 CSS 代码在 SCSS 文件中都能直接运行，但 SCSS 增加了大量 CSS 不具备的编程式特性。我们采用scss来编写样式。
npm i sass -D
这样我们的准备工作就都做好了，开始正式的页面搭建吧！
二、登录页面
1.静态页面部分
首先我们简单的设计一下登陆页面的样式，在Login文件夹中创建index.js和index.scss两个文件,
接下来就可以设计属于自己的页面喽，我这里把我的页面贴出来供大家参考一下，资源的话我会整理好传到我的gitcode上
index.js:
import React from "react";
import { Form, Input, Button, Typography, Space, Checkbox, Divider } from "antd";
import { UserOutlined, LockOutlined } from "@ant-design/icons";
import "./index.scss";
import bg from "@/assets/Login/login-bg.png";
const { Title, Text, Link } = Typography;
const Login = () => {
return (
<div className="login-page">
{/* ✅ 背景图层 */}
<div className="login-bg" style={{ backgroundImage: `url(${bg})` }} />
{/* ✅ 整体背景虚化层（只糊背景，不糊内容） */}
<div className="login-blur" />
{/* ✅ 轻微遮罩层（更有层次） */}
<div className="login-mask" />
{/* ✅ 内容层 */}
<div className="login-wrapper">
{/* 左侧宣传 */}
<div className="left-box">
<Title level={2} className="brand-title">
Shopping Admin
</Title>
<Text className="brand-subtitle">欢迎来到购物后台管理系统</Text>
<div className="brand-points">
<div>✔ 商品智能管理</div>
<div>✔ 实时订单监控</div>
<div>✔ 精准数据分析</div>
</div>
</div>
{/* 右侧登录 */}
<div className="right-box">
<Title level={4} className="login-title">
您好！欢迎登录后台平台
</Title>
<Form layout="vertical">
<Form.Item label="用户名">
<Input prefix={<UserOutlined />} placeholder="请输入用户名" />
</Form.Item>
<Form.Item label="密码">
<Input.Password prefix={<LockOutlined />} placeholder="请输入密码" />
</Form.Item>
<div className="extra">
<Space>
<Checkbox>记住我</Checkbox>
</Space>
<Link>忘记密码？</Link>
</div>
<Button type="primary" block className="login-btn">
登录
</Button>
<Divider plain>其他</Divider>
<div className="login-footer">
<Text type="secondary">
没有账号？ <Link>去注册</Link>
</Text>
</div>
</Form>
</div>
</div>
</div>
);
};
export default Login;
index.scss:
.login-page {
width: 100vw;
height: 100vh;
position: relative;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
}
/* 背景图层：全屏 */
.login-bg {
position: fixed;
inset: 0;
z-index: 0;
background-position: center;
background-size: cover;
background-repeat: no-repeat;
}
/* ✅ 整体背景轻微虚化 */
.login-blur {
position: fixed;
inset: 0;
z-index: 1;
backdrop-filter: blur(6px); /* 调整：4~8都行 */
-webkit-backdrop-filter: blur(6px);
}
/* 轻微暗遮罩，增强对比度 */
.login-mask {
position: fixed;
inset: 0;
z-index: 2;
background: rgba(0, 0, 0, 0.12);
}
/* 内容层 */
.login-wrapper {
position: relative;
z-index: 3;
width: 1000px;
height: 480px;
display: flex;
border-radius: 10px;
overflow: hidden;
box-shadow: 0 20px 50px rgba(0, 0, 0, 0.25);
background: rgba(255, 255, 255, 0.95);
}
/* 左侧宣传 */
.left-box {
flex: 1;
padding: 60px 50px;
display: flex;
flex-direction: column;
justify-content: center;
background: linear-gradient(135deg, #4a3eb1, #2b2f9b);
color: #fff;
}
.brand-title {
color: #fff !important;
margin-bottom: 16px !important;
}
.brand-subtitle {
color: rgba(255, 255, 255, 0.85);
margin-bottom: 24px;
display: block;
}
.brand-points div {
margin-bottom: 10px;
font-size: 14px;
opacity: 0.95;
}
/* 右侧登录 */
.right-box {
width: 520px;
padding: 60px 50px;
}
.login-title {
text-align: center;
margin-bottom: 24px !important;
}
.extra {
display: flex;
justify-content: space-between;
margin-bottom: 16px;
}
.login-btn {
height: 42px;
border-radius: 6px;
}
.login-footer {
text-align: left;
}
/* 响应式 */
@media (max-width: 900px) {
.login-wrapper {
flex-direction: column;
width: 92%;
height: auto;
}
.left-box {
display: none;
}
.right-box {
width: 100%;
padding: 40px 30px;
}
}
效果大概是这样的：
大家也可以动手搭建一下试试，搭建了之后别忘了npm start和/login哦
静态页面搭建完了，接下来要开始实现业务逻辑
2.业务逻辑部分
首先，我们先到我们的util的request里面完善一下baseURL
接下来，我们再api里面新建一个user.js文件，用来存储用户信息有关的API接口。API文档如下：必须先读 – 黑马前端。
在user.js里面封装loginAPI
import { request } from "@/utils";
export const loginAPI=(formData)=>{
return request({
url:'/login',
method:'POST',
data:formData
})
}
再回到我们store目录下的user.js，导入我们的loginAPI，并配置一个异步获取登录信息的fetchLogin函数，新增代码如下：
import { loginAPI } from "@/apis/user";
const fetchLogin = (loginForm)=>{
return async (dispatch)=>{
const res = await loginAPI(loginForm)
console.log(res)
}
}
最后我们再到Login的index.js中给Form绑定的一个onFinsh函数，这个函数自带一个参数，可以获得表单组件里的所有值。
可以看到，传过去的参数对象包括两个值，username和password，那么我们去Form.Item里面加上name字段和rule字段（保证非空）
代码如下：
<Form layout="vertical" onFinish={onFinish}>
<Form.Item label="用户名"
name="username"
rules={[{ required: true, message: "请输入用户名" }]
}
>
<Input prefix={<UserOutlined />} placeholder="请输入用户名" />
</Form.Item>
<Form.Item label="密码"
name="password"
rules={[{ required: true, message: "请输入密码" }]}>
<Input.Password prefix={<LockOutlined />} placeholder="请输入密码" />
</Form.Item>
重新运行一下
可以看到规则生效了。
将登录按钮改为提交按钮，尝试输出一下用户信息
<Button type="primary" block className="login-btn" htmlType="submit">
登录
</Button>
可以发现已经成功地拿到我们的表单信息了，有了数据，接下来就是调用fetchAPI了。
但是，很不幸的是，接口似乎挂了，（QAQ）
调了半天，怀疑人生了QAQ。
没关系，让我们换一个项目的后端接口就好了，我们的工作也没有也白费哦。
今天先写到这里吧
评论前必须登录！
注册