React+TypeScript+Antd+Mock 后台管理系统

前言

• 在近段时间中Ts在互联网时代大热起来
• 在前段时间我学习了Ts，对于写过java的人来讲ts其实学起来驾轻就熟
• 可是把Ts和前端项目结合在一块儿是否是驾轻就熟呢，非也
• 对于我这样没有经验只是简单的学习了官网以及对官网对例子进行编写执行
• 这实际上是一次挑战，对本身技术对一个突破
• 我就拿到了前面刚作好的一个react项目来改为Ts的项目
• 与其说是改应该说是重构，从项目的搭建都是从头开始
• 项目地址：gitee.com/yhf7/ReactT…

工具/资料

• 系统 macOS 10.14.5
• yarn 1.17.3 cnpm 6.0.0 npm 6.4.1 node 10.13.0
• 编辑器 vs code 开发版
• 脚手架 create-react-app
• npm插件 www.npmjs.com/
• ts www.tslang.cn/docs/home.h…

实现功能树图

├── Mock // 模拟数据
│   ├── user
│   ├── oreder
│   └── 等
├── 页面 //
│   ├── UI ├── 按钮、弹框、Loading、通知提醒、全局Message、Tab、标签、图片画廊（流式布局）、轮播图 // antd咱们经常使用的抽取
│   ├── 表单 ├── 登陆、注册(注册经常使用组合)
│   ├── 表格 ├── 基础表格（经常使用的表格） 高级表格（在基础表格上添加的一些表格属性）
│   ├── 富文本 这个其实平时也是很经常使用到的 （插件不少挑本身喜欢的）
│   ├── 城市管理 ├── 实现表格数据 开通城市 以及一些查询
│   ├── 订单管理 ├── 实现表格数据 结束订单 查询订单  订单详情 
│   │                                                  ├── （订单详情页面）经过订单详情跳转 展现地图以及订单详情
│   ├── 员工管理 ├── 实现表格数据以及 增删改查的组件弹框操做
│   ├── 车辆地图 实现地图以及车辆信息
│   ├── 图表 ├──  饼图、柱状图、折线图
│   ├── 权限设置 ├── 建立角色 设置权限 用户受权
复制代码

起步

1. 起一个ts项目

$ create-react-app react-ts-demo --typescript
复制代码

2. 安装/配置 antd等插件

• 安装了不少我也不太记得具体看package

$ sudo cnpm i antd axios less less-loader mockjs koa koa2-cors react-router-dom redux react-redux -S
复制代码

3. 搭建mock

• 利用koa和mockjs构建：具体看文件中的mock文件吧

4. 变动js为tsx和创建ts的接口等

• 这个提及来我也不知道着么说直接去看项目吧

5. 封装API接口，以及组件等

部分效果图

• 前面几个列表里面的都是antd的一些组件把经常使用的抽取出来

1. 登陆页面

   

2. 主页面

   

3. ui界面其中一个

   

4. 城市管理

   

5. 订单管理

   

6. 图表

   

7. 员工管理