全棧寶寶級教學(xué)—小程序前端+Express后端+MySQL數(shù)據(jù)庫（中）

??緊接上一節(jié)季二，這一篇我們主要講Express搭建蒂窒，這篇內(nèi)容會(huì)比較多龟劲，大家需要細(xì)心一點(diǎn)
??全棧寶寶級教學(xué)—小程序前端+Express后端+MySQL數(shù)據(jù)庫（上）
??全棧寶寶級教學(xué)—小程序前端+Express后端+MySQL數(shù)據(jù)庫（下）

四梢薪、Express搭建

?現(xiàn)在我們開始Express的安裝
?輸入以下命令(后面帶個(gè)-g 指全局安裝）：

sudo npm install express -g
sudo npm install express-generator -g
#查看express版本
express --version
#4.16.1

安裝express后

然后進(jìn)入當(dāng)前用戶文件夾下,并創(chuàng)建我們的項(xiàng)目“myProject”，命令如下

#進(jìn)入到當(dāng)前用戶目錄下
cd ~
#創(chuàng)建我們的express項(xiàng)目
express myProject
#查看當(dāng)前目錄下的所有文件
ls

查看項(xiàng)目結(jié)構(gòu)

已經(jīng)安裝好了宇姚，但是還需要安裝一些依賴匈庭，然后測試一下

#打開我們的項(xiàng)目文件夾，cd 然后打個(gè)m浑劳，按Tab鍵會(huì)自動(dòng)補(bǔ)全
cd myProject/
#安裝依賴
npm install 
#啟動(dòng)服務(wù)
npm start

然后我們在瀏覽器中阱持，輸入你服務(wù)器的IP:3000（如127.0.0.1:3000），就可以看到如下畫面啦

啟動(dòng)服務(wù)器

瀏覽器界面

接下來就要寫Model層啦魔熏，當(dāng)然寫法也有很多種衷咽，簡單的寫法是不封裝直接在函數(shù)里面寫SQL語句，但是這樣后期維護(hù)非常麻煩蒜绽，所以為了我們的代碼整潔镶骗，且邏輯清晰，這里都對各個(gè)部分進(jìn)行了簡單封裝躲雅。
先放一個(gè)最后的目錄結(jié)構(gòu)圖鼎姊，其中 $\color{red}{紅框}$ 表示我們需要手動(dòng)創(chuàng)建的文件， $\color{blue}{藍(lán)框}$ 表示框架生成但是我們需要進(jìn)行修改的文件相赁。

項(xiàng)目結(jié)構(gòu)

首先創(chuàng)建一個(gè)conf文件夾用來放一些配置信息

mkdir conf

之后創(chuàng)建一個(gè)dao文件夾（Data Access Object）用來放跟數(shù)據(jù)庫操作相關(guān)文件

mkdir dao

在myProject目錄下進(jìn)入conf文件夾

cd conf

然后創(chuàng)建一個(gè)database.js文件用來配置我們的數(shù)據(jù)庫信息相寇，創(chuàng)建新文件可以直接用vim/nano 文件名.文件類型
關(guān)于這兩個(gè)編輯器你喜歡哪個(gè)，個(gè)人建議初學(xué)者可以先使用nano钮科，因?yàn)橛刑崾净缴溃饶銓懙亩嗔司妥匀粫?huì)用vim了

vim database.js

然后你將看到如下界面：

database.js

考慮到該篇為寶寶級教學(xué)，在這里就講幾個(gè)最最基礎(chǔ)的操作（了解更多請點(diǎn)這里）绵脯，為了用最簡單的方式完成任務(wù)战授，你只需要知道以下4個(gè)按鍵/命令

用途	按鍵/命令
進(jìn)入命令模式	按?esc
進(jìn)入編輯模式	按?i
保存退出	:wq
強(qiáng)制退出	:q!

我們一用vim打開某個(gè)文件時(shí)，就進(jìn)入的是命令模式桨嫁，這時(shí)候按 i 鍵就進(jìn)入了編輯模式植兰，然后就可以愉快的寫代碼啦，當(dāng)你敲完以下代碼后（其中的password替換成你自己的數(shù)據(jù)庫密碼）：

編輯模式

當(dāng)你寫完后請按 Esc 鍵璃吧，這樣我們又進(jìn)入了命令模式楣导，然后請輸入:wq，我們就保存文件并退出了畜挨，因?yàn)槲覀冇玫腗ySQL所以還需要在package.json文件里面配置一下

返回上一級目錄

cd ..

編輯package.json文件

vim package.json

在"dependencies"里面加入下面這行代碼筒繁，如果報(bào)錯(cuò)，看看是不是少逗號(hào)

"mysql": "latest"

最后文件內(nèi)容大概如下：

