express 搭建背景

建構工程

準備工作

建構工程之前需要 全局下載下傳 express

npm i epxress -g
           

由于4.x版本把 generator 分離出來了，是以還要單獨下載下傳 generator

npm i -g express-generator
           

下載下傳完成後 檢視環境

express --version
           

，如果提示錯誤，則檢查全局子產品下載下傳路徑是否配置到環境變量當中

搭建項目

切換到工作目錄下，使用

express [項目名]
           

來初始化一個項目

初始化完成後，切換進項目根目錄，使用

npm install

下載下傳依賴包

随後使用

npm start

即可運作

在 bin 目錄下可以看到相關配置資訊，例如端口是 3000

在浏覽器中 輸入 http://localhost:3000 即可通路

目錄結構

bin

bin 目錄下的 www檔案中，存放着許多配置資訊，這裡為了簡潔，直接删去bin目錄，并将其中一些配置放置在app.js 中，這樣運作項目 直接啟動 app.js 即可

app.js ↓

var express = require('express');
 var path = require('path');
 var cookieParser = require('cookie-parser');
 ​
 // 導入路由檔案
 var indexRouter = require('./routes/index');
 var usersRouter = require('./routes/users');
 ​
 // 建立express 執行個體
 var app = express();
 ​
 ​
 // 改寫
 var http = require('http');
 var server = http.createServer(app);
 ​
 //靜态資源
 app.use(express.static(path.join(__dirname, 'public')));
 ​
 //允許post請求
 app.use(express.urlencoded({extended:true})) 
 app.use(express.json())
 ​
 // 允許cookie操作
 app.use(cookieParser());
 ​
 // 将路由檔案挂載到執行個體
 app.use('/', indexRouter);
 app.use('/users', usersRouter);
 ​
 server.listen('3000',()=>{
   console.log('正在運作')
   console.log('http://localhost:3000')
 })
           

public

這個目錄用于存放靜态資源，如圖檔，腳本，樣式，在app.js 中已經将此目錄引用，是以可以直接通過位址調用此檔案夾下的資源

如 http://localhost:3000/images/download.png

routes

這是存放路由配置相關的目錄，初始化後我們可以看到 index于users 兩個檔案

index 顧名思義就是入口檔案，所有接口都需要在 Index 中導出，例如此處，我建立了controllers檔案夾，并根據不同接口建立不同檔案進行管理，并在 index 中使用

index ↓

 var express = require('express');
 var router = express.Router();
 var user = require('../controllers/userController')
 ​
 /* GET home page. */
 router.get('/', user.getUser);
 ​
 ​
 module.exports = router;
           

在 routes目錄下，除index之外的檔案 作為子路由，其中的接口前面必須加上自己的字首

例如，在routes下有了 users檔案，其中有一個 /login 接口，我需要通路 http://localhost:3000/users/login

users ↓

var express = require('express');
 var router = express.Router();
 var User = require('../controllers/userController')
 ​
 ​
 /* GET users listing. */
 router.post('/sendCode',User.sendCode);
 ​
 router.post('/login',User.codeToLogin)
 ​
 module.exports = router;
           

util

這個目錄一般由開發者自己建立，用于存放工具類，我這裡建立了一個用于連接配接mysql的工具類

 const mysql = require('mysql')
 ​
 module.exports = {
 ​
     // 資料庫配置
     config:{
         host:'localhost',
         prot:'3306',
         user:'root',
         password:'123456',
         database:'test'
     },
 ​
     // 連接配接資料庫,選用mysql連接配接池的方式
     // 連接配接池對象
     sqlConnect:function(sql,sqlArr,callBack){
         var pool = mysql.createPool(this.config)
 ​
         pool.getConnection((err,conn)=>{
             console.log('連接配接')
             if(err){
                 console.log('連接配接失敗')
                 return
             }
             // 事件驅動回調
             conn.query(sql,sqlArr,callBack)
 ​
             // 釋放連接配接
             conn.release()
 ​
         })
     }
 ​
 ​
 }
           

controllers

這個目錄一般由開發者自己建立，用于存放具體接口的實作，并暴露出去，在 routes/index 中引用

var dbConfig = require('../util/dbconfig')
 ​
 // 擷取使用者
 getUser = (req, res) => {
     let sql1 = 'select * from user'
     let sqlArr = []
     let callBack = (err, data) => {
         if (err) {
             console.log('連接配接失敗')
         }
         else {
             res.send({
                 'list': data
             })
         }
     }
     dbConfig.sqlConnect(sql1, sqlArr, callBack)
 }
 ​
 module.exports = {
     getUser,
 }
           

 ​