【源码】基于 React 的生活服务与商品展示系统

项目简介

本项目是基于 React 技术栈开发的综合性生活服务与商品展示系统。包含首页、搜索、个人等多个功能模块，具备城市管理、推荐列表瀑布流布局、搜索列表及商品详情展示、登录状态管理等功能，借助 React 相关技术和第三方库，为用户带来良好交互体验。

项目的主要特性和功能

1. 首页功能
   • 城市管理：支持用户选择不同城市，获取对应城市的服务和商品信息。
   • 推荐列表：采用瀑布流布局展示推荐内容，提升浏览体验。
2. 搜索功能
   • 搜索列表：用户可输入关键词搜索，展示相关结果。
   • 商品详情：点击搜索结果商品，查看详细信息。
3. 个人功能
   • 登录状态管理：有效管理用户登录状态，保障信息安全。
4. 公共组件
   • 顶部搜索：提供便捷搜索入口。
   • 底部导航：方便在不同页面间切换。
   • 上拉加载：实现内容分页加载，提升页面性能。
   • 回到顶部：用户可快速回到页面顶部。

安装使用步骤

项目环境搭建

使用 React 脚手架创建项目： sh npx create-react-app my-app cd my-app

配置 Less 支持

1. 拉取配置文件 在项目根目录执行： sh npm run eject 若修改文件后再执行 eject 命令报错，可采用以下解决方案： 方案 1：访问项目根目录，显示隐藏文件，删除 .git 文件夹，再次执行 eject。 方案 2：先进行 git commit 操作： sh git add . git commit -m “init” npm run eject
2. 安装依赖 可使用淘宝镜像加速安装，先全局安装 cnpm： sh npm install -g cnpm --registry=https://registry.npm.taobao.org 再使用 cnpm 安装 less 和 less-loader： sh cnpm install less less-loader --save-dev
3. 修改配置文件 仿照根目录下 config -> webpack.config.js 文件中 Sass 的配置方式，修改样式文件正则表达式和相关配置。
4. 测试配置 删除 src 目录下其他脚手架生成的 js、css 文件，只保留 index.js，增加一个 style.less 文件观察效果。
5. 配置公共变量 安装依赖： sh cnpm install style-resources-loader --save 修改 config -> webpack.config.js 文件中 less-loader 配置的 use 属性，加入 style-resources-loader。

配置 Axios 网络请求

1. 安装依赖 sh cnpm install --save axios
2. 修改配置文件 见 utils -> request.js。

实现首页展示

1. 配置路由 v5->v6
   • 安装依赖 sh npm install --save react-router-dom
   • 设置路由 根据 react-router-dom 版本变化，按照新规范修改路由配置。
   • 路由嵌套 根据 react-router-dom v6 的要求，修改路由嵌套写法。
   • 页面跳转 在 v6 中使用 useNavigate 替代 withRouter 实现页面跳转。
2. 配置样式
   • iconfont 下载 icon 代码后解压，将相关文件加入项目目录，在项目 index.js 中引用 css 文件，挑选相应图标并获取类名应用于页面。
   • less 在每个组件的文件夹中创建 index.jsx 和 style.less，public -> common.less 中是共享的 css 属性。
3. 底部导航 使用 react-router-dom 中的 NavLink 进行页面跳转，注意 exact="true"。
4. 顶部导航 rem 自适应方法见 public->index.html。
5. 首页轮播 安装依赖： js npm install --save react-swipeable-views npm install --save react-swipeable-views-utils
6. 服务器提供数据 安装依赖： js npm install --save experss npm install --save cors

Redux 配置

1. 添加依赖 sh npm install --save redux npm install --save react-redux npm install --save-dev redux-devtools-extension 同时安装 chrome 插件：Redux DevTools。
2. 核心概念及配置
   • reducer：创建 reducer 函数，传入 state 和 action，使用 combineReducers 组合多个 reducer。
   • store：创建 store，使用 Provider 传递 store。
   • action：创建 action creator 函数，在组件中使用 useDispatch 派发 action。

内存泄漏处理

1. state：在每次 setState 操作前判断组件是否已卸载。
2. 清除事件绑定：在 useEffect 的返回函数中移除事件监听。
3. 清除定时器：在 useEffect 的返回函数中清除定时器。
4. 取消请求：使用 AbortController 钩子取消请求。

下载地址

点击下载 【提取码: 4003】【解压密码: www.makuang.net】