1.项目演示

该项目是一个基础的 React 应用，功能简洁明了，涵盖了用户登录、退出以及数据的增删改查等操作，非常适合初学者学习。文章后面会给出完整的代码。

1.1 登录

1.2 后台首页

1.3 博客列表

1.4 新增编辑博客

1.5 删除博客

2.项目搭建

开发工具：Vscode

2.1 项目技术栈

  • React 脚手架： create-react-app
  • React Hooks
  • UI 组件库：antd
  • 网络请求：axios
  • 路由：react-router-dom
  • 状态管理：zustand

2.2 新建 React 项目

css
 代码解读
复制代码
npx create-react-app zhifou-react

然后使用 vscode 打开该项目

在控制台输入 npm start 运行项目

2.3 项目目录

1.在 src 文件夹下，我们先删除多余的文件，只保留 App.js、index.js、index.css。

2.删除 index.js 文件里面 React.StrictMode 标签 和 reportWebVitals() 函数。

3.在 src 文件夹下分别新建 api、assets、router、store、utils 文件夹

  • public: 公共文件，包含项目的入口 HTML 文件和图标。
  • src：源代码目录。
  • App.js: 根组件
  • index.css: 全局 CSS 样式文件
  • index.js: 应用的入口 JS 文件。
  • package.json: 项目的配置文件，定义项目的依赖关系、安装插件的版本
  • api：后端接口
  • assets：图片等静态资源
  • pages：存放 jsx 文件，也就是页面
  • router：路由配置
  • store: 状态管理
  • utils: 工具类

3.安装配置 Antd

Ant Design 官网：

css
 代码解读
复制代码
https://ant-design.antgroup.com/components/overview-cn/

安装 Antd

css
 代码解读
复制代码
npm install antd --save

4.安装配置路由

css
 代码解读
复制代码
npm install  react-router-dom

4.1 在 router 文件夹下新建 index.js

React.lazy 表示懒加载页面组件

4.2 在项目 index.js 里面配置路由

5.安装 zustand

css
 代码解读
复制代码
npm install zustand

在 store 文件夹下新建 useLoginStore.js

该 store 主要用来发起用户登录请求、存储 token 和 用户信息、用户退出登录操作。

token.js 主要用来处理本地缓存的 token 信息：

6.安装配置 axios

6.1 安装配置 axios

css
 代码解读
复制代码
npm i axios -- save

6.2 封装 http 请求

6.3 封装后台请求接口

7.用户登录

在 pages 文件夹下新建 Login.jsx 文件

因为有了 React Hooks 的加持，大部分人都习惯于使用函数组件开发页面。

登录页面主要用到了 Antd 的 Card、Button、Form、Input、Input 组件

其中 Form 组件的 onFinish 属性绑定登录事件：

onFinish 函数接收的参数就是你在 Form 表单输入的账号和密码

这里我们使用了 zustand 发起网络请求

在 zustand 里面请求正常就存储 token 和 用户信息，如果请求异常就抛出异常。

在 Login.jsx 里面，请求正常就跳转后台主页，否则捕获异常，弹出异常信息。

8.后台主页

在 home 文件夹下新建 index.jsx

后台主页主要用到了 Antd 的 Layout 组件

引入该组件后，需要单独设置样式，才能完全填充整个浏览器页面。

1.新建 index.css 文件

2.导入样式

8.1 收起菜单栏

collapsed 参数用来控制展开和收起菜单操作，这里我们使用 useState 存储 collapsed 的值。

js
 代码解读
复制代码
const [collapsed, setCollapsed] = useState(false);

useState 相当于 Vue 中的 data。

因为 React 中沒有 vue 的 v-if 等指令，所以这里使用三元操作符显示展开和收缩时左上角的样式。

8.2 菜单栏

菜单栏主要使用了 Antd 的 Menu 组件，defaultSelectedKeys 表示初始选中的菜单项，selectedKeys 表示当前选中的菜单项

其中 useLocation 的 pathname 表示当前路由的地址。

8.3 显示主要内容

这里使用 Outlet 标签渲染组件。

8.4 用户登录判断

我们都知道‌ React 中的 useEffect 是一个 Hook，可以在函数组件中处理副作用。依赖数组为空数组，组件只在首次渲染时执行一次。

这里在后台页面首次渲染时判断缓存中是否有用户信息，如果没有则跳转到登录页面。

注：在真实的项目中应该使用路由导航守卫管理路由权限，后续文章会详细讲解 React 的路由导航守卫，这里不再赘述。

9.博客列表

在 blog 文件夹下新建 index.jsx 文件。

博客列表页面主要使用了 Antd 的 Table 组件

9.1 搭建表结构

1.dataSource 绑定列表数据

js
 代码解读
复制代码
// 博客列表数据
const [blogList, setBlogList] = useState([]);
// 博客总数
const [total, setTotal] = useState(0);

2.columns 绑定表格列的配置描述。

js
 代码解读
复制代码
  // 表格参数的控制
  const columns = [
    {
      title: "序号",
      dataIndex: "id",
      width: 100,
      render: (_, record, index) => (index + 1).toString(),
    },
    {
      title: "标题",
      dataIndex: "title",
      key: "title",
    },
    {
      title: "创建时间",
      key: "createTime",
      render: (record) => moment(record.createTime).format("YYYY-MM-DD"),
    },
    {
      title: "操作",
      key: "action",
      render: (row) => (
        <span>
          <Button
            style={{
              backgroundColor: "orange",
              color: "white",
              marginRight: "5px",
            }}
            onClick={() => handleOpenUpdateModal(row)}
          >
            编辑
          Button>
        span>
      ),
    },
  ];

