%20(2).svg)
项目简介
本项目是基于 React 16.8、Egg.js、MongoDB 和 Zarm 构建的电商 Web 应用，采用前后端完全分离架构，后端提供接口，前端负责数据渲染。适合新手学习电商网站开发流程，代码仍在持续完善。
项目的主要特性和功能
主要特性
- 前后端完全分离，后端仅提供接口。
- 前端使用 React Hooks 实现，结合 Redux 进行状态管理。
- 后端采用 Egg.js 框架，使用 Mongoose 对 MongoDB 数据库进行建模。
- 运用 Zarm 作为 UI 组件库。
功能
- 页面展示：涵盖商城首页、商品分类页、登录/注册/找回密码页面、个人中心、商品详情、我的商品收藏、购物车、地址管理、最近浏览、支付页面和全部订单等页面。
- 业务功能：实现商城首页和商品分类数据的查询与展示、用户注册/登录/找回密码、商品详情展示、商品收藏与取消收藏、加入购物车、个人地址管理、最近浏览记录缓存、购物车商品结算、订单支付与查询以及城市选择与搜索等功能。
安装使用步骤
前提条件
确保本地 Node 版本在 8 以上，且已安装并打开 MongoDB 数据库连接。
后端启动
- 进入
egg目录，打开命令行窗口，运行cnpm i安装依赖。 - 运行
npm run dev启动本地服务。 - 打开
http://127.0.0.1:7002/data，将数据自动导入数据库（首次运行项目时需进行此操作，看到控制台打印成功后才能继续）。
前端启动
- 进入
react目录，打开命令行窗口，运行npm i安装依赖。 - 运行
npm run dev启动项目。
访问项目
在浏览器中打开 http://localhost:8010 即可访问该电商 Web 应用。
接口说明
项目所用到的接口在 react 文件夹下 src 目录的 api 文件夹里面。
跨域处理
在前端目录 react 下的 src 目录下新建文件 setupProxy.js，添加如下代码可解决开发环境的跨域问题（7002 是后台服务端口）：
js
const proxy = require('http-proxy-middleware')
module.exports = function (app) {
app.use(proxy('/api',
{
target: 'http://localhost:7002',
pathRewrite: {
"^/api": ""
},
changeOrigin: true,
}))
// app.use(proxy('/*.svg', { target: 'http://localhost:5000/' }))
}
请求接口时直接写后台接口地址，不用加 /api 前缀，/api 在 axios 里面请求拦截里面统一封装。
下载地址
点击下载 【提取码: 4003】【解压密码: www.makuang.net】