React + Koa + Mysql 构建个人博客

前言

由于一直在用 vue 写业务，为了熟悉下 react 开发模式，所以选择了 react。数据库一开始用的是 mongodb，后来换成 mysql 了，一套下来感觉 mysql 也挺好上手的。react-router、koa、mysql 都是从0开始接触开发的，期间遇到过很多问题，印象最深的是 react-router 参考官方文档配置的，楞是跑不起来，花费了好几个小时，最后才发现看的文档是v1.0, 而项目中是v4.3， 好在可参考的资料比较多，问题都迎刃而解了。

博客介绍

  • 前端项目通过 create-react-app 构建，server端通过 koa-generator 构建
  • 前后端分离，博客页、后台管理都在 blog-admin 里，对含有 /admin 的路由进行登录拦截
  • 前端: react + antd + react-router4 + axios
  • server端: koa2 + mysql + sequelize
  • 部署：server端 运行在 3000 端口，前端 80 端口，nginx设置代理

预览地址

web端源码

server端源码

喜欢或对你有帮助，欢迎 star

功能

  • [x] 登录
  • [x] 分页
  • [x] 查询
  • [x] 标签列表
  • [x] 分类列表
  • [x] 收藏列表
  • [x] 文章列表
  • [x] 发布文章时间轴
  • [x] 文章访问次数统计
  • [x] 回到顶部
  • [x] 博客适配移动端
  • [ ] 后台适配移动端
  • [ ] 对文章访问次数进行可视化
  • [ ] 留言评论
  • [ ] 渲染优化、打包优化

效果

标签

分类

收藏

文章

编辑

博客页

响应式


运行项目

前端

git clone https://github.com/gzwgq222/blog-admin.git
cd blog-admin
npm install

localhost:2019

server 端

本地安装 mysql，新建 dev 数据库

git clone https://github.com/gzwgq222/blog-server.git
cd blog-server
npm install

server 端

前端 react + antd 开发，较为平缓，在此就不再叙述。主要记录下 koa + mysql 相关事宜

全局安装 koa-generator

npm install -g koa-generato

创建 node-server 项目

koa node-server

安装依赖

cd node-server
npn install

运行

npm dev

出现 Hello Koa 2! 表示运行成功

先看routes文件

index.js

const router = require('koa-router')()
router.get('/', async (ctx, next) => {
  await ctx.render('index', {
    title: 'Hello Koa 2!'
  })
})
router.get('/string', async (ctx, next) => {
  ctx.body = 'koa2 string'
})
router.get('/json', async (ctx, next) => {
  ctx.body = {
    title: 'koa2 json'
  }
})
module.exports = router

users.js

const router = require('koa-router')()
router.prefix('/users')
router.get('/', function (ctx, next) {
  ctx.body = 'this is a users response!'
})
router.get('/bar', function (ctx, next) {
  ctx.body = 'this is a users/bar response'
})
module.exports = router

分别访问下列路由

localhost:3000/string
localhost:3000/users
localhost:3000/bar

大概你已经猜到了，koa-router 定义路由访问时返回相应的内容，那我们只需要把相应的 data 返回去就行了，只是我们的数据得从数据库查询出来。

本地安装 mysql

项目安裝 mysql

npm install mysql --save

项目安裝 sequelize

sequelize 是 ORM node框架，对SQL查询语句的封装，让我们可以用OOP的方式操作数据库

npm install --save sequelize

新建 sequelize.js，建立连接池

const Sequelize = require('sequelize');
const sequelize = new Sequelize('dev', 'root', '123456', {
  host: 'localhost',
  dialect: 'mysql',
  operatorsAliases: false,
  pool: {
    max: 5,
    min: 0,
    acquire: 30000,
    idle: 10000
  }
})
sequelize
  .authenticate()
  .then(() => {
    console.log('MYSQL 连接成功......');
  })
  .catch(err => {
    console.error('链接失败:', err);
  });
// 根据模型自动创建表
sequelize.sync()
module.exports = sequelize

创建 model、controllers 文件夹 定义model：定义表结构；controller：定义对数据库的查询方法

以 tag.js 为例

model => tag.js

