技术选型

参考文档

目录结构

  1. ├── mock                     本地模拟数据
  2. ├── public
  3. │   └── favicon.ico          Favicon
  4. ├── src
  5. │   ├── assets               本地静态资源
  6. │   ├── common               应用公用配置，如导航信息
  7. │   ├── components           业务通用组件
  8. │   ├── e2e                  集成测试用例
  9. │   ├── layouts              通用布局
  10. │   ├── models               dva model
  11. │   ├── routes               业务页面入口和常用模板
  12. │   ├── services             后台接口服务
  13. │   ├── utils                工具库
  14. │   ├── g2.js                可视化图形配置
  15. │   ├── theme.js             主题配置
  16. │   ├── index.ejs            HTML 入口模板
  17. │   ├── index.js             应用入口
  18. │   ├── index.less           全局样式
  19. │   └── router.js            路由入口
  20. ├── tests                    测试工具
  21. ├── README.md
  22. └── package.json

模板改造

为了适应项目具体的业务逻辑，在ant-design-pro V1的基础上，改造了部分代码，已使用我司内部项目的需求；

package.json

  • 对scripts下的start命令和start:no-proxy命令增加ENV=dev的参数设置，即设置环境变量ENV为dev
  1. {
  2.   "name": "ant-design-pro",
  3.   "version": "1.3.0",
  4.   "description": "An out-of-box UI solution for enterprise applications",
  5.   "private": true,
  6.   "scripts": {
  7.     "start": "cross-env ESLINT=none PORT=9001 ENV=dev roadhog dev",
  8.     "start:no-proxy": "cross-env NO_PROXY=true ENV=dev ESLINT=none roadhog dev",
  9.     "build": "cross-env ESLINT=none roadhog build",
  10.     "site": "roadhog-api-doc static && gh-pages -d dist",
  11.     "analyze": "cross-env ANALYZE=true roadhog build",
  12.     "lint:style": "stylelint \"src/**/*.less\" --syntax less",
  13.     "lint": "eslint --ext .js src mock tests && npm run lint:style",
  14.     "lint:fix": "eslint --fix --ext .js src mock tests && npm run lint:style",
  15.     "lint-staged": "lint-staged",
  16.     "lint-staged:js": "eslint --ext .js",
  17.     "test": "roadhog test",
  18.     "test:component": "roadhog test ./src/components",
  19.     "test:all": "node ./tests/run-tests.js",
  20.     "prettier": "prettier --write ./src/**/**/**/*"
  21.   },
  22.   "dependencies": {
  23.     "@antv/data-set": "^0.8.0",
  24.     "@babel/polyfill": "^7.0.0-beta.36",
  25.     "antd": "^3.4.3",
  26.     "axios": "^0.18.0",
  27.     "babel-plugin-transform-decorators-legacy": "^1.3.4",
  28.     "babel-runtime": "^6.9.2",
  29.     "bizcharts": "^3.1.5",
  30.     "bizcharts-plugin-slider": "^2.0.1",
  31.     "classnames": "^2.2.5",
  32.     "cropperjs": "^1.4.0",
  33.     "draft-js": "^0.10.5",
  34.     "draftjs-to-html": "^0.8.4",
  35.     "draftjs-to-markdown": "^0.5.1",
  36.     "dva": "^2.2.3",
  37.     "dva-loading": "^1.0.4",
  38.     "echarts": "^4.2.0-rc.2",
  39.     "enquire-js": "^0.2.1",
  40.     "less": "2.7.2",
  41.     "lodash": "^4.17.4",
  42.     "lodash-decorators": "^4.4.1",
  43.     "moment": "^2.19.1",
  44.     "numeral": "^2.0.6",
  45.     "omit.js": "^1.0.0",
  46.     "path-to-regexp": "^2.1.0",
  47.     "prop-types": "^15.5.10",
  48.     "qs": "^6.5.0",
  49.     "quill": "^1.3.6",
  50.     "rc-drawer-menu": "^0.5.0",
  51.     "react": "^16.4.0",
  52.     "react-container-query": "^0.9.1",
  53.     "react-document-title": "^2.0.3",
  54.     "react-dom": "^16.4.0",
  55.     "react-draft-wysiwyg": "^1.12.13",
  56.     "react-fittext": "^1.0.0",
  57.     "rollbar": "^2.3.4",
  58.     "url-polyfill": "^1.0.10"
  59.   },
  60.   "devDependencies": {
  61.     "babel-eslint": "^8.1.2",
  62.     "babel-plugin-dva-hmr": "^0.4.1",
  63.     "babel-plugin-import": "^1.6.7",
  64.     "babel-plugin-module-resolver": "^3.1.1",
  65.     "babel-plugin-transform-remove-console": "^6.9.4",
  66.     "cross-env": "^5.1.1",
  67.     "cross-port-killer": "^1.0.1",
  68.     "enzyme": "^3.1.0",
  69.     "eslint": "^4.14.0",
  70.     "eslint-config-airbnb": "^16.0.0",
  71.     "eslint-config-prettier": "^2.9.0",
  72.     "eslint-plugin-babel": "^4.0.0",
  73.     "eslint-plugin-compat": "^2.1.0",
  74.     "eslint-plugin-import": "^2.8.0",
  75.     "eslint-plugin-jsx-a11y": "^6.0.3",
  76.     "eslint-plugin-markdown": "^1.0.0-beta.6",
  77.     "eslint-plugin-react": "^7.0.1",
  78.     "gh-pages": "^1.0.0",
  79.     "husky": "^0.14.3",
  80.     "lint-staged": "^6.0.0",
  81.     "mockjs": "^1.0.1-beta3",
  82.     "prettier": "^1.13.5",
  83.     "pro-download": "^1.0.1",
  84.     "redbox-react": "^1.5.0",
  85.     "regenerator-runtime": "^0.11.1",
  86.     "roadhog": "^2.3.0",
  87.     "roadhog-api-doc": "^1.0.2",
  88.     "stylelint": "^8.4.0",
  89.     "stylelint-config-prettier": "^3.0.4",
  90.     "stylelint-config-standard": "^18.0.0"
  91.   },
  92.   "optionalDependencies": {
  93.     "puppeteer": "^1.1.1"
  94.   },
  95.   "lint-staged": {
  96.     "**/*.{js,jsx,less}": [
  97.       "prettier --write",
  98.       "git add"
  99.     ],
  100.     "**/*.{js,jsx}": "lint-staged:js",
  101.     "**/*.less": "stylelint --syntax less"
  102.   },
  103.   "engines": {
  104.     "node": ">=8.0.0"
  105.   },
  106.   "browserslist": [
  107.     "> 1%",
  108.     "last 2 versions",
  109.     "not ie <= 10"
  110.   ]
  111. }

