学React已经有一段时间了,期间都是接触到的都是些概念性的东西和一些简单的demo示例。想要更加熟悉框架以及能够安全的运用在项目中,还需要真正的实战练习,无意中看到支付宝withAnt商店小程序,于是就用刚学的Umi,React,Antd-mobile照着写了起来。
项目都是在利用业余时间写的,仅仅用于学习使用。
项目中涉及到用户登陆,jwt token验证,商品列表,商品详情,用户信息,商品下单,订单,收货地址等。。。,并对webpack做了一些必要的优化配置。
此项目为用户客户端,另外有基于Umi React Antd的后台数据管理界面和基于node egg mongodb的服务端系统,此客户端和后台管理界面需要结合服务端使用,否出会出现找不到数据的异常。
注:本项目主要用户学习目的,因此包含了一些和之前写的其他无关的代码(包括一个投票相关的和仿别人的考试答题的demo,具体可看项目目录和路由配置),商店项目代码主要在shop目录下以及其他的一些带有shop字样的代码如models下的shop.tsx。
项目源码基于 GPL 协议,仅仅用于 Umi React 框架的学习,请勿作为商业用途。 请抵制一切盗版侵权行为,请尊重作者的劳动果实!
该项目主要以 UMI + DVA 为底层框架,以Ant Design Mobile为 UI 组件库,包含完整的前端工程化实践。
部分代码及功能参考于 Ant Design pro
- 框架:React,Umi,Dva
- 组件库:antd-mobile
- 开发语言:TypeScript
- Ajax 库:Dva fetch
- 样式:Less
- 界面适配:postcss
|-- config # umi 配置,包含路由,构建等配置
|-- mock # 本地模拟数据
|-- public
| |-- favicon.png # favicon
|-- src #
| |-- assets # 本地静态资源
| |-- components # 业务通用组件
| |-- layout # 通用布局
| |-- models # 全局 dva model
| |-- services # 后台接口服务
| |-- pages # 业务页面入口和常用模板
| |-- e2e # 集成测试用例
| |-- global.less # 全局样式
| |-- global.tsx # 全局 JS
| |-- theme.js
|-- tests # 测试工具
|-- .gitignore # git忽略文件
|-- .editorconfig # 编辑器代码风格配置
|-- .eslintignore # eslint忽略文件
|-- .eslintrc # eslint规则
|-- .prettierignore # 代码风格配置忽略文件
|-- .prettierrc # 代码风格配置文件
|-- .stylelintrc # 样式风格配置文件
|-- package.json
|-- README.md
// 安装项目
$ git clone --depth=1 https://github.com/stopry/withantShop_react_client.git my-project
$ cd my-project
// 安装依赖
$ yarn or npm install
// 运行
$ yarn start or npm run start # 访问 http://localhost:8066
// 打包
$ yarn build or npm run build
更多命令可在package.json中查看
如果对您有帮助,您可以点右上角 "Star" 支持一下 谢谢! ☺
或者您可以 "follow" 一下,我会不断开源更多的有趣的项目
开发环境 windows10 64位 Chrome 73.0.3683.86 nodejs 10.19.0 npm 6.14.2
本项目会不定期更新完善 @auther 809746561@qq.com