const sequelize = require('../sequelize ')
const Sequelize = require('sequelize')
const moment = require('moment') // 日期处理库
// 定义表结构
const tag = sequelize.define('tag', {
  id: {
    type: Sequelize.INTEGER(11), // 设置字段类型
    primaryKey: true, // 设置为主建
    autoIncrement: true // 自增
  },
  name: {
    type: Sequelize.STRING,
    unique: { // 唯一
      msg: '已添加'
    }
  },
  createdAt: {
    type: Sequelize.DATE,
    defaultValue: Sequelize.NOW,
    get() {
      // this.getDataValue 获取当前字段value
      return moment(this.getDataValue('createdAt')).format('YYYY-MM-DD HH:mm')
    }
  },
  updatedAt: {
    type: Sequelize.DATE,
    defaultValue: Sequelize.NOW,
    get() {
      return moment(this.getDataValue('updatedAt')).format('YYYY-MM-DD HH:mm')
    }
  }
},
{
  // sequelize会自动使用传入的模型名（define的第一个参数）的复数做为表名 设置true取消默认设置
  freezeTableName: true
})
module.exports = tag

controller => tag.s 定义了 create、findAll、findAndCountAll、destroy 方法

const Tag = require('../model/tag')
const Op = require('sequelize').Op
const listAll = async (ctx) => {
  const data = await Tag.findAll()
  ctx.body = {
    code: 1000,
    data
  }
}
const list = async (ctx) => {
  const query = ctx.query
  const where = {
    name: {
      [Op.like]: `%${query.name}%`
    }
  }
  const {rows:data, count: total } = await Tag.findAndCountAll({
    where,
    offset: (+query.pageNo - 1) * +query.pageSize,
    limit: +query.pageSize,
    order: [
      ['createdAt', 'DESC']
    ]
  })
  ctx.body = {
    data,
    total,
    code: 1000,
    desc: 'success'
  }
}
const create = async (ctx) => {
  const params = ctx.request.body
  if (!params.name) {
    ctx.body = {
      code: 1003,
      desc: '标签不能为空'
    }
    return false
  }
  try {
    await Tag.create(params)
    ctx.body = {
      code: 1000,
      data: '创建成功'
    }
  }
  catch(err) {
    const msg = err.errors[0]
    ctx.body = {
      code: 300,
      data: msg.value + msg.message
    }
  }
}
const destroy = async ctx => {
  await Tag.destroy({where: ctx.request.body})
  ctx.body = {
    code: 1000,
    desc: '删除成功'
  }
}
module.exports = {
  list,
  create,
  listAll,
  destroy

在 routers 文件夹 index.js 中引入定义好的 tag controller ，定义路由

const router = require('koa-router')()
const Tag = require('../controllers/tag')
// tag
router.get('/tag/list', Tag.list)
router.get('/tag/list/all', Tag.listAll)
router.post('/tag/create', Tag.create)
router.post('/tag/destroy', Tag.destroy)
module.exports = router
/* 如每个 route 是单独的文件，可以使用 router.prefix 定义路由前缀
router.prefix('/tag')
router.get('/list', Tag.list)
router.get('/list/all', Tag.listAll)
router.post('/create', Tag.create)
router.post('/destroy', Tag.destroy)
*/

因为 app 中 已经引入 routers 中的 index.js 调用了 app.use了，所以此处不需再引入
在浏览器里输入 localhost:3000/tag/list 就可以看到返回的数据结构了，只不过 data 为空数组，因为我们还没添加进去任何数据
到这里，model 定义表结构、sequelize操作数据库、koa-router 定义路由 这一套流程算是完成了，其他表结构，接口 都是一样定义的

总结

之前没有写过 node server 和 react，算是从零搭建该博客，踩了一些坑，也学到了很多东西，譬如react 开发模式、react-router、sequelize 操作mysql的crud、koa、nginx的配置等等。

麻雀虽小，也是一次完整的前后端开发体验，脱离了浏览器的限制，像海贼王一样，打开了新世界的大门，寻找 onepiece ......

web端源码

server端源码

详细的 server 端说明

后续会在个人博客中添加关于此次部署文章

Links

初尝 react + Node，错误之处还望斧正，欢迎提 issue

原文地址：https://www.cnblogs.com/hi-shepherd/p/10635353.html

时间： 2024-10-10 20:36:22

React + Koa + Mysql 构建个人博客的相关文章

CentOS6系统部署mysql+php+wordpress博客系统

部署wordpress博客系统在不同的系统中可能就稍有不同,但是大同小异,所以今天就以CentOS6系统为例进行wordpress博客系统的部署. 在部署之前首先要进行软件的安装,在配置好软件源之后,使用以下命令: CentOS 7中执行: yum install httpd  php  php-mysql  mariadb-server CentOS 6中执行: yum install httpd  php  php-mysql  mysql-server 安装完之后,首先使用以下命令重启ht

JSP+Servlet+JDBC+Mysql实现的博客系统

本文存在视频版本,请知悉 项目简介 项目来源于:https://gitee.com/nanpingping/jsp-blog 这次分享个人博客系统,界面简洁大气,功能齐全,是不可多得的比较容易的系统,非常适合毕业设计或者课程设计. 本系统基于JSP+Servlet+JDBC+Mysql.涉及技术少,易于理解,适合JavaWeb初学者学习使用. 难度等级:简单 技术栈 编辑器 IntelliJ IDEA 2019.1.1 (Ultimate Edition) 前端技术 基础:html+css+Ja

一款基于vue.js 和node构建个人博客项目

前言 本项目是一款个人学习的博客项目,主要是为了学习vue2 和 node.js.另外涉及到MySQL redis nginx 等技术栈知识 项目地址 预览地址 (PC或者手机) > 注意:PC端支持markdown编辑博客,但是手机端不支持编辑,仅支持查看博客内容 博客预览地址:node后台版本 预览账号 账号:test 密码:123 技术栈 前端:html.css.sass.ES6.webpack.vue-cli.vue2.vuex.vue-router.axios.element-ui 后

通过hexo+NexT构建静态博客

一般的教程网上有很多,主要讲下我遇到的问题以及解决方法: 一.hexo建立的文档无法上传github deploy: type: git repository: https://github.com/pcd12321/pcd12321.github.io.git branch: master 上面是我成功的代码,一般的教程里会让你type: github会发生错误,解决方法为:来源为:http://blog.163.com/gis_warrior/blog/static/193617173201

vuepress-theme-reco + Github Actions 构建静态博客，部署到第三方服务器

最新博客链接 Github链接 查看此文档前应先了解,vuepress基本操作 参考官方文档进行配置: vuepress-theme-reco VuePress SamKirkland / FTP-Deploy-Action 最终效果 最终效果链接 思路 下载vuepress-theme-reco官方的主题模板(脚手架),再根据自己的需要进行相应的修改,再根据自己的服务器配置Github Actions文件,最后上传到Github,触发Github Actions自动构建部署到第三方服务器.以后

MySql链表语句--博客园老牛大讲堂

为什么链表?--博客园老牛大讲堂 因为表与表之间有关系,而且查询时需要两张表的某些数据. 链表的前提是:表与表之间必须设置主外键吗? 不是的,其实表与表之间不需要设置主外键关系,用数据库语句就可以实现链表查询,删除,修改,增加等操作. 为什么要设置主外键呢? 通常我们看到表与表之间有关系,常常设置主外键.为什么?其实这样做是为了规范!假设一个不了解你表结构的人,都能够任意的修改你的外键.那这个表就不严谨了. 我们到底设不设主外键呢? 分情况:1.如果表结构简单,少量的表.逻辑不复杂.那么这个就不

【Hexo】Hexo+Github构建个人博客 （三）：添加皮肤主题

一.选择主题 选择你自己喜欢的主题 参考: 1.Hexo官网主题 2.知乎:有哪些好看的 Hexo 主题? 二.配置主题 1.我选择了hexo-theme-yilia这个主题,简洁大方,功能齐全: 这是他的地址:https://github.com/litten/hexo-theme-yilia 2.具体添加方法: 安装 git clone https://github.com/litten/hexo-theme-yilia.git themes/yilia 配置 修改hexo根目录下的 _co

express4构建个人博客

安装node 1 $ npm install -g express 2 $ npm install -g express-generator 3 $ express myBlog 4 $ cd myBlog && npm install 5 $ npm start npm start 之后就跑起来了,打开浏览器localhost 3000端口 http://localhost:3000/ ---------------------------------------------------

【Hexo】Hexo+Github构建个人博客 （二）：创建Hello World

一.生成项目,初始化 在项目目录下创建好Blog目录,比如我的是  D:\projects\web\arvin0-blog ,然后执行命令 hexo init 如图: 创建完成之后的结果,如图: 二.生成静态页面 执行命令 hexo generate (hexo g 也可以) 如图: 三.启动本地服务 启动本地服务,进行文章预览调试,执行命令  hexo server 如图: 打开浏览器,输入http://localhost:4000 效果如图: 四.把本地hexo文件部署到Github上 1.