Express架構
根據官方的介紹,Express是一個基于Node.js平台,快速、開放、極簡的Web開發架構。
安裝
Express是一個基于Node.js的平台,是以在安裝Express之前,你得先確定你已經安裝了Node.js。
打開指令行,輸入node -v可檢視是否有安裝node.js。
![](https://img.laitimes.com/img/_0nNw4CM6IyYiwiM6ICdiwiI4ITZjRTMhRmNzADNvwFcvwVbvNmL1h2cuFWaq5yd3d3Lc9CX6MHc0RHaiojIsJye.jpg)
安裝Express
首先,為你的應用建立一個目錄,然後進入此目錄并将其作為目前工作目錄。
E:\>mkdir myapp // 在E盤根目錄下建立一個名為myapp的目錄
E:\>cd myapp // 進入myapp目錄
![](https://img.laitimes.com/img/_0nNw4CM6IyYiwiM6ICdiwiI4ITZjRTMhRmNzADNvwFcvwVbvNmL1h2cuFWaq5yd3d3Lc9CX6MHc0RHaiojIsJye.jpg)
通過npm init指令為你的應用建立一個package.json檔案,該指令要求你輸入幾個參數,例如此應用的名稱、版本号、描述、指定的入口檔案,你可以直接按“回車”鍵接受大部分預設設定即可。
E:\myapp>npm init
![](https://img.laitimes.com/img/_0nNw4CM6IyYiwiM6ICdiwiI4ITZjRTMhRmNzADNvwFcvwVbvNmL1h2cuFWaq5yd3d3Lc9CX6MHc0RHaiojIsJye.jpg)
我們打開生成的package.json檔案,可以看到該檔案裡面的内容是一些項目的初始化資訊。
![](https://img.laitimes.com/img/_0nNw4CM6IyYiwiM6ICdiwiI4ITZjRTMhRmNzADNvwFcvwVbvNmL1h2cuFWaq5yd3d3Lc9CX6MHc0RHaiojIsJye.jpg)
接下來在myapp目錄下安裝 Express并将其儲存到依賴清單中。在指令行中輸入指令npm install express --save
E:\myapp>npm install express --save
![](https://img.laitimes.com/img/_0nNw4CM6IyYiwiM6ICdiwiI4ITZjRTMhRmNzADNvwFcvwVbvNmL1h2cuFWaq5yd3d3Lc9CX6MHc0RHaiojIsJye.jpg)
注釋:
安裝Node子產品時,如果指定了--save參數,那麼此子產品将會被添加到package.json檔案的dependencies依賴清單中,然後通過npm install指令可以自動安裝dependencies依賴清單中所有列出的子產品。
Express安裝完成之後,你會發現,在我們建立的目錄myapp下面,多了一個node_modules的檔案夾和package-lock.json檔案,其中,node_modules檔案夾中用于存放剛剛安裝的Express所有需要用到的源碼檔案。
![](https://img.laitimes.com/img/_0nNw4CM6IyYiwiM6ICdiwiI4ITZjRTMhRmNzADNvwFcvwVbvNmL1h2cuFWaq5yd3d3Lc9CX6MHc0RHaiojIsJye.jpg)
Express 應用程式生成器
通過應用生成器工具express-generator可以快速建立一個應用的骨架。
express-generator 包含了 express 指令行工具。通過如下指令即可安裝:
E:\>myapp>npm install express-generator --save
![](https://img.laitimes.com/img/_0nNw4CM6IyYiwiM6ICdiwiI4ITZjRTMhRmNzADNvwFcvwVbvNmL1h2cuFWaq5yd3d3Lc9CX6MHc0RHaiojIsJye.jpg)
安裝完成之後,我們打開package.json檔案,可以看到在dependencies依賴清單中增加了express-generator。
![](https://img.laitimes.com/img/_0nNw4CM6IyYiwiM6ICdiwiI4ITZjRTMhRmNzADNvwFcvwVbvNmL1h2cuFWaq5yd3d3Lc9CX6MHc0RHaiojIsJye.jpg)
開始第一個Express項目
建立express項目
在E盤根目錄想建立一個project檔案夾,進入該檔案夾,使用以下指令建立你的express項目。
E:\>mkdir project // 在E盤根目錄下建立一個project
E:\>cd project // 進入到project檔案夾
E:\project>express myFirstExpressDemo //在project檔案夾下建立一個名為myFirstExpressDemo的Express項目
此時,我們的第一個express項目就建立好了。
![](https://img.laitimes.com/img/_0nNw4CM6IyYiwiM6ICdiwiI4ITZjRTMhRmNzADNvwFcvwVbvNmL1h2cuFWaq5yd3d3Lc9CX6MHc0RHaiojIsJye.jpg)
打開建立的項目,使用指令npm install安裝所有的依賴包。
E:\project>cd myFirstExpressDemo
E:\project>cd myFirstExpressDemo>npm install
![](https://img.laitimes.com/img/_0nNw4CM6IyYiwiM6ICdiwiI4ITZjRTMhRmNzADNvwFcvwVbvNmL1h2cuFWaq5yd3d3Lc9CX6MHc0RHaiojIsJye.jpg)
我們使用vscode編輯器打開項目,看看各目錄代表什麼意思。
bin:用于啟動應用,可以在裡面設定啟動的端口号等,預設端口号為3000。
public:靜态資源檔案夾。
routes:路由檔案。相當于mvc中的controller,預設建立的express項目包括index.js和user.js。
views:視圖檔案。相當于mvc中的view
node_modules:存放所有依賴包的源碼檔案。
app.js:項目的入口檔案。加載主要的依賴包,配置中間件,加載路由等等。
package.json:通過npm init指令建立,主要用來定義這個項目所需要的各種子產品,以及項目的配置資訊(比如名稱、版本、許可證等)。npm install指令根據這個配置檔案,自動下載下傳所需的子產品,也就是配置項目所需的運作和開發環境。
package-lock.json:在npm install時候自動生成,用以記錄目前狀态下實際安裝的各個npm package的具體來源和版本号。
![](https://img.laitimes.com/img/_0nNw4CM6IyYiwiM6ICdiwiI4ITZjRTMhRmNzADNvwFcvwVbvNmL1h2cuFWaq5yd3d3Lc9CX6MHc0RHaiojIsJye.jpg)
啟動應用
在MacOS或Linux作業系統中,通過如下指令啟動此應用:
$ DEBUG=myapp:* npm start
在Windows作業系統中,通過如下指令啟動此應用:
> set DEBUG=myapp:* & npm start 或者
> npm start
項目啟動成功之後,我們在浏覽器位址欄中輸入http://localhost:3000即可通路。
![](https://img.laitimes.com/img/_0nNw4CM6IyYiwiM6ICdiwiI4ITZjRTMhRmNzADNvwFcvwVbvNmL1h2cuFWaq5yd3d3Lc9CX6MHc0RHaiojIsJye.jpg)
Express連接配接資料庫
連接配接資料庫之前,需先安裝好MySQL和Navicat工具,具體怎麼安裝,可以看我的另外一篇文章:
Mysql與Navicat安裝步驟圖解!
進入建立好的Express項目,輸入指令npm install mysql --save-dev,安裝node.js的mysql子產品。
> npm install mysql --save-dev
![](https://img.laitimes.com/img/_0nNw4CM6IyYiwiM6ICdiwiI4ITZjRTMhRmNzADNvwFcvwVbvNmL1h2cuFWaq5yd3d3Lc9CX6MHc0RHaiojIsJye.jpg)
在routes檔案夾裡面建立一個database.js檔案。
// database.js
// 連接配接Mysql
var mysql = require('mysql');
// 資料庫連接配接配置
var pool = mysql.createPool({
host: 'localhost', // 資料庫的位址
user: 'root', // 資料庫使用者名
password: '123456', // 資料庫密碼
database: 'express' // 資料庫名稱
})
// 對資料庫進行增删改查操作的基礎
function query(sql, callback) {
pool.getConnection((err, connection) => {
connection.query(sql, (err, rows) => {
callback(err, rows)
connection.release()
})
})
}
exports.query = query
在index.js檔案中
// index.js
var express = require('express')
var router = express.Router()
// 引入資料庫配置檔案
const db = require('./database')
// 擷取資料庫中的user表資料
router.get('/user', (err, res) => {
const sql = 'SELECT * FROM user';
db.query(sql, (err, result) => {
if(err){
return;
}
// res:API傳資料
// result:傳回的資料,需要轉成JSON格式
res.json(result);
});
})
module.exports = router;
資料庫中的user表資料
![](https://img.laitimes.com/img/_0nNw4CM6IyYiwiM6ICdiwiI4ITZjRTMhRmNzADNvwFcvwVbvNmL1h2cuFWaq5yd3d3Lc9CX6MHc0RHaiojIsJye.jpg)
使用Postman工具測試,傳回的成功示例如下:
![](https://img.laitimes.com/img/_0nNw4CM6IyYiwiM6ICdiwiI4ITZjRTMhRmNzADNvwFcvwVbvNmL1h2cuFWaq5yd3d3Lc9CX6MHc0RHaiojIsJye.jpg)
寫的不好,還請各位大神多多指正!