项目前端和后端需要分开开发(并不是代码分开,而是启动前端服务器和后台服务器,但是他们可以相互访问)
- 后台服务启动: 普通tomcat启动即可(推荐使用eclipse,方便调试部署),需要修改配置文件config.properties 中的 project.source.path.root 为当前项目路径.
- 前端服务启动: 修改 .roadhogrc.js 文件中的proxy(前端访问代理, 第18行,主要是端口)为启动的后台服务
"/api/v1": {
"target": "http://127.0.0.1:9090/Dashboard",
"changeOrigin": true,
"pathRewrite": { "^/api/v1" : "/api/v1" }
}
使用 nodejs 的 npm run dev 启动前端服务,修改代码会自动重新部署(需要先安装nodejs和install相应的lib包,步骤见 前端 说明)
项目前端和后台可以分离部署也可合并部署
- 合并部署,使用 mvn clean install 即可将前端代码编译打包到war中,直接部署到 tomcat即可.
- 单独部署,后台作为单独的api服务器,使用 mvn install 即可打成war包,前端使用 npm run build 即可将前端代码打包到 dist文件夹,复制dist中文件到 nginx/apache等服务器就可以单独部署.
基于 SpringMVC + Mybatis + swagger + Atomikos(多数据源事务管理) + maven 的框架
框架说明
- 后端整体框架是使用 springMVC 4.3.8 详细配置见 applicationContext.xml
- 数据库操作是使用 Mybatis 3.2.3 详细见 jdbc.xml配置
- 事物管理是使用 Atomikos 4.0.1, 可配置多数据源,详细见 jdbc.xml配置
- 包管理是使用 maven
- api访问测试是使用 swagger 0.9.5, 需要先使用 PUT方式的/api/v1/login 进行登录,才能访问api,否则401未授权
后端目录结构
- 控制器在 controller包下,所有控制器需要继承com.xh.common.controller.BaseController基础控制器,使用 com.xh.util.Utils.API_PREFIX 为RequestMapping前缀, 现有和前端配合的 登录/菜单/用户/权限 四个控制器.
- 数据源在 dao 包下,详细配置在jdbc.xml中,现配置了datasource1/datasource2/jsondatsource 三个数据源,其中datasource1/datasource2为两个数据库源(未使用,和jdbc.xml有关),jsondatsource(和jdbc.xml无关)为文件数据源,配合前端使用.
- 实体文件在 dto和entry包下,entry包下为数据库实体(表),dto包下为api访问需要的中间实体,他们都必须要继承 com.xh.common.dto.CommonDto 基础Dto(否则日志和api返回会异常).
- 服务在service包下,所有的服务都必须要继承 com.xh.common.service.BaseService 基础服务. 现有和前端配合的 登录/菜单/用户/权限 四个服务及其接口
- 工具类在util包下,现有base64加密工具;config属性文件读取工具;接口代理工具;类反射工具;字符串/集合/常量综合工具Util类;文件工具类在vfs子包下,com.xh.vfs.WebVFS类可以处理本地文件和远程文件(带协议头);xml工具类在xml包下,com.xh.xml.XMLHandler类可以处理xml文件或字符串,并对dom解析;httpUtil工具等
- 公共类在common包下,里面包含控制器,服务等所有公共基类
- 扩展类在ext包下,里面包含swagger配置类,异常处理类,过滤器类,切片类等功能扩展类
基于 React + antd + dva + roadhog 的框架
开源文档
-
dva框架概念文档 https://github.com/dvajs/dva/blob/master/docs/Concepts_zh-CN.md
-
dva框架API https://github.com/dvajs/dva/blob/master/docs/API_zh-CN.md
-
ant-design组件官网https://ant.design/docs/react/introduce-cn
-
roadhog官网https://github.com/sorrycc/roadhog
特性
-
基于react，ant-design，dva，Mock 企业级后台管理系统最佳实践
-
基于Antd UI 设计语言，提供后台管理系统常见使用场景
-
基于dva动态加载 Model 和路由，按需加载
-
使用roadhog本地调试和构建，其中Mock功能实现脱离后端独立开发
-
浅度响应式设计
目录结构
├── /dist/ # 项目输出目录
├── /src/ # 项目源码目录
│ ├── /public/ # 公共文件，编译时copy至dist目录
│ ├── /components/ # UI组件及UI相关方法
│ │ ├── skin.less # 全局样式
│ │ └── vars.less # 全局样式变量
│ ├── /routes/ # 路由组件
│ │ └── app.js # 路由入口
│ ├── /models/ # 数据模型
│ ├── /services/ # 数据接口
│ ├── /themes/ # 项目样式
│ ├── /mock/ # 数据mock
│ ├── /utils/ # 工具函数
│ │ ├── config.js # 项目常规配置
│ │ ├── menu.js # 菜单及面包屑配置
│ │ ├── config.js # 项目常规配置
│ │ ├── request.js # 异步请求函数
│ │ └── theme.js # 项目需要在js中使用到样式变量
│ ├── route.js # 路由配置
│ ├── index.js # 入口文件
│ └── index.html
├── package.json # 项目信息息
├── .eslintrc # Eslint配置
└── .roadhogrc.js # roadhog配置
快速开始
1.进入前端源码目录 Dashboard\src\main\webapp\frontend-src
2.首次
#开始前请确保没有安装roadhog、webpack到NPM全局目录
npm i 或者 yarn install
3.开发
npm run build:dll #第一次npm run dev时需运行此命令，使开发时编译更快
npm run dev
打开 http://localhost:8000 开发调试
4.构建(可忽略,maven install 会自动调用)
npm run build
5.代码检测(可忽略))
npm run lint
开发
-
src/router.js 为全局路由文件,新建路由需要增加文件中routes数组
-
src/routes/XXX 新建路由component
-
src/models/XXX 新建路由model
ps. 简易开发 ,在开发环境,运行npm run dev,在menu管理中增加菜单并自动生成模板,会自动增加路由和相关文件,只有在开发环境才能使用,后端需要配置project.source.path.root属性
发布
在根目录Dashboard下,运行 mvn clean install ,会将前端代码进行构建打包并复制到Dashboard\src\main\webapp\frontend中并打入war中,可直接放入tomcat等环境直接使用