Ant Design 使用-谢先斌的博客

Ant Design 使用

发布时间： 2022-08-21 更新时间： 2024-11-10 总字数：1951 阅读时间：4m 作者：谢先斌 IP上海

Ant Design 定制示例

介绍

Ant Design (Pro) 相关文档：

https://ant.design/index-cn
- Umi 是一个可扩展的企业级前端应用框架，通过 @umijs/max 打包在 ant 中
- https://dvajs.com/
- Redux 一个用于应用程序状态管理的开源 JavaScript 库
  - https://cn.redux.js.org/introduction/getting-started/
- Husky 使现代的原生 Git 钩子变得简单
  - 当前目录不包含 .git 修复
- XSwitch Chrome 插件：用来拦截生产 url 到本地，方便调试验证登
- Dva 提供一套状态管理方案
https://pro.ant.design/zh-CN/ 开箱即用的中台前端/设计解决方案
- 代码：https://github.com/ant-design/ant-design-pro
  - 分支 all-blocks 有完整的 demo
- 在线示例：https://preview.pro.ant.design/ 可以定制 src/defaultSettings.js （主要是后台样式）
- 新手需知
ProComponents 是基于 Ant Design 而开发的模板组件，提供了更高级别的抽象支持，开箱即用。可以显著地提升制作 CRUD 页面的效率，更加专注于页面。
- Form Playground
https://antv.vision/ 可视化组件
Ant Design Landing 平台拥有丰富的各类首页模板，下载模板代码包，即可快速使用，也可使用首页编辑器，快速搭建一个属于你的专属首页
使用 Ant Motion 能够快速在 React 框架中使用动画

创建项目

Ant Design Pro 生成项目模板，参考 https://beta-pro.ant.design/docs

$ npm i @ant-design/pro-cli -g
$ pro create x-ui
$ cd x-ui
$ tyarn
$ tyarn start
$ tyarn start:dev

开发工具

vscode
- 插件
  - @umijs/plugin-model

目录结构

参考：https://pro.ant.design/zh-CN/docs/folder/
配置参考 https://v3.umijs.org/zh-CN/config
src/pages/document.ejs 配置加载页，包括对应的 logo 等
src/app.tsx getInitialState 做权限初始化，如认证等信息
src/models 全局初始化数据，应用加载前初始化用户、权限、菜单等数据，其它地方使用 const { initialState, setInitialState } = useModel('@@initialState');
- 参考数据流
- dva
页面组件的定制，需要在 routes.ts 配置，参考 plugin-layout

定制

国际化删除 src/locales 对应的文件即可精简

代码生成

参考维生成器

umi generate
umi g

umi g page
umi g page bar --dir

umi g prettier

接口规范

参考
默认的接口格式为

export interface response {
  success: boolean; // if request is success
  data?: any; // response data
  errorCode?: string; // code for errorType
  errorMessage?: string; // message display to user
  showType?: number; // error display type： 0 silent; 1 message.warn; 2 message.error; 4 notification; 9 page
  traceId?: string; // Convenient for back-end Troubleshooting: unique request ID
  host?: string; // onvenient for backend Troubleshooting: host of current access server
}

分页接口格式

{
 list: [
 ],
 current?: number,
 pageSize?: number,
 total?: number,
}

示例

{
"success": true,
"data": {},
"errorCode": "1001",
"errorMessage": "error message",
"showType": 2,
"traceId": "someid",
"host": "10.1.1.1"
}

# 对于简单的可以如下：
{
"success": true,
"data": {},
"errorMessage": "error message"
}

Mock

Mock 示例

基于 OpenAPI 生成 SDK

基于 OpenAPI 生成前端调用代码（参考）：
- https://ant-design.antgroup.com/index-cn 国内链接
- https://pro.ant.design/zh-CN/docs/openapi/
配置 config/config.ts

import { join } from 'path';