.webpacjrc.js

  • 在.webpacjrc.js的proxy字段设置代理
  • 在.webpacjrc.js的define字段设置如下，依据环境变量值，注入页面的环境变量__ENV__,在页面开发中就能获取这个参数判断是开发环境还是线上环境，从而执行不同的操作（后续打包的时候会用到这个变量，从而避免打包是反复修改代码造成的重复工作）
  1. const path = require('path');
  3. export default {
  4.   entry: 'src/index.js',
  5.   extraBabelPlugins: [['import', { libraryName: 'antd', libraryDirectory: 'es', style: true }]],
  6.   env: {
  7.     development: {
  8.       extraBabelPlugins: ['dva-hmr'],
  9.     },
  10.   },
  11.   alias: {
  12.     components: path.resolve(__dirname, 'src/components/'),
  13.   },
  14.   ignoreMomentLocale: true,
  15.   theme: './src/theme.js',
  16.   html: {
  17.     template: './src/index.ejs',
  18.   },
  19.   disableDynamicImport: true,
  20.   publicPath: '/',
  21.   hash: true,
  22.   define: {
  23.     __ENV__: process.env.ENV || '',
  24.   },
  25.   // proxy,
  26.   proxy: {
  27.     '/proxy': {
  28.       // target: 'http://61.174.254.204:8008', // 测试ip
  29.       //  target: 'http://192.168.18.169:8080/', // 刘云江ip
  30.        target: 'http://192.168.18.135:8080/', // 楼高峰ip
  31.       // target: 'http://192.168.18.153:8080/', // 朱鹏飞ip
  32.       // target: 'http://192.168.18.231:8080/',
  33.       // target: 'http://183.131.202.93:9071/mock/15/',
  34.       // target: 'http://127.0.0.1:3000/',
  35.       changeOrigin: true,
  36.       // pathRewrite: { '^/proxy': '/hdwh' }, // 线上测试用
  37.       pathRewrite: { '^/proxy': '' },
  38.     },
  39.   },
  40. };

