既然前端工程化是基於NodeJS,那麼選擇NodeJs作先後端分離部署也是理所應當的。其實只須要實現靜態資源和代理的話,用nginx纔是最好的選擇,用NodeJS是爲了往後能進一步在服務端上實現自動構建或服務端渲染。javascript
同步到交流學習社區:https://www.mwcxs.top/page/438html
小聲說:小程序代碼結構前端
在根目錄下執行java
npm init -y
npm init
用來初始化生成一個新的 package.json
文件。它會向用戶提問一系列問題,若是你以爲不用修改默認配置,一路回車就能夠了。
若是使用了 -f
(表明force
)、-y
(表明yes
),則跳過提問階段,直接生成一個新的 package.json
文node
接下來執行mysql
npm i koa koa-static http-proxy-middleware async koa-router koa-bodyparser koa-json mysql -s
第一個koa
是基於NodeJS的服務器框架,nginx
第二個koa-static
是基於Koa的插件,咱們須要用它創建靜態資源服務器,sql
第三個http-proxy-middleware
是用於作代理的插件。數據庫
有了這三個東西,咱們就能夠搭建出最簡單的前端服務器了。npm
第四個async是用於異步操做
第五個koa-router是路由控制器,實現路由中間件
第六個koa-bodyparser是post提交數據中間件
第七個koa-json是get提交數據的中間件
第八個mysql是數據庫中間件
-s 使用 --save 安裝的插件,責被寫入到 dependencies 對象裏面去,dependencies 是須要發佈到生產環境的
項目根目錄下會多出一個package.json,一個
package-lock.json,一個node_modules
,咱們不用管這三個,而是在根目錄下創建一個api文件夾,做爲後端服務接口。
一、在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;
二、在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;
三、在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退出,不然服務又會停掉。
此時的項目結構