# react参考项目

**Repository Path**: Roger88888/react-reference-project

## Basic Information

- **Project Name**: react参考项目
- **Description**: react参考项目
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2021-11-25
- **Last Updated**: 2021-11-27

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 这是官方脚手架react-app搭建的项目
- react端口为8081
- mock端口为3000
## 启动项目
1. 打开项目根目录，输入`yarn`命令下载项目依赖包(使用了yarn，所以需要yarn装需要的包)
2. 启动mock模拟后端,输入`yarn mock`
3. 启动react项目,输入`yarn start`
## 项目问题说明
1. 首次进入主页还在loading状态，这是loading状态没做好，此时可以点击登陆不受影响
2. 点击栏目的信息进入详情页后退出头尾组件没有加载出来，这是在主入口修改状态时没做好，重刷可以恢复正常
3. 详情页底部的布局不好看
4. 加载动画和mock都设置了延迟返回，模拟服务器情况，并非卡顿
## 目录说明
- config(配置文件)
  - webpackDevServer.config.js(webpack的配置文件，在里面的`proxy`写了代理服务器解决跨域问题)

- mock(模拟后台的数据)
  - 在package.json的scrip模块添加了`"mock": "node ./mock/app.js"`指令来启动mock

- newApp(参考的静态页面,不影响项目)

- public(静态资源)

- scripts(react解构出来的执行脚本) 
  - start.js(启动文件)
    - 可以在`DEFAULT_PORT`中修改项目端口

- src(开发环境)
  - api(服务,类似于vue的指令,组件可以调用服务完成前端到后端的请求)
    - news.js(操作信息)
    - user.js(操作用户)
  - assets(开发环境的静态资源)
  - components(通用组件)
    - button(按钮)
    - cell(单元格)
    - footer(尾部)
    - header(头部)
    - loading(加载中)
    - nav-bar(返回)
    - skeleton(骨架图)
    - uc-input(输入框)
    - uc-swiper(轮播图)
  - layouts(路由设计)
  - pages(页面)
    - column(栏目页)
    - detail(详情页)
    - follow(关注页)
    - home(主页)
    - login(登陆页)
    - no-page(丢失页)
    - reg(注册页)
    - user(个人页)
  - plugins(插件,在此项目中用了umi-request.js)
    - axios.js(axios拦截器)
    - umi-request.js(umi-request拦截器)
  - utils(工具)
    - formatTime.js(格式化时间)
- index.js(主文件入口)
- server.js(react连接服务器文件)


# 开发过程

## day01
项目组件
封装通用组件(button,loading)
 - 先决定功能,再写用法,根据用法来写组件功能
合并分支中修改了同一个文件,拉取分支后修改再合并

## day02
项目组件
封装通用组件(swipe...)
静态资源的路径`/`表示在根目录下的public文件夹
如果一个组件要使用路由创建, 那么这个组件必须包裹在`BrowserRouter`或者`HashRouter`中
使用老库的一些问题
 - 库版本选择当前项目使用的版本,下载不到的话选择同一个大版本的最新版本
 - 不支持模块化,没有构造器
   - 解决:模块化实际上是函数暴露出去,所以在最后把库里面的函数暴露出去即可(`export default 函数名`)
 - ESlint报错
   - 解决:ESlint是为了规范代码,对于不得不使用的老库来说按照ESlint规范修改老库代码代价太大,可以用`/* eslint-disable */`(后续代码排除检测)和`/* eslint-enable */`(后续代码启用检测)来局部关闭ESlint检查,不检查这段老库的代码

封装组件的步骤:
1. 确定组件的功能
2. 确定调用组件的形式
   1. 调用组件,只传必传参数(如果没有必传参数则可以不传任何数据)
   2. 调用组件,传可选参数
3. 根据调用形式写组件功能
   1. 填写默认值
   2. 约定传参属性
   3. 根据调用组件的形式写相应的结构
备注:所有想要在外引入的组件都需要暴露出去

## day03
项目
- 数据交互
  - mock模拟后台接口
  - 客户端代理
    - 反向代理，发给自己，然后在`webpackDevServer.config`中的`proxy`配置转发给创建的虚拟服务器
  - 拦截器axiso
    - 不会简化服务器返回的结果，需要自己处理
  - 拦截器umi-request
    - 简化服务器返回的结果
  - 封装服务api
    - 服务就是一个异步函数(异步函数需要处理的是前端到后端的请求,返回promise交由给组件), 返回promise，组件可以调用服务

- 编写页面
  - react解析标签`<jsx dangerouslySetInnerHTML={{__html:HTML字符的数据}}></jsx>`(危险数据的信任和转换)

- 在路由中处理头尾组件的显示和隐藏

- `pubsub-js`订阅token和发布loading
  - token
    - 在路由(`src/layouts/default/default.js`)中订阅和取消订阅loading事件
  - loading
    - 在拦截器中(`src/plugins/umi-request.js`)发布loading状态，在发起请求的时候开启loading状态，数据返回时关闭loading状态

## day04
分离式部署项目
- node代理(8081)
  - 分离mock
    - 修改app.js的端口为3333，因为服务器上有占用3000端口
    - 初始化mock的package.json`npm init -y`
    - 装mock运行需要的包`npm i mockjs json-server -S`
    - 修改package.json的脚本启动`"start": "node ./app.js"`
  - 新建空node(node代理)  
    - 新建一个node文件夹与准备上线的同级
    - 使用express脚手架建一个空node`express -e .`(当使用express命令时，提示“'express' 不是内部或外部命令，也不是可运行的程序或批处理文件。”参考文档:https://blog.csdn.net/weixin_40161974/article/details/99441790),并装相关依赖`npm i`
    - 启动node查看是否成功`npm start`
    - 修改端口为8081
    - node项目环境 下安装 http-proxy-middleware 中间件`npm i http-proxy-middleware --save`
    - 在app.js中配置这个中间件
    - history重刷问题
      - 在app.js最后的错误处理添加上接口处理错误
  - 分离react
    - 修改server.js的地址为真实服务器的地址
    - 打包项目中的react`yarn build`
    - 把打包好的文件拷贝到空的node的public下(静态资源托管)

- nginx代理(8082)
  - 在阿里云上的服务器上安装nginx`yum install nginx -y`
  - 修改nginx的端口
  - 在/etc/nginx/(默认安装到全局的话就是这个路径)目录下新建一个文件夹存放build之后的react文件，这里创建为react_proxy
  - 修改/etc/nginx/nginx.conf中的配置
    - 端口改为8082
    - 根文件改为/usr/share/nginx/react_proxy
    - 代理处理
      - 处理服务器转发
      - 处理 历史记录模式路由404后返回主页面