Nodejs 后端程序员使用 react+koa+mongodb+redis 开发个人技术博客，欢迎 star，欢迎 fork，一起学习

发布于 1周前 作者 yibo5220 来自 nodejs/Nestjs

Nodejs 后端程序员使用 react+koa+mongodb+redis 开发个人技术博客，欢迎 star，欢迎 fork，一起学习

react+koa+mongodb+redis 个人技术博客(博客地址: 博客地址)

说明:

  • 借鉴项目:React-Express-Blog-Demo,基础比较弱的可以先看下这个项目，说的比较详细，由于比较偏后端，所以前端这块改动的不多，主要是后端的一些改动，后面会依次贴出代码改动以及所遇到的一些问题跟解决方案

改动基本介绍，相关代码会贴出来并主要说一下:

项目结构介绍，只涉及后端，前端基本没啥改动，不懂得可以看下我借鉴的项目

api 接口整理

前端

前端后台评论管理功能

  • 这里跟别的文章管理没什么区别，主要的问题就在于 columns 这个数组对象需要放在组件里，否则无法获取 this 对象以及对应的 props，另外 antd 库，在使用 switch 组件的时候 defaultChecked 在面对 Pagination 换页时会出现状态无法更改，还是显示上一页的状态，这里需要使用 checked 属性，具体代码以及说明

前端第三方 github 登录功能

  • github 第三方登录在 react 上这种单页面实现的时候，会出现跨域问题，这里的话有两种解决办法，具体代码以及解决办法

前端文章评论功能

  • 这块是通过我上文所借鉴项目里的教程开发的，样式的话是采用 github 的 issue 结构，具体代码位于 blog/app/containers/comment 文件夹里，这里就不细说了，唯一需要注意的就是在评论或者点赞的时候需要更新 react state

后端

后端框架修改

  • 将框架由 express 改成了 koa2，具体的中间件的话可以查看 blog/server/api/apiServer.js

token+session 功能

  • 在后台中间件这里新增了 token 中间件(检测 token)跟 admin 中间件(检测是否为 admin),这里 token 中间件的处理流程是先检测请求路径是否需要验证 token,如果需要则检测其请求头上的 authorization 字段,满足的话进入路由，并且在结束后在其响应头上将 token 值添加到 Authorization 字段，这里如果前后端采用不同的端口会产生跨域问题，具体代码以及解决方案

后端数据库字段更改跟表添加

  • 这里就一些表字段更改就表添加，唯一需要注意的是 mongoose.model 这个方法在表名没有 s 的时候会自动加上,另外使用了 mongodb 的 aggregate,pipeline 等，具体代码以及方案

单元测试以及代码检查

  • 单元测试这里用的是 jest，原因的话主要由于它内嵌了断言等，并且支持 react，代码位于 blog/test 文件夹，目前只写了登录的测试接口，后面有时间再加上，代码检查的话采用的是 eslint 库，extends standard，后面加了一些自己的规则

log 模块

  • 这里在网上其实有别的方式来定义一个全局的错误变量，但是很可惜的是在 es5 里已经不再支持，这里我采用的是定义一个全局函数，当调用它的时候会产生一个错误，再通过正则来获取所在的代码行号跟文件信息，具体代码

环境

react [@16](/user/16).3.1
react-router [@4](/user/4).2.0
node [@8](/user/8).9.1
mongodb [@4](/user/4).0.2
webpack [@4](/user/4).4.1

运行

git clone https://github.com/oyosc/blog

npm install

npm run start-prod

独立打包

npm run build

pm2 方式启动

npm install pm2 -g

pm2 -i max start npm -- run start-prod-debug(这里的命令可以查看 package.json 文件)

开发数据库文件

地址: https://pan.baidu.com/s/1oLyvpJ3gwcgvTmSAjn9OJA 密码: bv1c

从零开始搭建项目

感兴趣的请移步我的博客

TODO

  • 后面有时间打算把推送也实现下，至于其他的再看吧，另外我个人在获取评论是否需要审核的时候，因为是直接从后端获取，这样会产生页面上会显示默认的审核状态，原因的话应该是 react state 还未生成，个人觉得可以用个定时器来实现，不知道还有没有别的解决办法

more

  • 由于一直是做后端程序员，所以搞起前端来感觉很麻烦，有问题什么的请提 issue,有时间的话会回答的，最后欢迎 star,欢迎 fork,大家一起学习

Harmonyos Next教程
3 回复

关于你的 todo, 一般 optimistic update 以后 还是要根据后端返回再 update 一次的


找到原因了，switch 组件中开始使用的是 defaultChecked(这个属性貌似有一些问题)，换成 checked 就好了

非常棒的项目选择！使用 Node.js 后端结合 React、Koa、MongoDB 和 Redis 来开发一个个人技术博客，既能够锻炼全栈开发能力，又能学习现代 Web 开发中的多个关键技术。以下是一些关于你项目的技术点简要介绍和示例代码，希望能进一步激发学习兴趣和讨论。

后端（Koa + MongoDB + Redis）

Koa 框架基本设置：

const Koa = require('koa');
const Router = require('koa-router');
const mongoose = require('mongoose');
const redis = require('redis');

const app = new Koa();
const router = new Router();

mongoose.connect('mongodb://localhost:27017/blog', { useNewUrlParser: true, useUnifiedTopology: true });

const client = redis.createClient();

// Example route
router.get('/', async (ctx) => {
  // Fetch data from MongoDB or Redis cache
  ctx.body = 'Hello, Koa with MongoDB and Redis!';
});

app
  .use(router.routes())
  .use(router.allowedMethods());

app.listen(3000, () => console.log('Server running on port 3000'));

前端（React）

React 部分可以通过 create-react-app 快速启动，之后可以使用 axios 或 fetch 来与 Koa 后端进行数据交互。

示例数据请求：

import axios from 'axios';

axios.get('http://localhost:3000/api/posts')
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error('Error fetching posts:', error);
  });

你的项目非常具有实践意义，期待看到更多功能和优化！Star 和 Fork 已经奉上，期待与你一起学习进步。

回到顶部