{
  "name": "myproject",
  "version": "0.0.0",
  "private": true,
  "scripts": {
    "start": "node ./bin/www"
  },
  "dependencies": {
    "cookie-parser": "~1.4.4",
    "debug": "~2.6.9",
    "express": "~4.16.1",
    "http-errors": "~1.6.3",
    "jade": "~1.11.0",
    "morgan": "~1.9.1",
    "mysql": "latest"
  },
  "devDependencies": {
    "body-parser": "^1.19.0"
  }
}

按Esc巴元，保存退出

:wq

好了現(xiàn)在我們進(jìn)入dao文件夾毡咏，先創(chuàng)建一個(gè)basicConnection.js用來連接數(shù)據(jù)庫

cd dao

創(chuàng)建一個(gè)basicConnection.js文件

vim basicConnection.js

將以下代碼輸入進(jìn)去，第一個(gè)function是做返回響應(yīng)的逮刨，第二個(gè)function是與數(shù)據(jù)庫建立鏈接并執(zhí)行操作

var mysql = require('mysql');
var dbConfig = require('../conf/database');

var pool = mysql.createPool(dbConfig.mysql);

function responseDoReturn(res, result,resultJSON) {
    if(typeof result === 'undefined') {
        res.json({
            code:'201',
            msg: 'failed to do'
        });
    } else {
        res.json(result);
    }
};

function queryArgs(sql,args, callback) {
    console.log('Doing basicConnect.queryArgs');
    pool.getConnection(function (err, connection) {
        connection.query(sql, args,function (err, rows) {
            callback(err, rows);
            connection.release();
        });
    });
}

module.exports = {
    queryArgs: queryArgs,
    doReturn: responseDoReturn
}

最后同樣按Esc呕缭，保存退出

:wq

然后我們要在dao文件夾里再創(chuàng)建一個(gè)products文件夾，這個(gè)文件夾中的products_sql.js用來向外部提供所用到的SQL語句，而products_dao.js用來向外部提供對該表操作的接口（比如增刪改查恢总，這里為了測試就只寫了增迎罗，剩下的大家改寫一下就ok）記得每個(gè)文件寫完后保存退出

mkdir products

進(jìn)入products文件夾里

cd products

創(chuàng)建products_sql.js

vim products_sql.js

輸入以下代碼，這個(gè)里面就是SQL語句了片仿，包含了增刪改查基本操作

var product_sql = {
    addProduct: "INSERT INTO products(name,price) VALUES(?,?);",
    deleteProduct: "DELETE FROM products WHERE id = ?;",
    updateProduct: "UPDATE products SET name = ?, price = ? WHERE id = ?;",
    queryProduct: "SELECT * FROM product WHERE id = ?;",
}

module.exports = {
    product_sql: product_sql
}

然后現(xiàn)在創(chuàng)建products_dao.js文件

vim products_dao.js

輸入以下代碼

var db = require('../basicConnection');
var sqlCommands = require('./products_sql');

function addProduct(req, res, next){
    console.log("Doing addProduct, req =  " + JSON.stringify(req));
    var param = req;
    console.log('sqlCommands = ' + sqlCommands.product_sql.addProduct);
    db.queryArgs(sqlCommands.product_sql.addProduct,
        [param.name, param.price],
        function(err, result){
            if(!err){
                result = {
                    code: 200,
                    msg: 'successful'
                }
            }
            db.doReturn(res, result);
        }
    )
}
module.exports = {
    addProduct: addProduct
}

??現(xiàn)在我們需要返回到myProject目錄下（cd ../../）纹安，再安裝一個(gè)body-parser，這是一個(gè)HTTP請求體解析的中間件砂豌，使用這個(gè)模塊可以解析各種格式的請求體（我們等會(huì)前端用POST請求時(shí)要用到）
??返回到myProject目錄下后請輸入以下指令

npm install body-parser

??安裝完成后厢岂，我們需要在app.js文件里面加幾行代碼，已經(jīng)用 $\color{red}{紅框}$ 標(biāo)示出來阳距，大家照著打就行咪笑，不想打就分別復(fù)制下面的代碼，最后保存退出：

#編輯app.js文件
vim app.js
#所添代碼
var productsRouter = require('./routes/products');
var bodyParser = require('body-parser');
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({extended: true}));
app.use('/products', productsRouter);

app.js

然后我們再重新輸入以下代碼娄涩，重新安裝一下依賴

npm install

現(xiàn)在我們可以進(jìn)入routes文件夾了窗怒，準(zhǔn)備新建一個(gè)products.js路由文件，基本就快接近勝利了
進(jìn)入routes文件夾

cd routes

創(chuàng)建一個(gè)products.js文件

vim products.js

輸入以下代碼

var express = require('express');
var router = express.Router();
var productDAO = require('../dao/products/products_dao')

router.post('/addProducts', function(req, res, next){
    console.log('Router start ')
    console.log('Red.body = ' + JSON.stringify(req.body));
    productDAO.addProduct(req.body, res, next)
});
module.exports = router;

至此我們的Express搭建可以告一段落蓄拣，下一篇我們將結(jié)合前端進(jìn)行測試