Antd Pro 开发示例项目

基础环境

程序

Nodejs 12.16.3
Npm 6.14.4
Yarn 1.22.0

组件

umi: "3.2.1"
react: "16.8.6"
antd: "4.2.0"
@ant-design/pro-layout: "5.0.8"
@ant-design/pro-table: "2.2.7"

nodejs的安装教程到处都有，这里就不再复述了。由于umi和antd发展很快，接口也不兼容，因此本示例仅针对当前版本有效，升级后有可能无法运行。

配置文件

本示例采用Typescript开发，因此需要配置tsconfig.json

{
  "compilerOptions": {
    "outDir": "build/dist",
    "module": "esnext",
    "target": "esnext",
    "lib": ["esnext", "dom"],
    "sourceMap": true,
    "baseUrl": ".",
    "jsx": "react",
    "allowSyntheticDefaultImports": true,
    "moduleResolution": "node",
    "forceConsistentCasingInFileNames": true,
    "noImplicitReturns": true,
    "suppressImplicitAnyIndexErrors": true,
    "noUnusedLocals": true,
    "allowJs": true,
    "skipLibCheck": true,
    "experimentalDecorators": true,
    "strict": true,
    "paths": {
      "@/*": ["./src/*"],
      "@@/*": ["./src/.umi/*"]
    }
  },
  "exclude": [
    "node_modules",
    "build",
    "dist",
    "scripts",
    "src/.umi/*",
    "webpack",
    "jest"
  ]
}

其它eslint相关文件不再举例，可直接参考示例项目源码。

目录结构

• config

umi约定存放配置文件的目录，最重要的就是路由表，这里的路由表不仅控制路由，而且还控制了左侧导航菜单的生成、页面布局、权限控制等等，具体可参考umi文档。

  routes: [
    {
      path: "/user",
      component: "../layouts/UserLayout",
      routes: [
        {
          name: "login",
          path: "/user/login",
          component: "./user/login",
        },
      ],
    },
    {
      path: "/",
      component: "../layouts/SecurityLayout",
      routes: [
        {
          path: "/",
          component: "../layouts/BasicLayout",
          authority: ["admin", "user"],
          routes: [
            {
              path: "/",
              redirect: "/welcome",
            },
            {
              path: "/welcome",
              name: "welcome",
              icon: "smile",
              component: "./Welcome",
            },
           ...
          ],
        },
        {
          component: "./404",
        },
      ],
    },
    {
      component: "./404",
    },
  ],

• mock

umi约定存放模拟服务的目录，该目录下的文件都会被自动mock，从而实现前后端分离开发。

function getRule(req: Request, res: Response, u: string) {
   ...
}
function postRule(req: Request, res: Response, u: string) {
   ...
}
export default {
  "GET /api/rule": getRule,
  "POST /api/rule": postRule,
};

• public

存放静态资源文件，自动映射到根目录，可直接在less文件中引用。

• tests

单元测试工具代码，不需要修改。真正的单元测试用例放在src/e2e目录下。

• src/components

全局组件，通常全项目通用的组件放在这个目录下，而某个页面内使用的组件放在页面自己目录下的components目录，但这个并不会真正限制组件的使用范围。

• src/e2e

单元测试用例，执行yarn test会执行该目录下的测试用例。

• src/layouts

页面布局代码，同样的，这也只是一个约定，并不会有强制作用。

• src/locales

国际化代码，可以在之前的config中设置缺省语言，这里就会调用对应的ts文件。

• src/models

符合redux规范的模型定义，这里使用了dva来进行简化开发，因此只需要定义state、effects和reducers三个部分就可以了，其它工作框架都帮你完成了。

• src/services

存放request访问代码，这里使用了umi-request来简化request，并在utils中定义了一个具有统一错误处理的封装函数。

• src/pages

按页面存放代码的目录，每个页面目录下又都可以有自己的components、locales和models、services。

添加页面

首先在src/pages目录下创建一个页面目录，这个目录下至少包含一个index.tsx文件，通常还会包含styles.less。

一个最简单的index.tsx

export default (): React.ReactNode => (
  <PageHeaderWrapper>
    <Card>
      <div>
        <InfoCircleOutlined /> Hello World!
      </div>
    </Card>
  </PageHeaderWrapper>
);

其中PageHeaderWrapper是pro-layout布局中的一个包裹节点，用于包裹客户区，并生成面包屑导航之类的公共组件，具体可参考ProLayout文档。

然后在config中修改配置，在routes中增加页面和组件的对应关系，具体可参考umi文档。

同时需要修改locales文件，添加相应的文字信息，保存后页面会自动刷新。

其它

项目源码已上传码云：demo.antdpro.starter