記一次 React + Koa + Mysql 構建我的博客

時間 2019-11-10

標籤一次 react koa mysql 構建我的博客欄目 React 简体版

原文原文鏈接

前言

因爲一直在用 vue 寫業務，爲了熟悉下 react 開發模式，因此選擇了 react。數據庫一開始用的是 mongodb，後來換成 mysql 了，一套下來感受 mysql 也挺好上手的。react-router、koa、mysql 都是從0開始接觸開發的，期間遇到過不少問題，印象最深的是 react-router 參考官方文檔配置的，楞是跑不起來，花費了好幾個小時，最後才發現看的文檔是v1.0, 而項目中是v4.3，好在可參考的資料比較多，問題都迎刃而解了。css

博客介紹

前端項目經過 create-react-app 構建，server端經過 koa-generator 構建
先後端分離，博客頁、後臺管理都在 blog-admin 裏，對含有 /admin 的路由進行登陸攔截
前端: react + antd + react-router4 + axios
server端: koa2 + mysql + sequelize
部署：server端運行在 3000 端口，前端 80 端口，nginx設置代理

預覽地址前端

web端源碼vue

server端源碼node

喜歡或對你有幫助，歡迎 starmysql

功能

登陸
分頁
查詢
標籤列表
分類列表
收藏列表
文章列表
發佈文章時間軸
文章訪問次數統計
回到頂部
博客適配移動端
後臺適配移動端
對文章訪問次數進行可視化
留言評論
渲染優化、打包優化

效果

分類

文章

編輯

博客頁

響應式

運行項目

前端react

git clone https://github.com/gzwgq222/blog-admin.git
cd blog-admin
npm install
複製代碼

localhost:2019ios

server 端nginx

本地安裝 mysql，新建 dev 數據庫git

git clone https://github.com/gzwgq222/blog-server.git
cd blog-server
npm install
複製代碼

server 端

前端 react + antd 開發，較爲平緩，在此就再也不敘述。主要記錄下 koa + mysql 相關事宜github

全局安裝 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 定義路由這一套流程算是完成了，其餘表結構，接口都是同樣定義的