./src/utils/request.js

依据和后端ajax返回值状态的预定，改造request.js，目前的版本因为有历史原因，封装的不够完美，还有些后续的错误处理可以封装在request.js里面，后续项目启动时候需要改造优化，减少重复代码，目前版本的代码如下(原版使用的是fetch，改为使用axios)

  1. import fetch from 'dva/fetch';
  2. import { notification, message } from 'antd';
  3. import { routerRedux } from 'dva/router';
  4. import axios from 'axios';
  5. import store from '../index';
  7. // Make a request for a user with a given ID
  9. const codeMessage = {
  10.   200: '服务器成功返回请求的数据。',
  11.   201: '新建或修改数据成功。',
  12.   202: '一个请求已经进入后台排队（异步任务）。',
  13.   204: '删除数据成功。',
  14.   400: '发出的请求有错误，服务器没有进行新建或修改数据的操作。',
  15.   401: '用户没有权限（令牌、用户名、密码错误）。',
  16.   403: '用户得到授权，但是访问是被禁止的。',
  17.   404: '发出的请求针对的是不存在的记录，服务器没有进行操作。',
  18.   406: '请求的格式不可得。',
  19.   410: '请求的资源被永久删除，且不会再得到的。',
  20.   422: '当创建一个对象时，发生一个验证错误。',
  21.   500: '服务器发生错误，请检查服务器。',
  22.   502: '网关错误。',
  23.   503: '服务不可用，服务器暂时过载或维护。',
  24.   504: '网关超时。',
  25. };
  26. function checkStatus(response) {
  27.   if (response.status >= 200 && response.status < 300) {
  28.     return response;
  29.   }
  30.   const errortext = codeMessage[response.status] || response.statusText;
  31.   notification.error({
  32.     message: `请求错误 ${response.status}: ${response.url}`,
  33.     description: errortext,
  34.   });
  35.   const error = new Error(errortext);
  36.   error.name = response.status;
  37.   error.response = response;
  38.   throw error;
  39. }
  41. /**
  42.  * Requests a URL, returning a promise.
  43.  *
  44.  * @param  {string} url       The URL we want to request
  45.  * @param  {object} [options] The options we want to pass to "fetch"
  46.  * @return {object}           An object containing either "data" or "err"
  47.  */
  48. export function requestFetch(url, options) {
  49.   const defaultOptions = {
  50.     credentials: 'include',
  51.   };
  52.   const newOptions = { ...defaultOptions, ...options };
  53.   if (newOptions.method === 'POST' || newOptions.method === 'PUT') {
  54.     if (!(newOptions.body instanceof FormData)) {
  55.       newOptions.headers = {
  56.         Accept: 'application/json',
  57.         'Content-Type': 'application/json; charset=utf-8',
  58.         ...newOptions.headers,
  59.       };
  60.       newOptions.body = JSON.stringify(newOptions.body);
  61.     } else {
  62.       // newOptions.body is FormData
  63.       newOptions.headers = {
  64.         Accept: 'application/json',
  65.         ...newOptions.headers,
  66.       };
  67.     }
  68.   }
  70.   return fetch(url, newOptions)
  71.     .then(checkStatus)
  72.     .then(response => {
  73.       if (newOptions.method === 'DELETE' || response.status === 204) {
  74.         return response.text();
  75.       }
  76.       return response.json();
  77.     })
  78.     .catch(e => {
  79.       const { dispatch } = store;
  80.       const status = e.name;
  81.       if (status === 401) {
  82.         dispatch({
  83.           type: 'login/logout',
  84.         });
  85.         return;
  86.       }
  87.       if (status === 403) {
  88.         dispatch(routerRedux.push('/exception/403'));
  89.         return;
  90.       }
  91.       if (status <= 504 && status >= 500) {
  92.         dispatch(routerRedux.push('/exception/500'));
  93.         return;
  94.       }
  95.       if (status >= 404 && status < 422) {
  96.         dispatch(routerRedux.push('/exception/404'));
  97.       }
  98.     });
  99. }
  101. /**
  102.  * 切换到axios来执行ajax
  103.  *  'x-requested-with': 'XMLHttpRequest',参数用来传递的后端判断是否是ajax请求，是的话session过期请求头返回
  104.  *  sessionstatus:timeout,前端统一判断处理
  105.  * @param url
  106.  * @param options
  107.  * @returns {Promise<AxiosResponse<any>>}
  108.  *
  109.  */
  110. export default function request(url, options) {
  111.   return axios(url, {
  112.     ...options,
  113.     headers: options
  114.       ? {
  115.           'x-requested-with': 'XMLHttpRequest',
  116.           ...options.headers,
  117.         }
  118.       : {
  119.           'x-requested-with': 'XMLHttpRequest',
  120.         },
  121.     data: options && options.body,
  122.   })
  123.     .then(response => {
  124.       // 统一处理session过期
  125.       if (response.headers.sessionstatus && response.headers.sessionstatus === 'timeout') {
  126.         message.success('登录过期，请重新登录！', 1.5);
  127.         store.dispatch({
  128.           type: 'login/timeOut',
  129.         });
  130.       }
  131.       if (response.config.method.toLowerCase() === 'delete' && response.status === 204) {
  132.         message.success('删除成功！', 1.5);
  133.       }
  134.       return response.data;
  135.     })
  136.     .catch(e => {
  137.       console.dir(e);
  138.       // console.log(e.response)
  139.       const { dispatch } = store;
  140.       const status = e.response.status;
  141.       message.error(e.toString());
  142.       // message.error(`${status}:${e.response.data.error},${e.response.data.message}`);
  143.       if (status === 401) {
  144.         dispatch({
  145.           type: 'login/logout',
  146.         });
  147.         return;
  148.       }
  149.       if (status === 403) {
  150.         dispatch(routerRedux.push('/exception/403'));
  151.         return;
  152.       }
  153.       if (status <= 504 && status >= 500) {
  154.         dispatch(routerRedux.push('/exception/500'));
  155.         return;
  156.       }
  157.       if (status >= 404 && status < 422) {
  158.         dispatch(routerRedux.push('/exception/404'));
  159.       }
  160.     });
  161. }

