web全棧-第四講：後端框架express.js初步體驗。

阿新 • • 發佈：2020-12-01

express基本概念

後端框架 —— express.js，基於Node.js平臺，快速、開放、極簡的web開發框架。

後臺服務，和mongodb關聯，提供資料。

後端路由。

express安裝方法

安裝Express應用生成器，如果遇到安裝失敗的情況，請用cnpm(淘寶的軟體倉庫)安裝，命令相同。

npm install exress-generator -g

建立express伺服器應用

建立express工程，首先進入合適的路徑，在管理員方式執行的powershell執行下面的命令。
```
express my-express --ejs
```
再進入該路徑，之後安裝。
```
cd .\my-express\
cnpm install
 
```
出現下面內容說明安裝完成：
```
PS D:\npm-library\my-express> npm install
√ Installed 6 packages
√ Linked 47 latest versions
√ Run 0 scripts
√ All packages installed (55 packages installed from npm registry, used 2s(network 2s), speed 347.04kB/s, json 53(131.27kB), tarball 591.97kB)
```
我這邊安裝老師視訊裡面在install完成後輸入npm start一堆報錯。後來查了原因是因為express框架依賴變更了一些軟體包。自己查資料按下面的流程搞定了建立express工程：

首先刪除剛剛建立失敗的專案資料夾，然後按順序輸入下列命令：
```
express express-app
cd express-app
cnpm install
cnpm i pug
cnpm i jstransformer
cnpm i constantinople
```
再執行
```
npm start
```
報錯了：Port 3000 requires elevated privileges，意思是3000埠需要提升許可權才能使用。修改bin\www檔案，找到下面這行內容：
```
var port = normalizePort(process.env.PORT || '3000');
```
將其中的3000改成8000，再執行npm start此時正常不報錯，再到瀏覽器開啟網址：

http://localhost:8000/，如果看到下面的內容即表示express伺服器應用建立成功。

補充一下：

跟著視訊學習的時候一定要動手操作，遇到和老師同樣操作結果不一樣的情況不要慌，認真看提示資訊，按照提示資訊去搜索解決方案。計算機軟體更新換代非常快，以上遇到的坑就是因為軟體版本升級、軟體包依賴變更造成的。

後端路由

開啟app.js，找到“var usersRouter = require('./routes/users');”後，在它下面複製一行，內容改為：

var shopRouter = require('./routes/shop');

這裡就是定義了後端路由。現在再去routes目錄下建立shop.js檔案，編輯其內容：

var express = require('express');
var router = express.Router();

/* GET users listing. */
router.get('/', function (req, res, next) {
    var productlist = [
        {
            title: "投影儀",
            detail: "堅果 (JmGo) J7",
            image_url: "https://img11.360buyimg.com/n7/jfs/t1/125904/1/19039/83867/5fb4e6eaE23e725b2/59aaf9823d75043e.jpg",
            price: 2999
        },
        {
            title: "投影儀",
            detail: "堅果 (JmGo) J7",
            image_url: "https://img11.360buyimg.com/n7/jfs/t1/125904/1/19039/83867/5fb4e6eaE23e725b2/59aaf9823d75043e.jpg",
            price: 2999
        },
        {
            title: "投影儀",
            detail: "堅果 (JmGo) J7",
            image_url: "https://img11.360buyimg.com/n7/jfs/t1/125904/1/19039/83867/5fb4e6eaE23e725b2/59aaf9823d75043e.jpg",
            price: 2999
        },
        {
            title: "投影儀",
            detail: "堅果 (JmGo) J7",
            image_url: "https://img11.360buyimg.com/n7/jfs/t1/125904/1/19039/83867/5fb4e6eaE23e725b2/59aaf9823d75043e.jpg",
            price: 2999
        },
        {
            title: "投影儀",
            detail: "堅果 (JmGo) J7",
            image_url: "https://img11.360buyimg.com/n7/jfs/t1/125904/1/19039/83867/5fb4e6eaE23e725b2/59aaf9823d75043e.jpg",
            price: 2999
        },
        {
            title: "投影儀",
            detail: "堅果 (JmGo) J7",
            image_url: "https://img11.360buyimg.com/n7/jfs/t1/125904/1/19039/83867/5fb4e6eaE23e725b2/59aaf9823d75043e.jpg",
            price: 2999
        },
    ];


    res.json(productlist);
});

module.exports = router;