手把手带你熟悉一个前端项目

Posted 2022-10-16 WF帆少

带你快速上手项目，以https://github.com/duxianwei520/react为例

项目文档

自行阅读项目文档，了解项目的整体内容。

package.json

自行阅读代码，了解项目所用的技术栈。

该项目主要技术栈是react + redux + antd + webpack + axios

目录结构

app 核心代码

    |- apis 网络请求

    |- components 公共组件

    |- configs 配置文件

        |- router.config.js 路由配置

    |- images 图片资源

    |- middleware 中间件

    |- mocks 模拟数据

    |- pages 页面代码

    |- redux 状态代码

    |- resoucre 其他资源

    |- styles 样式资源

    |- client.js 入口文件

    |- index.html 入口文件

scripts 构建代码

test 测试代码

路由

根据路由配置文件router.config.js找到url对应的组件。

该项目采用hash模式的路由。具体目录结构如下：

pages

    |- base

        |- app.js /

        |- example.js /desk$/index（默认路由） 

    |- menu

        |- echars.js /echarts

        |- editor.js /editor

    |- set

        |- moduleManage /set$/moduleManage 

        |- roleManage /set$/roleManage 

        |- userManage /set$/userManage 

公共组件

阅读公共组件可以让我们避免重复开发组件

components

    |- draw

    |- logo

    |- tableList

工具库

阅读工具库可以让我们避免重复编写工具函数

网络请求

网络请求里面有些项目做了很多配置，例如csrf防御、请求失败处理、请求成功处理、日志处理等配置，需要仔细阅读。而该项目这里没有做过多的配置，这一块不深入学习。

配置

config

    |- ajax.js 网络请求配置文件

请求

这里记录了请求的url对应的服务器地址，方便未来定位bug。

/mock/usercenter/* 开发环境：http://localhost:1111    测试环境：http://localhost:1111    生产环境：http://localhost:1111

............

数据流

这里的数据流主要是看redux的数据管理。该项目使用的redux来管理数据，所以重点关注redx。

该项目使用redux-action库来生成action和reducer，利用装饰器@connect将action和reducer连接起来，利用this.props.dispatch来分发action到store中。

redux

    |- actions

        |- common.js

        |- tabList.js

    |- reducers

        |- commom.js

        |- index.js

        |- tabList.js

详细页面

自行阅读页面代码。