学React已经有一段时间了,期间都是接触到的都是些概念性的东西和一些简单的demo示例。想要更加熟悉框架以及能够安全的运用在项目中,还需要真正的实战练习,无意中看到withAnt商店小程序,于是就用刚学的Umi,React,Antd-mobile照着写了起来。
项目都是在利用业余时间写的,仅仅用于学习使用。
项目中涉及到用户登陆,jwt token验证,商品管理,订单管理,其他一些使用mock数据的模板组件,并对webpack做了一些必要的优化配置。(目前真正与服务端交互的只有商品管理,订单管理);
此项目为后台数据管理界面,另外有基于Umi React Antd的用户客户端界面和基于node egg mongodb的服务端系统,此客户端和后台管理界面需要结合服务端使用,否出会出现找不到数据的异常。
项目源码基于 GPL 协议,仅仅用于 Umi React 框架的学习,请勿作为商业用途。 请抵制一切盗版侵权行为,请尊重作者的劳动果实!
- 💡 TypeScript: 应用程序级 JavaScript 的语言
- 💎 优雅美观:基于 Ant Design 体系精心设计
- 📐 常见设计模式:提炼自中后台应用的典型页面和场景
- 🚀 最新技术栈:使用 React/umi/dva/ant-design 等前端前沿技术开发
- 🌐 国际化:内建业界通用的国际化方案
- ⚙️ 最佳实践:良好的工程实践助您持续产出高质量代码
- 🔢 Mock 数据:实用的本地数据调试方案
- 🔒 优秀的权限设计:目前能找到的最好的权限实现方案
-
安装 NodeJs 推荐安装最新稳定版
-
全局安装 yarn(可跳过)
npm install --global yarn
- 安装依赖
npm run bootstrap
或者 yarn bootstrap
- 开发
npm run start
或者 yarn start
- 编译
npm run build
或者 yarn build
本地开发后端接口配置
代理地址 proxy:{ '/api':{ target:'http://127.0.0.1:7001', } }
- 框架:React,Umi,Dva
- 组件库:ant-design
- 开发语言:TypeScript
- Ajax 库:Axios
- 样式:Less
- 代码上 CDN 请使用以下 umi 插件
解决资源访问路径问题以及 API 地址配置问题
系统采用手动配置路由的形式
- 参数类型:
string
- 参数描述: 参数名称 配合多言插件使用 添加路由请在 locals 目录下的 menu.ts 添加对应项
- 默认值: 无
- examples:
// router.config.ts
{
path: '/module1',
name: 'module1',
component: 'component path',
routes: [
path: '/module1/page1',
name: 'page1',
component: 'component path',
]
}
// menu.ts 添加下面几行配置
'module1': '***',
'module1.page1': '***'
配合Policy使用
- 参数类型:
string
|string[]
- 参数描述: 权限 控制是否显示左侧菜单 以及路由拦截
- 默认值: 无
- 参数类型:
boolean
- 参数描述: 是否显示面包屑
- 默认值: true
- 参数类型:
boolean
- 参数描述: 可以在菜单中不展示这个路由,包括子路由
- 默认值: false
- 参数类型:
boolean
- 参数描述: 用于隐藏不需要在菜单中展示的子路由
- 默认值: false
请查看 ant-design-plus authorized
├── config # UMI配置相关
│ ├── config.ts # umi配置文件
│ ├── plugin.config.ts # umi插件配置
│ ├── router.config.ts # 路由相关配置
│ ├── server.config.ts # 后端服务地址配置
│ └── theme.config.ts # 定制化ant-design
├── docker # docker相关配置
│ ├── Dockerfile # docker配置文件
│ └── nginx.conf # nginx相关配置
├── mock # 后端接口模拟
│ ├── notices.ts # 通知相关
│ └── users.ts # 用户相关
├── public # 静态资源
│ ├── favicon.png # favicon
│ └──
├── src # 主目录
│ ├── assets # 静态资源
│ ├── components # 全局公共组件
│ │ ├── authorized # 面包屑组件
│ │ ├── drawer-wrapper # 对drawer二次封装
│ │ ├── exception # 异常组件
│ │ ├── global-footer # 全局Footer组件
│ │ ├── global-header # 全局Header组件
│ │ ├── header-dropdown #
│ │ ├── header-search # header搜索组件
│ │ ├── icon-font # icon组件 具体请参考ant-design自定义图标方案
│ │ ├── notice-icon # 消息通知组件
│ │ ├── page-header-wrapper # 对page-header二次封装
│ │ ├── page-loading # loading组件
│ │ ├── screen-full # 全屏组件
│ │ ├── select-lang # 选择语言组件
│ │ ├── notice-icon # 消息通知组件
│ │ ├── send-code # 发送验证码组件
│ │ ├── side-menu # 左侧菜单组件
│ │ ├── tab-pages # 页面Tab组件
│ │ └── #
│ ├── config # 项目配置
│ │ ├── index.ts # 项目主要变量配置
│ │ └──
│ ├── layouts # 项目常用布局
│ ├── locales # 多语言目录
│ ├── models # 全局model
│ ├── pages # 所有页面
│ ├── services # 后端接口相关
│ ├── styles # 样式目录
│ ├── utils # 全局工具方法目录
│ ├── global.ts # 全局TS umi会直接引入
│ └── global.less # 全局样式 umi会直接引入
├── .editorconfig # IDE设置文件
├── .gitignore # Git忽略文件
├── .nvmrc #
├── .prettierignore #
├── .prettierrc.js #
├── .stylelintrc #
├── commitlint.config.js #
├── jest.config.js #
├── LICENSE #
├── lint-staged.config.js #
├── package.json # package.json
├── README.md # 项目描述文件
├── tsconfig.json # typescript配置文件
└── yarn.lock # yarn生成文件
具体请查看walrus
采用 ant-design 提供的解决方案,具体请查看自定义图标
在 /src/config/index.ts
中配置 SETTING_DEFAULT_CONFIG.iconFontUrl
awesome-frontend 整理前端相关的博客、教程、库... 欢迎查阅
Github Issue | 钉钉群 | 微信群 |
---|---|---|
issues | ![]() |
![]() |