网站建设智推网,响应式布局的缺点,ui设计师工作内容怎么写,国外代码开源网站古人学问无遗力#xff0c;少壮工夫老始成。 纸上得来终觉浅#xff0c;绝知此事要躬行。 —— 陆游《《冬夜读书示子聿》》 系列文章目录
项目搭建App登录及网关App文章自媒体平台#xff08;博主后台#xff09;内容审核(自动) 文章目录 系列文章目录一、项目介绍1.页面… 古人学问无遗力少壮工夫老始成。 纸上得来终觉浅绝知此事要躬行。 —— 陆游《《冬夜读书示子聿》》 系列文章目录
项目搭建App登录及网关App文章自媒体平台博主后台内容审核(自动) 文章目录 系列文章目录一、项目介绍1.页面展示⑴. 登录注册⑵. 商城⑶. 购物车⑷. 个人中心 2.业务功能3.技术栈⑴. 客户端⑵. 服务端 二、搭建 mongodb 数据库1.安装 mongodb 数据库⑴. 软件安装⑵. 终端命令 2.数据库可视化 Robo 3T 三、创建项目1.创建项目2.上传至Gitee仓库3.优化项目结构⑴. CDN引入⑵. 精简代码结构 4.页面展示 一、项目介绍
1.页面展示
⑴. 登录注册 ⑵. 商城 ⑶. 购物车 ⑷. 个人中心 2.业务功能
登录、注册商城模糊搜索、属性筛选(多选)、价格区间筛选支付流程购物车 - 填写地址 - 订单 - 支付 - 查看订单状态个人中心 会员个人信息管理员个人信息、创建分类、创建商品、订单列表
3.技术栈
⑴. 客户端
脚本TypeScript前端框架React路由管理React-router-dom用户界面Antd全局状态管理Redux异步状态更新redux-saga路由状态同步connected-react-router网络请求Axios调试工具redux-devtools-extension
⑵. 服务端
脚本Node.js数据库Mongodb数据库可视化Robo 3T 二、搭建 mongodb 数据库
1.安装 mongodb 数据库
⑴. 软件安装
百度网盘资源 https://pan.baidu.com/s/1u8D6glRwKugpEilXcrleHA?pwdreac ⑵. 终端命令
# 查看mongoDB信息
mongo# 停止MongoDB服务(以管理员身份运行终端)
net stop mongodb
# 启动MongoDB服务(以管理员身份运行终端)
net start mongodb2.数据库可视化 Robo 3T
百度网盘资源 https://pan.baidu.com/s/138VJd9XHdZA4Z_W0aCkD_w?pwdreac 三、创建项目
1.创建项目
# 创建项目
npx create-react-app ecommerce-front --template typescript
# 进入目录
cd ecommerce-front
# 安装依赖(connected-react-router可能会因为版本安装错误)
npm install antd axios moment redux react-redux react-router-dom redux-saga connected-react-router redux-devtools-extension types/react-redux types/react-router-dom2.上传至Gitee仓库
Gitee仓库地址 https://gitee.com/yuan0_0/react-ecommerce
# 初始化本地仓库
git init# 将当前所有内容添加
git add .# 提交日志
git commit -m “init”# 在本地仓库命名为 origin并且赋予远程地址
git remote add orign https://gitee.com/yuan0_0/edu817.git# 提交本地仓库至 远程仓库的主分支
git push orign master3.优化项目结构
⑴. CDN引入
编辑 public\index.html 文件
...
link relstylesheet hrefhttps://cdn.bootcdn.net/ajax/libs/antd/4.8.3/antd.min.css /⑵. 精简代码结构
删除项目初始文件 src\App.css、 src\App.test.tsx、 src\index.css、 src\logo.svg、 src\reportWebVitals.ts、 src\setupTests.ts
编辑 src\index.tsx 文件
import React from react;
import ReactDOM from react-dom/client;
import App from ./App;const root ReactDOM.createRoot(document.getElementById(root) as HTMLElement
);
root.render(React.StrictModeApp //React.StrictMode
);编辑 src\App.tsx 文件
import React from react;function App() {return return divh2Hello World/h2/div
}export default App;4.页面展示
