基于AntDesign开发的后端管理系统

闲来无事,使用antdesign+koa开发了一套后台管理的demo,并借此机会整理下自己所学的知识,代码开放出来。有不足之处,希望大家指点。

github源码目录

CLReactAntDesign介绍

  • CLReactAntDesign是基于AntDesign2.0+开发的后端页面例子,
  • 整合react,react-router,react-redux,react-router-redux。进行页面状态控制
  • 实用fetch进行页面请求,最终生成静态页面,实现前后端完全分离
  • 附带使用koa实现的后端接口

开发环境

  • 基于node7.0+进行开发

目录介绍

  • backend:基于AntDesign使用的后端SPA。
  • server:后端koa搭建的服务接口,主要包括,菜单管理,角色管理,用户管理,信息发布。使用前,调整mysql数据库。使用clantd.sql修改数据库。

工程运行

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

安装

安装node依赖

npm install

开发环境

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

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

webpackserverconfig.png

如上图,

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

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

启动

npm run dev

生产环境

npm run pub

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

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

后端工程启动

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

安装

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

进入到server文件夹下,

修改数据库配置文件

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

database.png

安装依赖

npm install

启动

npm start

展示

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

login.png
b1.png
b2.png
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 134,933评论 18 139
  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 173,302评论 25 708
  • 有幸在Better Me上海营的开营仪式上,听到了八运会(柏永辉)老师的关于制定年度计划的、信息量超足的分享。以下...
    乌素阅读 345评论 0 3
  • 1988年,万达创业元年。这一年,王健林从大连市西岗区政府办公室主任的位置上,请缨接手了大连市西岗区住宅开发公司,...
    全民啃书阅读 252评论 0 0