当然你也可以按照原来习惯的方式搭建表格框架，例如：

9.2 分页

  • current：当前页
  • pageSize：每页显示个数
  • total：总数
  • showSizeChanger：展示切换个数操作
  • showQuickJumper：展示跳转页码操作
  • showTotal：显示总数
  • onChange：绑定切换每页个数和跳转页码的事件

引入分页后默认显示英文，这里我们需要设置成中文：

主要就是使用 ConfigProvider 包裹 Table 组件

9.3 获取列表数据

我们在 useEffect 里面获取博客列表数据，当查询参数变化时，就执行查询列表操作

当切换每页显示个数或者跳转页码时，就改变查询参数的值：

js
 代码解读
复制代码
  // 切换每页页码、跳转页码
  const handlePaginationChange = (newPageNum, newPageSize) => {
    setParams({
      ...params,
      current: newPageNum,
      size: newPageSize,
    });
  };

10.新增和编辑博客

新增和编辑博客共用一个页面，这里主要用到了 Antd 的 Modal 对话框和 Form 组件。

js
 代码解读
复制代码
<Modal title={isUpdate ? "编辑博客" : "新增博客"}
        open={isModalOpen}
        onCancel={() => setIsModalOpen(false)}
        footer={[]}
      >
        <Form
          form={form}
          style={{ maxWidth: 400 }}
          initialValues={{ remember: true }}
          onFinish={handleAddUpdateBlog}
          autoComplete="off"
        >
          <Form.Item name="id" hidden>
            <Input />
          Form.Item>
          <Form.Item
            label="标题"
            name="title"
            rules={[{ required: true, message: "请输入标题" }]}
          >
            <Input placeholder="请输入标题" />
          Form.Item>
          <Form.Item
            label="类别"
            name="type"
            rules={[{ required: true, message: "请选择类别" }]}
          >
            <Radio.Group>
              <Radio value={"java"}> java Radio>
              <Radio value={"vue"}> vue Radio>
              <Radio value={"react"}> react Radio>
              <Radio value={"uniapp"}> uniapp Radio>
              <Radio value={"js"}> js Radio>
            Radio.Group>
          Form.Item>
          <Form.Item
            label="内容"
            name="content"
            rules={[{ required: true, message: "请输入内容" }]}
          >
            <TextArea
              placeholder="请输入内容"
              autoSize={{
                minRows: 4,
                maxRows: 6,
              }}
            />
          Form.Item>
          <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
            <Space>
              <Button type="primary" htmlType="submit">
                提交
              Button>
              <Button htmlType="submit" onClick={() => setIsModalOpen(false)}>
                取消
              Button>
            Space>
          Form.Item>
        Form>
      Modal>

其中对话框的 open 属性用来表示对话框是否可见，对话框的标题通过 isUpdate 属性动态显示。

css
 代码解读
复制代码
  // 判断是否更新
  const [isUpdate, setIsUpdate] = useState(false);
  // 模态框打开
  const [isModalOpen, setIsModalOpen] = useState(false);

10.1 新增按钮事件

js
 代码解读
复制代码
// 打开新增对话框
const handleOpenAddModal = () => {
  form.resetFields(); //每次打开新增窗口时都要清空数据
  setIsUpdate(false);
  setIsModalOpen(true);
};

10.2 编辑按钮事件

js
 代码解读
复制代码
  const handleOpenUpdateModal = (row) => {
    //将当前行的数据赋值给表单
    form.setFieldsValue(row);
    setIsUpdate(true);
    setIsModalOpen(true);
  };

10.3 调用后台接口

js
 代码解读
复制代码
  // 新增和编辑博客
  const handleAddUpdateBlog = async (blogForm) => {
    const { data } = await blogApi.saveBlog(blogForm);
    if (data.code == 200) {
      form.resetFields();
      setIsModalOpen(false);
      getBlogList();
    } else {
      message.error(data.message);
    }
  };

11.删除博客

删除博客主要用到了 Antd 的 Popover 组件

js
 代码解读
复制代码
 <Popover
  title="您确定要删除该博客吗？"
  content={
    <Button
      onClick={() => handleDeleteBlog(row.id)}
      type="primary"
      danger
    >
      确定
    Button>
  }
>
  <Button type="primary" danger>
    删除
  Button>
Popover>

调用后台删除接口：

js
 代码解读
复制代码
  // 删除博客
  const handleDeleteBlog = async (id) => {
    await blogApi.delBlog(id);
    message.success("删除成功");
    getBlogList();
  };

12.退出登录

后台主页右上角的用户信息主要用到了 Antd 的 Dropdown 组件

js
 代码解读
复制代码
  const [userInfo, setUserInfo] = useState(
    JSON.parse(localStorage.getItem("zhifou-user"))
  );

onClick 方法绑定退出登录事件：

js
 代码解读
复制代码
  const { userLogout } = useLoginStore();
  // 退出
  const onClick = ({ key }) => {
    userLogout();
    navigate("/login");
  };

13.完整代码

css
 代码解读
复制代码
https://gitee.com/zhifou-tech/zhifou-react

拿到代码之后

  • 1.npm install 安装依赖
  • 2.npm start 运行项目
  • 3.登录账号：zhifou、libai、houyi、liyuanfang、harmony
  • 4.登录密码：123456
注：本文转载自juejin.cn的知否技术的文章"https://juejin.cn/post/7444800867030237219"。版权归原作者所有，此博客不拥有其著作权，亦不承担相应法律责任。如有侵权，请联系我们删除。
复制链接
相关推荐
发表评论

评论记录：

未查询到任何数据！