轮子篇：基于Node和React的全栈式架构

写在前面

花几天时间做了个小东西，不得不提，麻雀虽小，但五脏俱全，充分体现出一个全栈工程师在小项目上高效的产出能力 (^-^)。简单介绍下：

架构适宜

如果你是一个前端开发工程师，并且懂一点Node和数据库。有一天，你的老板逼你快速开发一个移动端的商城加一个管理后台，请不要慌张，装上我的轮子跑跑看。

快速搭建

本打算弄个脚手架工具，但是出于教学的目的，还是一步步地告诉大家怎么搭这个全栈式的框架。

用express生成服务端雏形

会点Node的应该对express不陌生，模版引擎我习惯使用ejs，所以执行下面命令：

$ express -e myapp && cd myapp && npm install

这样服务端的雏形就有了：

|----myapp
   |----bin/
   |----node_modules/
   |----public/
   |----routes/
   |----views/
   |----app.js
   |----package.json

设计和部署数据库

Mac 上推荐使用 MySQLWorkBench 设计和管理数据库，当然要是你够牛逼，不用GUI工具也行，直接敲命令也可以玩。设计好数据库表关系之后，导出.sql文件并生成数据库。

node连接mysql

node连接mysql需要用的三方的mysql库，先安装：

$ npm install mysql -save

不妨搞个配置文件：config.db.js

/**
 * @desc mysql数据库配置文件
 **/

var config = {
    host: 'localhost',
    port: 3306,
    user: 'root',
    password: '你的数据库密码',
    database: '你的数据库名称',
};

module.exports = config;

连连看

var mysql = require('mysql'),
    config = require('./config.db');
var con = mysql.createConnection(config);

也来耍耍MVC

虽然后端不是强项，但也不能太失水准，设计模式上怎么也搞个MVC，看新的目录结构：

|----myapp
   ....
   |----database/          /*管理数据模型（即数据模型）*/
      |----config.db.js    /*连接配置*/
      |----user.db.js      /*用户模型，以这个为例*/
   |----route/             /*路由+业务逻辑处理*/
      |----services/       /*业务逻辑处理（即控制器）*/
        |----user.ctrl.js  /*用户控制器，以这个为例*/
        |----index.js      /*默认路由*/
        |----api.js        /*API入口*/
      |----helper.js       /*后端使用的工具方法*/
   |----views/             /*模版文件（即视图）*/
      |----index.ejs       /*前台入口*/
      |----admin.ejs       /*后台入口*/

user.db.js举例

/**
 * @desc 用户 数据模型
 * @author Jafeney <692270687@qq.com>
 **/

var mysql = require('mysql'),
    helper = require('../routes/helper'),
    config = require('./config.db');

var con = mysql.createConnection(config);

/*用户模块 构造方法*/
var User = function(user) {
    this.props = user.props  //参数集合，借鉴react设计思想
};

/*获取全部数据,测试接口使用，正式上线时请关闭*/
User.prototype.getUserAllItems = function(callback) {
    var _sql = "select * from user where u_del=0";
    helper.db_query({
        connect: con,
        sql: _sql,
        name: 'getUserAllItems',
        callback: callback
    })
}

module.exports = User

helper.js放什么

其实后端开发过程是用到的工具方法都可以放进去，这里先举例3个常用的（当然有些方法前端也能使用，建议分开存放，方便以后的归并）

/**
 * @desc 工具模块
 * @author Jafeney <692270687@qq.com>
 **/
var crypto = require('crypto');
module.exports = {
    // 获取本地时间字符串
    getTimeString: function(date) {
   
        return date.getFullYear() + '-' + (date.getMonth() + 1) + '-' +
            date.getDate() + ' ' + date.getHours() + ':' + date.getMinutes() +
            ':' + date.getSeconds();
    },
    // MD5加密
    getMD5: function(str) {
   
        var md5 = crypto.createHash('md5');
        md5.update(str);
        return md5.digest('hex');
    },
    // 执行sql语句
    db_query(opt) {
        opt.connect.query(opt.sql, function(err, res) {
   
            if (err) {
                console.log(`${opt.name} err: + ${err}`);
            } else {
                console.log(`${opt.name} success!`);
                if (typeof(opt.callback) === 'function') {
                    opt.callback(err, res);
                }
            }
        });
    }
}

user.ctrl.js举例

/**
 * @desc 用户 控制器
 * @author Jafeney <692270687@qq.com>
 **/

var User = require('../../database/user.db');

module.exports = {
    // 模块初始化
    init: function(app) {
        app.get('/user', this.doGetUserAllItems)
    },
    // 获取所有用户信息
    doGetUserAllItems: function(req, res) {