【源码】基于 React 和 Node 的知乎日报 Web 应用系统

项目简介

本项目是一个基于 React 和 Node 的知乎日报 Web 应用系统，包含前端 Webapp 与后端服务。前端利用 create - react - app 构建工程化项目，运用 React、Redux、React - Router - DOM 等技术；后端采用 Node 和 Express 搭建，提供数据接口。系统可从知乎官方获取实时新闻等数据，还配备个人中心系统，能实现登录、注册等功能。

项目的主要特性和功能

前端特性

• 基于 create - react - app 创建项目，完成 less、axios、别名、跨域代理等多项 webpack 配置。
• 提供丰富开发材料，有 axios 二次封装、清除默认样式 CSS、静态资源图片和常用工具函数。
• 配置 REM 响应式布局，保障页面在不同移动设备上等比例缩放。
• 用路由管理实现页面跳转，通过 Redux 进行状态管理。

后端特性

• 提供两类接口，一类用于从知乎官方获取实时数据，另一类用于个人中心系统，包括登录、注册、发送验证码等功能。
• 使用 json 文件替代专业数据库进行数据存储。

安装使用步骤

前端

1. 下载并解压项目源码文件。
2. 进入项目根目录，执行 yarn install 或 npm install 安装依赖。
3. 可按需修改 create - react - app 的 webpack 配置。
4. 执行 yarn start 或 npm start 启动项目。

后端

1. 下载并解压后端源码文件。
2. 执行 yarn install 或 npm install 安装依赖。
3. 在 package.json 中修改后端服务配置项，如服务器端口、JWT 算法的 secret 等。
4. 启动后端服务：
   • 直接运行：执行 node server.js 启动后端，关闭终端窗口服务会停止。
   • 持久化管理：执行 pm2 start server.js --name zhihu 用 pm2 管理服务。
5. 验证后端是否启动成功：在浏览器访问 http://127.0.0.1:7100/news_latest，若能获取到数据则表示启动成功。

注意：本项目为简化版本，使用 json 文件存储数据，适合学习和演示。实际开发建议使用专业数据库。项目难点在于使用函数组件编写路由以避免使用 withRouter。

下载地址

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