既然前端工程化是基於NodeJS,那么選擇NodeJs做前后端分離部署也是理所應當的。其實只需要實現靜態資源和代理的話,用nginx才是最好的選擇,用NodeJS是為了日后能進一步在服務端上實現自動構建或服務端渲染。
同步到交流學習社區:https://www.mwcxs.top/page/438
一、目前只有前端的目錄結構

小聲說:小程序代碼結構
二、創建一個簡單后端服務器
在根目錄下執行
npm init -y
npm init 用來初始化生成一個新的 package.json 文件。它會向用戶提問一系列問題,如果你覺得不用修改默認配置,一路回車就可以了。
如果使用了 -f(代表force)、-y(代表yes),則跳過提問階段,直接生成一個新的 package.json 文

接下來執行
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退出,否則服務又會停掉。
此時的項目結構

