[TOC]
该工程是基于antPro2进行个性化改装，目的是为了能快速结实际业务开发。详情 https://pro.ant.design/docs/getting-started-cn
- 基于 antd 多Tab页菜单切换功能添加（可缓存页面）
- 工程针对咱们自己业务系统进行了一些特殊封装
- 工程中加入了mobx 用于方便大家开发（redux 依然有，但是门槛较高）
- 用户、角色、菜单管理基本功能已经完成
- 登陆，以及配置已经做了咱们的个性化
- 相关组件重构，性能进行了优化，功能也做了加强。
- 其他还在建设中 。。。
你的本地环境需要安装 yarn、node 和 git。我们的技术栈基于 ES2015+、React、UmiJS、dva和 antd，提前了解和学习这些知识会非常有帮助
- 这里推荐用谷歌Chrome （version 74 +）（视觉效果还是开发都是蛮不错了）
- Ie11 基本抛弃 （Mobx5 不支持ie11）edge
都可以通过谷歌商城下载，若不能访问谷歌商城，建议下载360谷歌访问助手或者蓝灯等等（翻墙的软件）
或者下载谷歌双核浏览器，可以方便下载插件
- React Developer Tool （可以查看到React组件的属性变量等等）
- MobX Developer Tool （可以查看到mobx的store属性函数等等）
- Redux DevTools （可以看到redux中数据流到变化和函数调用等等）
代码从gitee https://gitee.com/W006/myadmin.git 下载
cnpm install ## npm install (阿里快一点)or
yarn installnpm startor
yarn install启动成功后，控制台会显示地址和端口
xxxMacBook-Pro:myadmin wen$ npm start
...
App running at:
- Local: http://localhost:6060/ (copied to clipboard)
- Network: http://192.168.43.234:6060/
├── config # umi 配置，包含路由，构建等配置
| ├── routes # 根据业务模块路由配置
├── doc # 文档图片
├── mock # 本地模拟数据
├── docker # 容器配置文件
├── public
│ └── favicon.png # Favicon
├── src
│ ├── assets # 本地静态资源
│ ├── components # 业务通用组件
│ ├── e2e # 集成测试用例
│ ├── layouts # 通用布局
│ ├── models # 全局 dva model
| ├── stores # 业务store处理业务逻辑的
| ├── common # 通用全局的store
│ ├── pages # 业务页面入口和常用模板
| ├── plugins # 业务组件
| ├── common.less # 业务通用样式
│ ├── services # 后台接口服务
| ├── config # 存放后台服务配置的
| ├── ServiceHandler.js# 通用的调用后台的
│ ├── utils # 工具库
| └── app.conf.js # 服务配置
│ ├── locales # 国际化资源
| ├── defaultSettings.js # 全局的默认配置布局，标题，样式等等
│ ├── global.less # 全局样式
│ └── global.js # 全局 JS
├── tests # 测试工具
├── README.md
└── package.json
-
构建 当要发布生产的时候通过下面方式构建
打包成功后会在当前目录生成一个dist文件
npm run build-
分析构建文件体积
如果你的构建文件很大，你可以通过
analyze命令构建并分析依赖模块的体积分布，从而优化你的代码。
npm run analyzenginx.conf (工程的docker文件夹有配置文件)
# msa.web.ip:port 指定后台服务地址和ip
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;
# 如果有资源，建议使用 https + http2，配合按需加载可以获得更好的体验
# rewrite ^/(.*)$ https://msa.web.ip:port/$1 permanent;
}
location /api {
proxy_pass https://msa.web.ip:port;
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;
}
location /api {
proxy_pass https://msa.web.ip:port;
proxy_set_header X-Forwarded-Proto $scheme;
proxy_set_header Host $http_host;
proxy_set_header X-Real-IP $remote_addr;
}
}
然后将编译之后的文件复制到 spring boot 项目的 /src/main/resources/static 目录下。
重新启动项目，访问 http://localhost:8080/ 就可以看到效果。
为了方便做整合，最好使用 hash 路由（url带有#的）。如果你想使用 browserHistory ，可以创建一个 controller ，并添加如下代码：
@RequestMapping("/api/**")
public ApiResult api(HttpServletRequest request, HttpServletResponse response){
return apiProxy.proxy(request, reponse);
}
@RequestMapping(value="/**", method=HTTPMethod.GET)
public String index(){
return "index"
}-
建文件夹sys/demo/
-
建文件
- NewPage.js 列表页面
import React from 'react'; import styles from './index.less' class NewPage extends React.Component { render(){ return <div className={styles.adMain}>Hello</div> } }
- index.less
.adMain{ font-size:100px; color:blue; }
-
菜单 mock/mock.data.js 这里是模拟的菜单
{ "id": 10006, "menuCode": "10006", "menuName": "新页面", "parentId": 100, // 上级菜单id "url": "/sys/demo/demoIndex", // 这个要和路由配置的对应上 "icon": "huijipingzhengyinqing", },
-
路由在
config/routes/sys.js 加入配置{ path: `/sys/demo/demoIndex`, # 路由地址（这个和菜单的URL、要一致） name: '新页面', # 模块名称 author: 'wennn', # 作者 component: `./sys/demo/NewPage`, # 页面位置，这里"."代表@/pages/ }
复杂的页面难免会写一大堆逻辑，为了让页面和逻辑分开这里就需要处理数据流的store或者modal
这里建一个store或者modal就可以了，推荐store
- store
- modal
需要调用后台服务的时候在这里配置一下
前后台分离开发的时候，前端可以通过配置模拟数据来做开发。