一个类似ThinkPHP的Node.js框架——QuickNode

QuickNode

Node.js从QuickNode开始，让restful接口开发更简单！

PHP的MVC

作为一名曾经的PHP开发者，我也有过三年多的thinkphp使用经验，那是我学习PHP接触的第一个MVC框架。ThinkPHP目前也算是国内最流行的PHP框架了吧，于我说来，该框架给我留下的最深的印象就是在创建新控制器和新方法时候的简单便捷，以及她经典的/Controller/Action路由模式。

大学毕业后，我的工作转向了前端，但作为一个全栈，我依然负责一些后端开发和服务器运维，再使用了Node之后，我逐渐爱上了这一门简洁而有精彩的语言，尤其是ES7的标准之后，TS的加成，让我对JS，TS家族产生了浓厚的依赖，现在不管是做网站的API，手机app还是脚本我都会首选JS。

有过Node开发经验的童鞋应该知道，Node的web框架虽然更加简单，体积也更加小，但伴随而来的也是模块化带来的凌乱的包，凌乱的代码组织，繁琐的配置，当你下载express之后依然需要针对请求接口来手动配置路由，十分麻烦。对于刚刚从php转投node阵营的朋友需要一些学习成本的。并且这让我一个习惯了使用MVC框架的PHP程序员表示十分头大。此时最迫切的需求就是一个PHP程序员习惯的框架，类似ThinkPHP这样的。

为此我专门使用Node.js开发了一个仿ThinkPHP的简易MVC框架，说他是MVC其实也不严格，这货更像是一个node版的ThinkPHP，具备了ThinkPHP基本的功能，同时具备了restful的接口风格。

开始使用

我在github发布了一个QuickNode，这就是我所述的仿ThinkPHP的Node MVC 框架。 但不是严格意义的MVC框架，所以我不会这么定义这个框架。

QuickNode的使用方式和ThinkPHP如出一辙。

安装Node

安装最新版的node.js，基操，不做赘述，推荐官网下载。https://nodejs.org

git clone代码基架

git clone https://github.com/devilyouwei/QuickNode.git

安装package

进入下载好的项目目录

npm install

好了，不报错的话就是所有的外包安装好了。

配置MySQL

进入Config目录，配置db.json用以连接mysql，可以是本地也可以远程的mysql服务器。

开始使用

node ./Server.js

使用supervisor调试

推荐使用supervisor，因为node太蠢了，每次修改代码都要重新运行命令，supervisor可以自动监视代码的变动，一旦修改了代码，即可自动运行最新的代码，方便调试

npm -g install supervisor

supervisor ./Server.js

运行成功

样例

这里给出一些案例，带各位新手体验一下如何创建一个API，以及如何访问这个API，如何连接数据库，如果你是PHP程序员的话，你会发现这和ThinkPHP真的非常相似。

创建控制器

首先在Controller目录中创建一个文件，例如，Test.js，这就是一个JS的类文件，同样也是一个控制器。

代码如下：

class Test{
    static async test(req,res){
        return res.json({status:1,data:'test data',msg:'Successful data loaded'})
    }
}
module.exports=Test

接下打开浏览器进入：http://localhost:3000/Test/test

新控制器访问成功了。

连接数据库

在连接数据库前，请先配置好db.json文件，确保获得访问数据库的权限。

接下来示范连接数据库的方式：

const db = require('./private/DB.js')
const $ = require('../private/tool.js')

class Config{
    static async query(req,res){
        let data = await db.query('select * from languages')
        return res.json({status:1,data:data,msg:'languages'})
    }
    static async insert(req,res){
        let body=req.body // 获取post和get传来的数据
        // 新增
        let data={
               title:body.title,
               rank:body.rank,
               time:$.date2stamp()
        }
        // 插入数据
        let id = await db.insert('type',data)
        if(id>0) return res.json({status:1,msg:'插入成功'})
        else return res.json({status:0,msg:'插入失敗，數據寫入錯誤'})
    }
}
module.exports=Config

更多数据库的玩法请参考：https://www.npmjs.com/package/mysql

前端传参

QuickNode允许GET和POST传参，POST传参建议使用form-data形式，前端需要使用new FormData()来初始化一个formdata的数据格式。

无论GET还是POST都是在req.body中获取数据。

const db = require('./private/DB.js');

class Config{
    static async index(req,res){
        let id = req.body.id
        return res.end(`Id is:${id}`)

    }
}
module.exports=Config

前端代码参考(vue)：

import { Toast, Dialog } from 'vant'
import Mobile from 'mobile-detect'
import axios from 'axios'
import {i18n} from './plugins/i18n.js'

//const URL = 'http://localhost:3000' // 測試服
const URL = 'https://api.qbite.us' // 正式服
export default {
    // use axios
    async post (ctl, act, data = {}, load = false) {
        if(!ctl || !act) throw new Error('no controller or action')
        let url = `${URL}/${ctl}/${act}`
        let form = new FormData()
        for (let i in data) form.append(i, data[i])

        form.append('user', JSON.stringify(this.getUserInfo()))
        if (load) this.loading(load)
        try{
            let res = await axios({
                method: 'post',
                headers: { 'content-type': 'application/x-www-form-urlencoded' },
                url: url,
                data: form,
                responseType: 'json',
                changeOrigin: true // 允许跨域
            })
            res = res.data
            res.status = parseInt(res.status) || 0
            if(res.status == -1){
                localStorage.removeItem('user')
                await this.alert(i18n.t('noLogin'))
                return location.replace(`/?did=${localStorage.getItem('did')}`)
            }
            return res
        }catch(e){
            throw e
        }finally{
            if (load) this.loading(false)
        }
    },
    
    // use fetch, it can't compatible with old browser
    async post2(ctl='',act='',data={},load=false){
        if(!ctl || !act) throw new Error('no controller or action')
        let url = `${URL}/${ctl}/${act}`
        // 表單信息
        let form = new FormData()
        for (let i in data) form.append(i, data[i])
        // 餐桌ID
        form.append('did',localStorage.getItem('did')) // 桌子

        let request = new Request(url, {method: 'POST', body: form})
        try {
            if (load) this.loading(true)
            let res = await fetch(request).then(res => res.json())
            res.status = parseInt(res.status) || 0
            return res
        } catch (err) {
            throw err
        } finally {
            if (load) this.loading(false)
        }
    }
}

这里介绍了两种post方法，一种使用axios，一种使用最新的fetch API，无论哪种都要使用formdata格式来传输数据。

后记

QuickNode是从Qbyte LLC(US)公司商业项目“Qbite”中开源出来的一个后端框架，框架本身十分精简和轻便，适合做restful接口，模式类似国内很多传统的MVC框架。

Qbite是一个美国的线上线下点餐系统，目前所使用的后端框架支持就是QuickNode。QuickNode会在Qbite的持续使用中得到测试和更新。

该MVC框架目前尚未加入Model一块，后续项目中会加入Model，各位小伙伴也可以fork我们项目提供方案和贡献。

感谢各位对QuickNode的支持，喜欢的朋友请帮忙star一下下，你的star就是我们的动力，很高兴您使用我们的项目。

https://github.com/devilyouwei/QuickNode