./src/services/api.js

  • 封装UrlExchange方法用于转化请求路径，开发过程中，前端自定义一个前缀（现在基本用proxy）用于转发代理，线上发布后请求用nginx转发，会约定一个前缀（下面的示例代码用hdwh），不同项目线上的前缀不一样，问后台就行了，这里用到了配置的环境变量__ENV__，避免打包时候反复修改代码
  1. import { stringify } from 'qs';
  2. import request, { requestFetch } from '../utils/request';
  4. export function UrlExchange(url) {
  5.   // eslint-disable-next-line no-undef
  6.   if(__ENV__ === 'dev'){ // __ENV__是环境变量，在.webpackrc中define栏配置
  7.     return `/proxy${url}`; // 开发使用
  8.   }
  9.   return `/hdwh${url}`; // 线上打包地址
  10. }
  12. /**
  13.  * 测试
  14.  * @param params 分页参数
  15.  * @returns {Promise<AxiosResponse<any>>}
  16.  */
  17. export async function queryTest(params) {
  18.   return request(UrlExchange(`/getAccountByName?name=liuyunjaing`));
  19. }

菜单权限管理

项目需求：菜单可以配置，角色可以配置，不同角色可以分配不同菜单，不同账号可以分配不同角色，目前逻辑一个账号只能对应一个角色。（具体可以参考华东五禾后台管理系统项目的代码，在./src/routes/Permission目录下）

