既然前端工程化是基於NodeJS，那麼選擇NodeJs做前後端分離部署也是理所應當的。其實只需要實現靜態資源和代理的話，用nginx才是最好的選擇，用NodeJS是為了日後能進一步在服務端上實現自動構建或服務端渲染。

同步到交流學習社群：https://www.mwcxs.top/page/438

一、目前只有前端的目錄結構

小聲說：小程式程式碼結構

二、建立一個簡單後端伺服器

在根目錄下執行

npm init -y

npm init 用來初始化生成一個新的 package.json 檔案。它會向用戶提問一系列問題，如果你覺得不用修改預設配置，一路回車就可以了。
如果使用了 -f

接下來執行

npm i koa koa-static http-proxy-middleware async koa-router koa-bodyparser koa-json mysql -s

第一個koa是基於NodeJS的伺服器框架，

第二個koa-static是基於Koa的外掛，我們需要用它建立靜態資源伺服器，

第三個http-proxy-middleware是用於做代理的外掛。

有了這三個東西，我們就可以搭建出最簡單的前端伺服器了。

第四個async是用於非同步操作

第五個koa-router是路由控制器，實現路由中介軟體

第六個koa-bodyparser是post提交資料中介軟體

第七個koa-json是get提交資料的中介軟體

第八個mysql是資料庫中介軟體

-s 使用 --save 安裝的外掛，責被寫入到 dependencies 物件裡面去,dependencies  是需要釋出到生產環境的

三、配置

專案根目錄下會多出一個package.json，一個package-lock.json，一個node_modules，我們不用管這三個，而是在根目錄下建立一個api資料夾，作為後端服務介面。

1、在api資料夾下新建一個app.js和mysql.js.

app.js內容如下

const Koa = require('koa');
const koaJson = require('koa-json');
const bodyParser = require('koa-bodyparser');
const path = require('path');
const http = require('http');
const fs = require('fs');
const async = require('async');
const query = require('./mysql.js');

const app = new Koa();

app.use(bodyParser());
app.use(koaJson());

app.use(async (ctx, next) => {
  ctx.execSql = query;
  await next();
});

// routes
fs.readdirSync(path.join(__dirname, 'routes')).forEach(function (file) {
  if (~file.indexOf('.js')) app.use(require(path.join(__dirname, 'routes', file)).routes());
});

app.use(function (ctx, next) {
  ctx.redirect('/404.html');
});

app.on('error', (error, ctx) => {
  console.log('something error ' + JSON.stringify(ctx.onerror))
  ctx.redirect('/500.html');
});

http.createServer(app.callback())
  .listen(8090)
  .on('listening', function () {
    console.log('server listening on: ' + 8090)
  });

mysql.js內容如下

const mysql = require('mysql');

const pool = mysql.createPool({
    host: '127.0.0.1',
    user: 'root',
    password: '123456',
    database: 'wx_contacts',
    connectionLimit: 10
})

let query = function (sql, values) {
    return new Promise((resolve, reject) => {
        pool.getConnection(function (err, connection) {
            if (err) {
                return reject(err);
            } else {
                connection.query(sql, values, (err, rows) => {
                    connection.release();
                    if (err) {
                        return reject(err)
                    } else {
                        return resolve(rows);
                    }
                })
            }
        })
    })
}

module.exports = query;

2、在api資料夾下新建一個routes資料夾，資料夾下建立index.js

存放路由配置，index.js內容如下

const router =  require('koa-router')();
const contact = require('../contact/index.js');


router.use('/contact', contact.routes(), contact.allowedMethods());

module.exports = router;

3、在api資料夾下新建一個contact資料夾，資料夾下建立index.js和contoller.js

index.js內容如下

const router = require('koa-router')();
const controller = require('./controller.js');

router.post('/login', controller.Login);

module.exports = router;

contoller.js內容如下

主要是介面呼叫的

/*
 * 登入
 */
exports.Login = async(ctx) => {
    let phone = ctx.request.body.phone || '';
    let psd = ctx.request.body.password || '';
    if (!phone || !psd) {
        ctx.body = {
            success: false,
            message: '手機號碼或密碼不能為空'
        };
        return false;
    }
    try {
        let result = await ctx.execSql(`select * from contact_user where phone = ? and password = ?`, [phone, psd]);
        if (result.length > 0) {
            ctx.body = {
                success: true,
                userID: result[0].id,
                message: ''
            };
        } else {
            ctx.body = {
                success: false,
                userID: 0,
                message: '賬號或密碼錯誤'
            };
        }
    } catch (err) {
        ctx.body = {
            success: false,
            userID: 0,
            message: err
        };
    }
}

四、執行

執行

node api/app.js

執行起來後，直接關掉終端即可，切不可Ctrl + C退出，否則服務又會停掉。

此時的專案結構