大廠技術(shù) 高級前端 Node進階

點擊上方程序員成長指北，關(guān)注公眾號

回復(fù)1，加入高級Node交流群

使用koa+react+sequelize搭建博客系統(tǒng)，這篇文章講述koa+sequelize的開發(fā)過程。支持增刪改查等功能。

代碼放到了github：https://github.com/liangchaofei/cms上，可以直接下載運行

先看下系統(tǒng)界面

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模式

在根目錄下創(chuàng)建controllers,modules,schema,config文件夾

controllers:寫控制邏輯部分
modules：寫sql部分
schema：寫數(shù)據(jù)表部分
config：寫數(shù)據(jù)庫配置部分

數(shù)據(jù)庫用nodejs的ORM數(shù)據(jù)庫：Sequelize

在config目錄下創(chuàng)建db.js，配置數(shù)據(jù)庫

    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'  //東八時區(qū)
    })
    
    module.exports = {
        sequelize
    }

創(chuàng)建一個文章表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文件夾下創(chuàng)建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創(chuàng)建的表名稱會是復(fù)數(shù)，即users
         * 如果指定的表名稱本身就是復(fù)數(shù)，則形式不變
         */
        freezeTableName: false
    })
}
module.exports =  blog

數(shù)據(jù)庫部分配置好后，開始接口開發(fā)，采用restful api模式

get請求：數(shù)據(jù)查詢

在routes目錄下創(chuàng)建article.js

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

在controllers目錄下創(chuàng)建article.js

    const BlogModel = require('../modules/blog') // 引入model
    
    static async getAllBlog(ctx) {
        const { query } = ctx.request; // 獲取前端傳來的參數(shù)
        try {
            let data = await BlogModel.getAllBlog(query) // 獲取查詢的數(shù)據(jù)
            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目錄下創(chuàng)建article.js

    const db = require('../config/db') // 引入數(shù)據(jù)庫配置
    const Sequelize = db.sequelize; // 使用sequelize
    const Blog = Sequelize.import('../schema/blog.js')
    Blog.sync({force: false})
    
    
    static async getAllBlog(query){
        // 通過使用sequelize 的findAll 來查詢數(shù)據(jù)
        // 根據(jù)query參數(shù)實現(xiàn)查詢關(guān)鍵詞功能
        return await Blog.findAll({
            where: {
                ...query
            },
            order:[
                ["id","DESC"]
            ],
        })
      
    }

至此一個get請求的接口就寫好了，運行npm run dev，打開瀏覽器運行http://127.0.0.1:3000/api/v1/blog 就可以看到數(shù)據(jù)了。

可以在后臺系統(tǒng)中查看

post請求：數(shù)據(jù)添加

在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: '參數(shù)不全',
            }
        }
    }

在module/article.js

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

至此添加文章接口就寫好了，可以在后臺系統(tǒng)添加

delete請求：刪除文章

在routes/article.js

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

在controllers/article.js

    static async deleteBlog(ctx) {
        let id = ctx.params.id; // 根據(jù)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
            }
        })
    }

至此刪除文章接口就寫好了，可以在后臺系統(tǒng)刪除

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
                }
            }
        )
    }

至此更新文章接口就寫好了，可以在后臺系統(tǒng)更新

總結(jié)：以上通過koa+sequelize實現(xiàn)了增刪改查的接口。代碼放到了github：https://github.com/liangchaofei/cms上，可以直接下載運行。如果這篇文章對您有幫助，感謝star

Node 社群

我組建了一個氛圍特別好的 Node.js 社群，里面有很多 Node.js小伙伴，如果你對Node.js學(xué)習(xí)感興趣的話（后續(xù)有計劃也可以），我們可以一起進行Node.js相關(guān)的交流、學(xué)習(xí)、共建。下方加考拉好友回復(fù)「Node」即可。

“分享、點贊、在看” 支持一波??

koa+react+sequelize搭建博客后臺(附源碼,適合入門)