React知乎日报项目（一）

留奇

已于 2023-07-12 19:43:26 修改

阅读量187

点赞数

分类专栏： React从入门到中级文章标签： react.js

于 2023-05-09 18:49:42 首次发布

本文链接：https://blog.csdn.net/lqiqil/article/details/130205064

版权

项目架构

项目基础概括及初步创建

知乎日报-WebApp zhihu

技术栈：create-react-app、React18、redux/react-redux「也可以使用mobx或者reduxjs/toolkit」、react-router-dom V6、Fetch、less、AntdMobile…

从零开始构建React项目「本项目不采用任何系解决方案（例如：淘系），基于最纯正的React实现开发」

基于create-react-app创建工程化项目

$ npm i create-react-app -g
$ create-react-app 项目名
-----------------------------
$ yarn eject 暴露webpack配置项
修改脚手架默认的配置
  + 配置less：less/less-loader@8
  + 配置别名 @ 代表 src 目录「选配」
  + 配置浏览器兼容
  + 配置客户端启动服务的信息
  + 配置跨域代理：http-proxy-middleware
  + 配置REM响应式布局的处理：lib-flexible、postcss-pxtorem【仅移动端，PC端有自己的响应式处理方案】
  + 配置打包优化
  + ...

准备一些项目开发必备的材料
src/api/http.js：fetch请求的二次封装
src/assets：
- reset.min.css 清除浏览器默认样式
- images 静态资源图片
- utils.js 自己封装的常用方法库
- …
配置好REM响应式布局 && 样式处理
配置路由管理
配置redux架子
其它的基础框架配置
逐一开发项目，注意组件的抽离封装
开发完毕后
- 项目优化
- 封装提取
- 内部测试
- 部署上线

知乎日报-后端 zhihu_admin

后端的数据接口分为两部分

从知乎日报官方实时拉取数据「新闻、新闻详情、新闻的评论数…」
自己研发的个人中心系统「登录/注册、发送验证码、个人信息获取和修改、收藏体系…」

后端技术栈：

Node、Express
数据存储：我采用json文件的方式代替了专业的数据库存储「mongodb、MySQL」

如何启动和配置更改
@1 跑环境
@2 在package.json中，修改后端服务的配置项
“config”: {
“server”: 7100, //后端启动服务器的端口号
“secret”: “****”, //和JWT算法相关的
“maxAge”: “7d”
}
@3 API.txt 接口文档 | code.txt 存储发送的手机验证码
@4 启动后端
$ node server.js 终端窗口关闭，启动的服务器就会停止
OR
$ pm2 start server.js --name ZHIHU 基于pm2持久管理服务
@5 验证后端是否启动成功
http://127.0.0.1:7100/news_latest 可以获取数据，则说明启动成功

启动后台：

在这里插入图片描述

public/index.html、图标文件favicon.ico等，删删改改：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8" />
  <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>知乎日报-52lkk</title>
</head>

<body>
  <div id="root"></div>
</body>

</html>

在这里插入图片描述

REM响应式处理

移动端响应式布局开发中<meta name="viewport" content="width=device-width, initial-scale=1.0">是一定要设置的；如果不设置，浏览器会按照980的宽度渲染页面；手机宽度不足980，整个页面就会整体缩小。
(width=device-widthHTML的渲染宽度和设备宽度保持一致
initial-scale=1.0初始缩放比例：既不放大也不缩小)
比较全的写法：public/index.html
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" />

自己手动实现REM响应式布局

步骤：

找参照的比例（例如设计稿的比例 —> 一般都是750px），在这个比例下，给予html.fontSize一个初始值（浏览器默认最小字体大小12px）

//750px的设计稿中，1REM=100px
//未来我们需要把从设计稿中测量出来的尺寸（PX单位）转换为REM单位去设置样式，基准设置为100px是为了方便计算（若设置为10px则小于浏览器默认最小字体大小，将以12px为准，会出现字体大小不符合预期情况）
    html{
	    font-size:100px;
    }

我们需要根据当前设备的宽度，计算相对于设计稿750px来讲缩放的比例；从而让REM的转换比例也跟着缩放【rem和px的换算比例一改，则所有之前以REM为单位的样式也会跟着缩放】
我们一般还会给页面设置最大宽度【750px】，超过这个宽度，不再让REM比例继续变大了；内容居中，左右两边空出来即可-外包root

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport"
        content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" />
    <title>REM练习-手动实现rem响应式布局</title>
    <!-- import css : 清除浏览器的默认样式 -->
    <link rel="stylesheet" href="src/assets/reset.min.css">
    <style>
        html {
     
            font-size: 100px; //1
        }

        html,
        body {
     
            height: 100%;
            background: #f4f4f4;
        }

        .root {
     
            margin: 0 auto;
            max-width: 750px;
            height: 100%;
            background: #FFF;
        } //3

        .box {
     
            width: 3.28rem;
            height: 1.64rem;
            line-height: 1.64rem;
            text-align: center;
            font-size: .4rem;
            background: lightblue;
        } //1
    </style>
    <script>
        /* 计算当前设备下，REM和px的换算比例 */ //2
        (function () {
     
            const computed = () => {
     
                // 获取设备的宽度
                let html = document.documentElement,
                    devcieW = html.clientWidth,
                    designW = 750
                if (devcieW >= designW) {
     
                    html.style.fontSize = '100px'
                    return
                } //3
                let ratio = devcieW * 100 / designW
                html.style.fontSize = ratio + 'px'
            }
            computed()
            window.addEventListener('resize', computed)
        })()
    </script>
</head>

<body>
    <div class="root">