koa+react+sequelize搭建博客后台(附源码)

coder_koala

发布于 2020-02-20 15:55:08

1.4K0

发布于 2020-02-20 15:55:08

文章被收录于专栏：程序员成长指北程序员成长指北

使用koa+react+sequelize搭建博客系统，这篇文章讲述koa+sequelize的开发过程。支持增删改查等功能。

代码放到了github：https://github.com/liangchaofei/cms上，可以直接下载运行

先看下系统界面

koa使用狼叔提供的koa-generate脚手架工具。

安装koa-generate

    npm install -g koa-generator

建立项目并初始化

    koa cms_blog
    cd cms_blog
    npm install

安装成功后项目目录如下：

运行并在浏览器打开127.0.0.1:3000即可

    npm run dev

开始项目搭建：采用MVC模式

在根目录下创建controllers,modules,schema,config文件夹
- controllers:写控制逻辑部分
- modules：写sql部分
- schema：写数据表部分
- config：写数据库配置部分

数据库用nodejs的ORM数据库：Sequelize

在config目录下创建db.js，配置数据库

    const Sequelize = require('sequelize')
    const sequelize = new Sequelize('koa','root','123456',{
        host:'localhost',
        dialect:'mysql',
        operatorsAliases:false,
        dialectOptions:{
            //字符集
            charset:'utf8mb4',
            collate:'utf8mb4_unicode_ci',
            supportBigNumbers: true,
            bigNumberStrings: true
        },
        pool:{
            max: 5,
            min: 0,
            acquire: 30000,
            idle: 10000
        },
        timezone: '+08:00'  //东八时区
    })
    
    module.exports = {
        sequelize
    }

创建一个文章表article

名称	类型	长度	主键
id	int	11	true
title	varchar	255	false
authore	varchar	255	false
content	varchar	255	false
createdAt	datetime	0	false
updatedAt	datetime	0	false

在schema文件夹下创建article.js

    const blog = (sequelize, DataTypes) => {
    return sequelize.define('blog',{
        id:{
            type:DataTypes.INTEGER,
            primaryKey:true,
            allowNull:true,
            autoIncrement:true
        },
        title: {
            type: DataTypes.STRING,
            allowNull: false,
            field: 'title'
        },
        author: {
            type: DataTypes.STRING,
            allowNull: false,
            field: 'author'
        },
        content: {
            type: DataTypes.STRING,
            allowNull: false,
            field: 'content'
        },
        createdAt:{
            type:DataTypes.DATE
        },
        updatedAt:{
            type:DataTypes.DATE
        }
    },{
        /**
         * 如果为true，则表示名称和model相同，即user
         * 如果为fasle，mysql创建的表名称会是复数，即users
         * 如果指定的表名称本身就是复数，则形式不变
         */
        freezeTableName: false
    })
}
module.exports =  blog

数据库部分配置好后，开始接口开发，采用restful api模式

get请求：数据查询

在routes目录下创建article.js

    const router = require('koa-router')() // 使用koa-router 来指定接口路由
    const BlogControll = require('../controllers/blog') // 引入Control部分
    
    // 使用router.get 提供get请求
    router.get('/blog', BlogControll.getAllBlog)

在controllers目录下创建article.js

    const BlogModel = require('../modules/blog') // 引入model
    
    static async getAllBlog(ctx) {
        const { query } = ctx.request; // 获取前端传来的参数
        try {
            let data = await BlogModel.getAllBlog(query) // 获取查询的数据
            ctx.response.status = 200;
            ctx.body = {
                code: 200,
                msg: 'success',
                data,
                count: data.length
            }
        } catch (err) {
            ctx.response.status = 412;
            ctx.body = {
                code: 412,
                msg: 'error',
                err,
            }
        }
    }

在modules目录下创建article.js

    const db = require('../config/db') // 引入数据库配置
    const Sequelize = db.sequelize; // 使用sequelize
    const Blog = Sequelize.import('../schema/blog.js')
    Blog.sync({force: false})
    
    
    static async getAllBlog(query){
        // 通过使用sequelize 的findAll 来查询数据
        // 根据query参数实现查询关键词功能
        return await Blog.findAll({
            where: {
                ...query
            },
            order:[
                ["id","DESC"]
            ],
        })
      
    }

至此一个get请求的接口就写好了，运行npm run dev，打开浏览器运行http://127.0.0.1:3000/api/v1/blog 就可以看到数据了。

可以在后台系统中查看

post请求：数据添加

在routes/article.js

    router.post('/blog', BlogControll.addBlog)

在controllers/article.js

    static async addBlog(ctx) {
        let req = ctx.request.body;
        if (req.title && req.author && req.content) {
            try {
                let data = await BlogModel.addBlog(req)
                ctx.response.status = 200
                ctx.body = {
                    code: 200,
                    msg: 'success',
                    data
                }
            } catch (err) {
                ctx.response.status = 412
                ctx.body = {
                    code: 412,
                    msg: 'error',
                    err
                }
            }
        } else {
            ctx.response.status = 416
            ctx.body = {
                code: 416,
                msg: '参数不全',
            }
        }
    }

在module/article.js

    static async addBlog(data){
        return await Blog.create({
            title: data.title,
            author: data.author,
            content: data.content,
        })
    }

至此添加文章接口就写好了，可以在后台系统添加

delete请求：删除文章

在routes/article.js

    router.delete('/blog/:id',BlogControll.deleteBlog)

在controllers/article.js

    static async deleteBlog(ctx) {
        let id = ctx.params.id; // 根据id删除
        if (id) {
            try {
                let data = await BlogModel.deleteBlogs(id)
                ctx.response.status = 200;
                ctx.body = {
                    code: 200,
                    msg: 'success',
                }
            } catch (err) {
                ctx.response.status = 412;
                ctx.body = {
                    code: 412,
                    msg: 'err',
                    err
                }
            }
        } else {
            ctx.response.status = 416;
            ctx.body = {
                code: 416,
                msg: '缺少id',
            }
        }
    }

在module/article.js

    static async deleteBlogs(id){
        return await Blog.destroy({
            where:{
                id
            }
        })
    }

至此删除文章接口就写好了，可以在后台系统删除

put请求：编辑文章

在routes/article.js

    router.put('/blog', BlogControll.updateBlog)

在controllers/article.js

    static async updateBlog(ctx) {
        let req = ctx.request.body;
        try {
            let data = await BlogModel.updateBlog(req)
            ctx.response.status = 200;
            ctx.body = {
                code: 200,
                msg: 'success',
            }
        } catch (err) {
            ctx.response.status = 412;
            ctx.body = {
                code: 412,
                msg: 'error',
                err
            }
        }
    }

在module/article.js

    static async updateBlog(data){
        const {id,title,author,content} = data;
        console.log('id',id)
        return await Blog.update(
            {
                title,
                author,
                content,
                id
            },
            {
                where:{
                    id
                }
            }
        )
    }