【大众点评】—— 前端架构设计

最新推荐文章于 2024-08-01 08:00:00 发布

柳柳Elena

最新推荐文章于 2024-08-01 08:00:00 发布

阅读量696

点赞数

文章标签： react html restful vue python

本文链接：https://blog.csdn.net/qq_34235864/article/details/113749183

版权

本文探讨了前端架构在大众点评项目中的应用，重点介绍了前端的特殊性，如分散性和可控性，并通过功能路径展示了架构设计。文章还讨论了工程化准备，包括技术选型（React、React Router、Redux）、项目脚手架（Create React App）以及基本规范。此外，作者还阐述了状态模块定义、网络请求层封装和通用错误处理的抽象过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前言：正在学习react大众点评项目课程，学习react、redux、react-router构建项目。

一、前端架构是什么

前端架构的特殊性

前端不是一个独立的子系统，又横跨整个系统

分散性：前端工程化

页面的抽象、解耦、组合

可控：脚手架、开发规范等

高效：框架、组件库、Mock平台，构建部署工具等

抽象

页面UI抽象：组件

通用逻辑抽象：领域实体、网络请求、异常处理等

二、案例分析

功能路径

展示：首页->详情页

搜索：搜索页->结果页

购买：登录->下单->我的订单->注销

三、前端架构之工程化准备：技术选型和项目脚手架

技术选型考虑的三要素

业务满足程度

技术栈的成熟度(使用人数、周边生态、仓库维护等)

团队的熟悉度

技术选型

UI层：React

路由：React Router

状态管理：Redux

脚手架

Create React App

npx create-react-app dianping-react

四、前端架构之工程化准备：基本规范

基本规范

目录结构

构建体系

Mock数据

//likes.json

[
  {
    "id": "p-1",
    "shopIds": ["s-1","s-1","s-1"],
    "shop": "院落创意菜",
    "tag": "免预约",
    "picture": "https://p0.meituan.net/deal/e6864ed9ce87966af11d922d5ef7350532676.jpg.webp@180w_180h_1e_1c_1l_80q|watermark=0",
    "product": "「3店通用」百香果(冷饮)1扎",
    "currentPrice": 19.9,
    "oldPrice": 48,
    "saleDesc": "已售6034"
  },
  {
    "id": "p-2",
    "shopIds": ["s-2"],
    "shop": "正一味",
    "tag": "免预约",
    "picture": "https://p0.meituan.net/deal/4d32b2d9704fda15aeb5b4dc1d4852e2328759.jpg%40180w_180h_1e_1c_1l_80q%7Cwatermark%3D0",
    "product": "[5店通用] 肥牛石锅拌饭+鸡蛋羹1份",
    "currentPrice": 29,
    "oldPrice": 41,
    "saleDesc": "已售15500"
  },
  {
    "id": "p-3",
    "shopIds": ["s-3","s-3"],
    "shop": "Salud冻酸奶",
    "tag": "免预约",
    "picture": "https://p0.meituan.net/deal/b7935e03809c771e42dfa20784ca6e5228827.jpg.webp@180w_180h_1e_1c_1l_80q|watermark=0",
    "product": "[2店通用] 冻酸奶(小杯)1杯",
    "currentPrice": 20,
    "oldPrice": 25,
    "saleDesc": "已售88719"
  },
  {
    "id": "p-4",
    "shopIds": ["s-4"],
    "shop": "吉野家",
    "tag": "免预约",
    "p

最低0.47元/天解锁文章