export default defineConfig({
 ...
  openAPI: [
     {
       requestLibPath: "import { request } from 'umi'",
      // 或者使用在线的版本
       // schemaPath: "https://gw.alipayobjects.com/os/antfincdn/M%24jrzTTYJN/oneapi.json"
       schemaPath: join(__dirname, 'oneapi.json'),
      mock: false,  // 为 true 会在 mock 目录生成 mock 文件
  projectName: 'swagger',
    },
...

生成 services 代码到 src/services/目录下

npm openapi

生成 openapi 文档到 src/services/swagger 目录，然后就可以在页面中调用

requestInterceptors 注入 token 等，具体配置参考

权限

// src/access.ts
export default function (initialState: { currentUser?: API.CurrentUser | undefined }) {
  const { currentUser } = initialState || {};
  return {
    canAdmin: currentUser && currentUser.access === 'admin',
  };
}

静态发布时，配置 API 的 baseURL

src/app.tsx 中配置

/**
 * @name request 配置，可以配置错误处理
 * 它基于 axios 和 ahooks 的 useRequest 提供了一套统一的网络请求和错误处理方案。
 * @doc https://umijs.org/docs/max/request#配置
 */
export const request: RequestConfig = {
  baseURL: 'https://proapi.azurewebsites.net',
  ...errorConfig,
};

路由方式

参考
Ant Design Pro 使用的 Umi 可以使用两种路由方式：
- browserHistory 使用 browserHistory 则需要服务器做好处理 URL 的准备，处理应用启动最初的 / 这样的请求应该没问题，但当用户来回跳转并在 /users/123 刷新时，服务器就会收到来自 /users/123 的请求，这时你需要配置服务器能处理这个 URL 返回正确的 index.html，否则就会出现 404 找不到该页面的情况
  - 建议在配置中开启 exportStatic，这样编译后的 dist 目录会对每一个路由都生成一个 index.html，从而每个路由都能支持 deeplink 直接访问
    - 参考 exportStatic
  - 强烈推荐使用默认的 browserHistory
- hashHistory 使用 hashHistory 时浏览器访问到的始终都是根目录下 index.html，取井号（/#/users/123）后面的字符作为路径

自定义参数配置

参考 define 文档
- 在浏览器中使用环境变量
添加配置 config/config.<env>.ts

export default defineConfig({
  define: {
    APP_URL: 'http://dev.xiexianbin.cn:8000', // 当前SaaS发布的URL地址
  },
  ...

src/typings.d.ts 中声明定义：

declare const APP_URL: string;

tsx 中使用 ${APP_URL}

css/less

CSS Modules 的基本原理很简单，就是对每个类名（非 :global 声明的）按照一定规则进行转换，保证它的唯一性

多主题

参考 switch-theme

jsx

Jsx 文件注释

{/* jsx 单行注释 */}

{/*
    多行注释
*/}

发布

npm run build

nginx 配置参考

server {
    listen 80;
    # gzip config
    gzip on;
    gzip_min_length 1k;
    gzip_comp_level 9;
    gzip_types text/plain application/javascript application/x-javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png;
    gzip_vary on;
    gzip_disable "MSIE [1-6]\.";

    root /usr/share/nginx/html;

    location / {
        # 用于配合 browserHistory使用
        try_files $uri $uri/index.html /index.html;

        # 如果有资源，建议使用 https + http2，配合按需加载可以获得更好的体验
        # rewrite ^/(.*)$ https://preview.pro.ant.design/$1 permanent;

    }
    location /api {
        proxy_pass https://ant-design-pro.netlify.com;
        proxy_set_header   X-Forwarded-Proto $scheme;
        proxy_set_header   X-Real-IP         $remote_addr;
    }
}

server {
  # 如果有资源，建议使用 https + http2，配合按需加载可以获得更好的体验
  listen 443 ssl http2 default_server;

  # 证书的公私钥
  ssl_certificate /path/to/public.crt;
  ssl_certificate_key /path/to/private.key;

  location / {
        # 用于配合 browserHistory使用
        try_files $uri $uri/index.html /index.html;

  }
  location /api {
      proxy_pass https://ant-design-pro.netlify.com;
      proxy_set_header   X-Forwarded-Proto $scheme;
      proxy_set_header   Host              $http_host;
      proxy_set_header   X-Real-IP         $remote_addr;
  }
}

自动修复 lint 的错误

npm run lint:fix

websocket 代理

参考

// config/proxy.js
export default {
  dev: {
    // websocket代理
    '/ws/': {
      target: 'ws://localhost:1323',
      ws: true,
      logLevel: 'debug',
      secure: false,
      pathRewrite: {
        '^/ws': '',
      },
    },
  },
}

组件总览

https://ant-design.antgroup.com/components
- splitter 可动态调整大小、自由切分指定区域

Tailwind CSS

Tailwind CSS 配置生成器
配置问题参考

F&Q

CORS 问题

需求是实现 http://dev.xiexianbin.cn:8001 调用 http://dev.xiexianbin.cn:8888 时，将 .xiexianbin.cn 的 cookie 带过去

浏览器调用错误日志

Access to fetch at 'http://dev.xiexianbin.cn:8888/api/v1/user' from origin 'http://dev.xiexianbin.cn:8001' has been blocked by CORS policy: The value of the 'Access-Control-Allow-Origin' header in the response must not be the wildcard '*' when the request's credentials mode is 'include'.

ts 调用示例

export async function user(options?: { [key: string]: any }) {
  return request<{
    data: API.User;
  }>('/api/v1/user', {
    method: 'GET',
    credentials: 'include',  // 添加改行实现将 .xiexianbin.cn 的 cookie 带过去
    ...(options || {}),
  });
}

gin Demo 实现，参考

    // origin := c.Request.Header.Get("Origin")
    // c.Header("Access-Control-Allow-Origin", origin)
    c.Writer.Header().Set("Access-Control-Allow-Origin", c.Request.Header.Get("Origin") // 这一行是核心
    c.Writer.Header().Set("Access-Control-Max-Age", "86400")
    c.Writer.Header().Set("Access-Control-Allow-Methods", "POST, GET, OPTIONS, PUT, DELETE, UPDATE")
    c.Writer.Header().Set("Access-Control-Allow-Headers", "Access-Control-Allow-Origin, Origin, Content-Type, Content-Length, Accept-Encoding, X-CSRF-Token, Authorization")
    c.Writer.Header().Set("Access-Control-Expose-Headers", "Content-Length")
    c.Writer.Header().Set("Access-Control-Allow-Credentials", "true")

cors 示例