CLReactAntDesign介绍

June 15, 2018 · View on GitHub

  • CLReactAntDesign是基于AntDesign2.0+开发的后端页面例子,
  • 整合react,react-router,react-redux,react-router-redux。进行页面状态控制
  • 实用fetch进行页面请求,最终生成静态页面,实现前后端完全分离
  • 附带使用koa实现的后端接口 //住server下面是koa写的接口,目前框架不使用此接口,仅供想学习koa的同学参考参考接口
  • 新版本使用egg实现后端接口

开发环境

  • 基于node8.0+进行开发

目录介绍

  • backend:基于AntDesign使用的后端SPA。
  • server:后端koa搭建的服务接口,主要包括,菜单管理,角色管理,用户管理,信息发布。 //目前废弃不再使用
  • eggserver:后端使用egg搭建服务接口

使用前,调整mysql数据库。使用 clantd.sql修改数据库。

工程运行

进入到backend目录,编译运行前端框架

安装

安装node依赖

npm install

开发环境

开发使用webpack进行编译,并使用webpack.server启动一个服务器,进行页面的访问,

使用前,配置webpack.server,修改接口的转发。主要是调整端口,如果接口端口不冲突,不需要调整。

如上图,

前端转发,即今天服务器地址,默认端口port是9000,所以请求页面的默认地址是localhost:9000/index.html或localhost:9000

后端转发,为接口转发的时候,映射的地址。根据server工程设置的端口定,默认有两个,一个是请求常用接口,一个是登录验证。可视情况做相应调整

启动

npm run dev

生产环境

npm run pub

执行上述命令,会生成相应的文件到根目录下的pub文件夹,直接放服务器中使用即可。

生产环境,建议使用ngnix部署,直接配置静态文件目录,放目录下,使用ngnix进行接口转发。解决跨域问题。

后端工程启动

后端工程主要提供了一些基础的接口。使用egg来开发。利用JWT整合token机制。

安装

使用clantd.sql进行数据库的安装,

进入到eggserver文件夹下,

修改数据库配置文件

修改eggserver/config/config.default.js下的数据库配置文件

安装依赖

npm install

启动开发

npm run dev

后台部署

npm start //开始
npm stop //stop

展示

访问地址 localhost:9000 登录用户名密码,admin/123