zdpreact_antdesginpro 继续优化Ant Design开发的后台管理系统

news2024/11/19 16:31:54

登录后台管理系统

首先，将项目跑起来：
在这里插入图片描述

浏览器访问：http://localhost:8000/user/login

通过上次的优化，我们已经能够使用自己的账号密码进行登录了：
在这里插入图片描述

底部优化

登录后台以后，目前的底部是长这样的：
在这里插入图片描述

在源码中的代码是这样的：

import {GithubOutlined} from '@ant-design/icons';
import {DefaultFooter} from '@ant-design/pro-components';
import React from 'react';

const Footer: React.FC = () => {
  return (
    <DefaultFooter
      style={{
        background: 'none',
      }}
      links={[
        {
          key: 'Ant Design Pro',
          title: 'Ant Design Pro',
          href: 'https://pro.ant.design',
          blankTarget: true,
        },
        {
          key: 'github',
          title: <GithubOutlined/>,
          href: 'https://github.com/ant-design/ant-design-pro',
          blankTarget: true,
        },
        {
          key: 'Ant Design',
          title: 'Ant Design',
          href: 'https://ant.design',
          blankTarget: true,
        },
      ]}
    />
  );
};

export default Footer;

这里我决定改为如下内容：

import {GithubOutlined} from '@ant-design/icons';
import {DefaultFooter} from '@ant-design/pro-components';
import React from 'react';

const Footer: React.FC = () => {
  return (
    <DefaultFooter
      style={{
        background: 'none',
      }}
      links={[
        {
          key: 'Python私教',
          title: 'Python私教',
          href: 'https://github.com/zhangdapeng520',
          blankTarget: true,
        },
        {
          key: 'github',
          title: <GithubOutlined/>,
          href: 'https://github.com/zhangdapeng520',
          blankTarget: true,
        },
        {
          key: '张大鹏',
          title: '张大鹏',
          href: 'https://github.com/zhangdapeng520',
          blankTarget: true,
        },
      ]}
    />
  );
};

export default Footer;

此时，底部就变成了如下样子：
在这里插入图片描述

移除不必要的依赖

目前项目中需要的东西比较多：
在这里插入图片描述

我个人是不太喜欢eslint的，所以决定将其去掉。

经过一番简单的操作以后，东西减少了很多：
在这里插入图片描述

package.json变成了下面的样子：

{
  "name": "ant-design-pro",
  "version": "6.0.0",
  "private": true,
  "scripts": {
    "build": "max build",
    "start": "cross-env UMI_ENV=dev max dev"
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not ie <= 10"
  ],
  "dependencies": {
    "@ant-design/icons": "^4.8.1",
    "@ant-design/pro-components": "^2.6.48",
    "@umijs/route-utils": "^2.2.2",
    "antd": "^5.13.2",
    "antd-style": "^3.6.1",
    "classnames": "^2.5.1",
    "omit.js": "^2.0.2",
    "querystring": "^0.2.1",
    "rc-menu": "^9.12.4",
    "rc-util": "^5.38.1",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-helmet-async": "^1.3.0"
  },
  "devDependencies": {
    "react-dev-inspector": "^1.9.0",
    "@ant-design/pro-cli": "^3.3.0",
    "@testing-library/react": "^13.4.0",
    "@types/classnames": "^2.3.1",
    "@types/express": "^4.17.21",
    "@types/history": "^4.7.11",
    "@types/lodash": "^4.14.202",
    "@types/react": "^18.2.48",
    "@types/react-dom": "^18.2.18",
    "@types/react-helmet": "^6.1.11",
    "@umijs/fabric": "^2.14.1",
    "@umijs/max": "^4.1.1",
    "cross-env": "^7.0.3",
    "express": "^4.18.2",
    "gh-pages": "^3.2.3",
    "mockjs": "^1.1.0",
    "ts-node": "^10.9.2",
    "typescript": "^5.3.3",
    "umi-presets-pro": "^2.0.3",
    "umi-serve": "^1.9.11"
  },
  "engines": {
    "node": ">=12.0.0"
  },
  "create-umi": {
    "ignoreScript": [
      "docker*",
      "functions*",
      "site",
      "generateMock"
    ],
    "ignoreDependencies": [
      "netlify*",
      "serverless"
    ],
    "ignore": [
      ".dockerignore",
      ".git",
      ".github",
      ".gitpod.yml",
      "CODE_OF_CONDUCT.md",
      "Dockerfile",
      "Dockerfile.*",
      "lambda",
      "LICENSE",
      "netlify.toml",
      "README.*.md",
      "azure-pipelines.yml",
      "docker",
      "CNAME",
      "create-umi"
    ]
  }
}