React项目
React项目全程实录#电商项目#react+UmiJS+Antd Pro#React全套技术#融职教育出品
React商城实战：https://www.bilibili.com/video/BV1i5411c7xp
P1 01_01 项目演示#融职教育
P2 01_02技术栈和开发环境#融职教育
技术栈
React 17.0.0
Git
UmiJS 3.2
Ant Design V4
Ant Design Pro V4
RESTful API
开发环境
node v10.13.0
npm 6.13.4
yarn 1.15.2
Git
Google Chrome 80.0
http://ruanyifeng.com/blog/2014/05/restful_api.html
api https://www.showdoc.com.cn/1207745568269674/6094279351627422
P3 01_03 Api文档说明#融职教育
P4 01_04 课程安排#融职教育
P5 02_01 UmiJS 快速上手#融职教育
umijs.org/zh-CN|
umi.js 3.x
https://v3.umijs.org/zh-CN/docs/getting-started
yarn create @umijs/umi-app
umijs 3.4.5
yarn = yarn install
node 版本 https://blog.csdn.net/qq_43408367/article/details/130320382
react17
P6 02_02 UmiJS 目录结构#融职教育
P7_02_03 UmiJS 常用配置#融职教育
P8_02_04 UmiJS 路由#融职教育
P9 02_05 UmiJS 页面跳转#融职教育
P10 02_06 UmiJS HTML模板#融职教育
jsx tsx 都是react
路由最好不用嵌套三层以上
{ path: '/user/one/:id?', component: '@/pages/index' },
加?可选择 可加不加
P11 02_07 UmiJS 使用Mock数据#融职教育
umi 集成了请求 类似axios
学mock
P12_02_08 UmiJS 整合Dva#融职教育
dva 首先是一个基于 reduxG 和 redux-saga 的数据流方案，然后为了简化开发体验，dva 还额外内置了 react-router 和 fetchG，所以也可以理解为一个轻量级的应用框架。
dvajs.com/guide/
https://v3.umijs.org/zh-CN/plugins/preset-react
P13 02_09 UmiJS运行时配置#融职教育
P14 02_10 UmiJS Umi Ul#融职教育
UI添加模板 小改 区块
https://v3.umijs.org/zh-CN/docs/use-umi-ui
P15 02_11 UmiJS 总结#融职教育 整体文件
P16 03_01 AntdPro安装与体验#融职教育
pro.ant.design/index-cn
v4.0
yarn create umi 创建的是新版 或者安装旧版
yarn create umi@3.5.0 不行了
npm i -g create-umi@0.27.0
create-umi myapp umi3
https://pro.ant.design/zh-CN/docs/getting-started/ 安装集成 有俩版本选择
npm i @ant-design/pro-cli@3.1.0 -g
pro create antd_pro_simple
P17_03_02 AntdPro 目录结构#融职教育
P18 03_03 AntdPro 路由和页面#融职教育
P19_03_04 AntdPro 布局和组件#融职教育
基于umi/antd封装高级组件UI: https://procomponents.ant.design/components/layout/
P20 03_05 AntdPro Mock和联调#融职教育
umi区块必须在/根 antd_pro随便方便
P21 03_06 AntdPro 区块#融职教育
https://beta-pro.ant.design/docs/assets-cn
需要手动开启UMI UI
tyarn add @umijs/preset-ui -D
https://umijs.org/zh-CN/docs/use-umi-ui
区块已经移除
P22 03_07 TodoList 初始化与列表#融职教育
P23 03_08 TodoList 服务端获取数据#融职教育
P24 03-09 TodoList 使用Model共享数据#融职教育
P25 03_10 TodoList 添加数据#融职教育
P26 03_11 TodoList修改状态#融职教育
P27_03_12 TodoList 总结#融职教育
P28 04_01项目 去除多余的内容#融职教育
P29 04_02 项目Logo和文字替换#融职教育
P30 04-03项目封装网络请求#融职教育
antd_pro_shop_admin
antd_pro_shop_admin search
gitee.com/luwnto/dashboard/projects
融职商城后台管理系统
Luwnto / shop_admin
https://gitee.com/DWL716/shop_admin/tree/master
https://gitee.com/wu_jihao/shop_admin/tree/master https://www.ningzhi.online
https://gitee.com/harvery_liang/antd_pro_shop_admin 55 route component: '@/pages/DashBoard',
https://gitee.com/huang-darui/antd_pro_shop_admin
showdoc.com.cn/1207745568269674?page_id=6090117842667636
31
webstorm2019
npm run dev 不走mock
P31 04_04 项目 使用Git版本控制#融职教育
P32 05_01 项目 登录#融职教育
P33 05_02项目用户信息#融职教育
P34 05_03 项目 退出#融职教育
P35 05_04项目首页统计#融职教育
git commit -m 'add:' 增加功能
fix: 修复bug
ref: 重构
git log 查看历史记录 有id
回退 git reset --hard id
git reflog 所有的进度的
P36 06_01项目用户列表1#融职教育
P37 06_02 项目 用户列表 2#融职教育
P38 06_03 项目 禁用与启用#融职教育
P39 06_04 项目 用户添加 1#融职教育
P40 06_05 项目 用户添加 2#融职教育
P41 06_06项目用户更新#融职教育
{
is?<Demo/>:''
}
控制卸载组件
P42 06_07 项目 封裝添加和更新#融职教育
P43 07-01项目商品列表#融职教育
P44 07_02 项目 上架与推荐#融职教育
P45 07_03 项目 添加商品页面#融职教育
P46 07-04项目处理商品分类#融职教育
P47 07_05 项目 阿里OSS简介#融职教育
为什么要用云存储：
1.存储费用低，不占用服务器磁盘空间
2.流量费用低，上传或下载不占用服务器带宽
怎么去用：
硬盘 网络带宽 贵 用 oss
P48 07_06 项目 封装OSS上传 1#融职教育
antd 组件有oss事例
1 https://laravel-book-shop.oss-cn-beijing.aliyuncs.com/
2021-04-02
P49 07-07项目 封装OSS上传 2#融职教育
P50 07-08项目封装OSS上传3#融职教育
受控组件 非受控组件
加个标签 不关联
P51 07_09项目 使用富文本编辑器#融职教育
https://ant-design.antgroup.com/docs/react/recommendation-cn
社区找找
github.com/margox/braft-editor
文档 yuque.com/braft-editor/be/lzwpnr
P52 07-10项目处理富文本编辑器表单验证#融职教育
设置表单字段
P53 07_11项目富文本编辑器集成阿里OSS上传#融..
P54 07_12项目 商品添加#融职教育
P55 07_13项目商品更新#融职教育
P56 07_14 项目总结和优化#融职教育
P57 08_01练习 分类管理模块#融职教育
P58 08_02 练习 订单管理模块#融职教育
P59 08_03 练习 轮播管理模块#融职教育
P60 08_04练习收货、物流、评价#融职教育
61
vue3.hks.cool
P61 09-01发布阿里云服务器#融职教育
P62 09-02发布部署上线#融职教育
P63 09-03发布域名解析与HTTPS证书#融职教育
云服务器ECS
建议配置虚拟主机 可以配置多个项目
nginx -t 检测配置是否有问题
nginx -s reload 重启
FreeSSL.cn 免费的ssl https
配置443
配置nginx
浙公网安备 33010602011771号