image.png

  1. 线上配置菜单（菜单标题，icon是ant-design自带的Icon的名字，菜单路径即路由的path）
  2. 在./src/common/router.js中配置菜单路径对应的组件（key为菜单路径），类似如下：（注意，routerConfig中路由配置的顺序也是有用的，用户登录进来后会优先从上往下匹配路径，匹配到有权限使用的路径则返回，所以需要根据业务需求，调整为适合自己项目的排序）image.png
  3. 菜单menuData的改造，现在menuData是登录的时候返回（在./src/mosrc/models/login中查看相关代码），此时的menuData数据结构并不是ant-design-pro需要的数据结构，需要自己改造成ant-design-pro能使用的数据结构，改造过程比较复杂，方法都在./src/utils/utils.js中,改造成功后的menuData会存放在localStorage中，登录成功后通过从localStorage中重新获取menuData来渲染菜单

./src/mosrc/models/login

  1. effects: {
  2.     *login({ payload }, { call, put }) {
  3.       const res = yield call(bgAccountLogin, payload);
  4.       localStorage.setItem('initMenu', JSON.stringify(res.data));
  5.       if (res.code && res.code === '1000004') {
  6.         res.msg && message.success(res.msg, 1.5);
  7.         // 如果是第一次登录的话
  8.         if (res.firstLogin) {
  9.           yield put(routerRedux.push('/user/first-login'));
  10.         } else {
  11.           setStorage('menuData', menuDataMap(res.data));
  12.           setStorage('userInfo', {
  13.             loginId: res.loginId,
  14.             displayname: res.displayname,
  15.             publisherName: res.publisherName,
  16.           });
  17.           setStorage('roles', res.roles);
  18.           setStorage('roleTypes', res.roleTypes);
  19.           yield put({
  20.             type: 'changeLoginStatus',
  21.             payload: res,
  22.           });
  23.           // Login successfully
  24.           reloadAuthorized();
  25.           // 用window.location.href 登录成功刷新页面，重新初始化routerData,否则routerData不是用服务端返回的menuData做关联，权限控制会有bug
  26.           const urlParams = new URL(window.location.href);
  27.           const redirect = urlParams.searchParams.get('redirect');
  28.           if (redirect) {
  29.             window.location.href = redirect;
  30.           } else {
  31.             window.location.href = '/';
  32.           }
  33.         }
  34.       } else if (res.code && res.msg) {
  35.         message.error(res.msg);
  36.       } else {
  37.         message.error('登录异常！');
  38.       }
  40.       // const rs = yield call(queryTest,payload);
  41.       // console.log(rs);
  43.       // const response = yield call(fakeAccountLogin, payload);
  44.     },

./src/common/menu.js

  1. import { isUrl } from '../utils/utils';
  3. let menuData = [];
  5. function formatter(data, parentPath = '/', parentAuthority) {
  6.   return data.map(item => {
  7.     let { path } = item;
  8.     if (!isUrl(path)) {
  9.       path = parentPath + item.path;
  10.     }
  11.     const result = {
  12.       ...item,
  13.       path,
  14.       authority: item.authority || parentAuthority,
  15.     };
  16.     if (item.children) {
  17.       result.children = formatter(item.children, `${parentPath}${item.path}/`, item.authority);
  18.     }
  19.     return result;
  20.   });
  21. }
  23. export const getMenuData = () => {
  24.   if (localStorage.getItem('menuData')) {
  25.     menuData = JSON.parse(localStorage.getItem('menuData'));
  26.   } else {
  27.     menuData = [
  28.       {
  29.         name: 'dashboard',
  30.         icon: 'dashboard',
  31.         path: 'dashboard',
  32.         children: [
  33.           {
  34.             name: '分析页',
  35.             path: 'analysis',
  36.           },
  37.           {
  38.             name: '监控页',
  39.             path: 'monitor',
  40.           },
  41.           {
  42.             name: '工作台',
  43.             path: 'workplace',
  44.             // hideInBreadcrumb: true,
  45.             // hideInMenu: true,
  46.           },
  47.         ],
  48.       },
  49.     ];
  50.   }
  51.   return formatter(menuData);
  52. };

鉴权组件的改造

增加了vip[String]控制组件能被所有用户访问，权限这块的改造比较麻烦，涉及到很多地方，具体代码参考五禾项目的代码（应该有相关注释）， ./src/layouts/BasicLayout.js等js文件的代码都会有影响，新项目可以重新理一下

image.png

待续

ant-design-pro已经升级V2，后续项目如果时间允许，可以考虑使用V2模板，进一步重构代码的实现