皮蛋很白的博客

普通用户 Dashboard 页面// src\components\admin\Dashboard.tsximport { Col, Descriptions, List, Menu, message, Row, Typography } from 'antd'import { Link } from 'react-router-dom'import Layout from '../core/Layout'import { ShoppingCartOutlined, UserOutlined }

将产品添加到购物车定义方法// src\helpers\cart.tsimport { Product } from '../store/models/product'export interface CartItem extends Product { count: number}// 将产品添加到购物车export const addItem = (item: Product, next: () => void) => { let cart: CartItem[]

构建首页布局搜索布局// src\components\core\Search.tsximport { Button, Col, Divider, Form, Input, Row, Select } from 'antd'import ProductItem from './ProductItem'const Search = () => { return ( <> <Form layout="inline" in

创建添加分类组件创建组件文件// src\components\admin\AddCategory.tsximport { Button, Form, Input } from 'antd'import { Link } from 'react-router-dom'import Layout from '../core/Layout'const AddCategory = () => { const onFinish = (value: { name: string }) =&gt

创建导航菜单// src\components\core\Navigation.tsximport { Menu } from 'antd'import { Link } from 'react-router-dom'import { useSelector } from 'react-redux'import { AppState } from '../../store/reducers'import { RouterState } from 'connected-react-router'

页面预览该实战项目是（不怎么严谨的）电子商务网站。首页商品列表页面登录页面注册页面购物车列表支付完成页面Dashboard 页面普通用户页面购买历史页面资料更新页面管理员页面创建分类页面创建商品页面订单列表页面显示所有用户的订单客户端技术栈介绍脚本：TypeScript前端框架：React路由管理：react-router-dom用户界面：Ant Design全局状态管理：Redux一部状态更新：redux-saga路由状态同步：co

创建订单 Schema// models\order.jsconst mongoose = require('mongoose')const Product = require('./product')const Category = require('./category')// 创建快照类型// 克隆产品 Schemaconst snapshotProductSchema = Product.schema.clone()// 克隆分类 Schemaconst snapshopCate

支付宝开发工具介绍工具介绍电脑网站支付 - 支付宝文档中心 (alipay.com)调用流程沙箱环境接入指南 - 支付宝文档中心 (alipay.com)沙箱环境就是测试环境，提供一个测试用的应用，包含 APPID、密钥、支付账号、支付工具等按照指南接入即可每周日中午12点至每周一中午12点沙箱环境进行维护，期间可能出现不可用alipay-sdkalipay-sdk 是支付宝 NodeJS 版 的 服务端 SDK （通用版），用于实现本例的支付功能。网页&移动应用 -

Mongoose - ObjectIdMongoose 在创建 Schema 的时候默认配置一个 _id 属性，它的 SchemaType 是 mongoose.Schema.Types.ObjectId(等同于 mongoose.ObjectId)。当创建一个 document 的时候会自动地生成一个 _id 属性，值是 mongoose.Types.ObjectId实例化的对象。Mongoose 拒绝保存没有 _id 的文档。查询到的 _id 是一个对象，可以调到它的 toString() 方法

api-分类管理-创建分类api 设计基本信息Path： /category/create/:userIdMethod： POST请求参数Headers参数名称是否必须备注Authorization是认证token，格式 Bearer <JSON WEB TOKEN>Body参数名称是否必传类型说明name是String分类名称返回数据字段名称说明name分类名称_idmongoo

api 开发思路在 models 文件夹管理 mongoose Schema 和 Model在 controllers 文件夹管理 mongoose 操作在 routes 文件夹管理 api在 app.js 配置 api，基础路径是 /apiapi-用户管理-用户注册api 设计基本信息Path： /signupMethod： POST请求参数Body参数名称是否必传类型说明name是String昵称email是String邮箱地址（登录

服务端技术栈介绍脚本：Node.js数据库：MongoDB（安装教程）数据可视化：Robo 3T（安装教程）初始化服务器端项目# 创建项目文件夹mkdir ecommerce-endcd ecommerce-end# 生成 package.jsonnpm init -y创建初始目录结构├─ config # 存放应用配置文件├─ controllers # 存放 MongoDB 数据管理方法├─ helpers # 存放辅助函数├─ models # 存放 MongoDB