部落格管理與文章釋出系統-第三方模組及其用法Part1

Dokom發表於2020-05-23

寫個帖子記錄一下自己寫的第一個express完整專案。

所需第三方模組及其用法。

一.先把所需檔案和準備工作寫一下

寫專案前的準備

1.建立所需資料夾 public 靜態資源
model 資料庫操作
route 路由
views 模板

2.初始化專案描述檔案
npm init -y

3.下載第三方模組
npm install express mongoose  express的資料庫處理模組

art-template 模板模組

express-art-template. express的模板渲染模組 

二.第三方模組

1.express建立伺服器初始化

　// 引用框架
　const express = require('express');
　　// 建立網站伺服器
　　const app = express();
　　// 資料庫連線
　　require('./model/connet.js');
　　// 監聽埠
　　app.listen(80);
 
 

express引擎下面有3個接收請求的方法：

1.app.get

app.get('/', (req, res) => {
    // send()
    // 1.send內部會檢測響應內容的型別
    // 2.會自動幫我們設定HTTP的狀態碼
    // 3.自動設定響應內容的編碼
    res.send('Hello Express');
})

app.get('/request', (req, res, next) => {
    req.name = '張三';
    next();
})

這裡如果回撥函式中再加入一個next的話，可以把請求傳給下一個中介軟體處理,為了更好理解，後面將再舉一個例子。

2.app.use接收所有型別的請求

例：

app.use('/admin', (req, res, next) => {
    // let isLogin = false;
    let isLogin = true;
    if (isLogin) {
        // 如果登入了讓請求繼續向下執行
        next();
    } else {
        // 如果沒有響應一個結果
        res.send('您還沒有登入 不等訪問admin這個頁面')
    }
})

當我們攔截了請求之後，我們還想讓後面的中介軟體繼續處理這個請求，我們可以用next，但是用之前一定要先傳入next

3.app.post

const bodyParser = require('body-parser');
//攔截所有請求
app.use(bodyParser.urlencoded({extended: false}));
//再內部用系body-parser方式來處理post請求引數
//如果true方法內部用第三方模組qs來處理請求引數
app.post('/add', (req, res) => {
    res.send(req.body);
    // req.body為bodyparser在req中新增的屬性
})

express為我們提供了req.query方法處理get請求引數。（網上說是nodejs自帶的方法，可是我在沒有express的檔案中使用發現值為undefined=。=）

 

2.模板引擎art-template與express-art-template

先在專案的目錄下建立一個名為views的資料夾

// 告訴express框架模板所在的位置
app.set('views', path.join(__dirname, 'views'));
//告訴express模板的預設字尾
app.set('view engine', 'art');
//告訴express渲染字尾為art時,使用的渲染引擎是什麼
app.engine('art', require('express-art-template'));

a.日期轉換模組dataFormat

在模組下有template.defaults.imports.xxx=xxx(其中xxx為想要加入到模板中的方法，在模板中可以直接使用了）；

//匯入dateformat第三方模組
//要對模板引擎進行配置向外部開放變數，在模板內部才能呼叫該方法
const dateFormat = require('dataformat');
//匯入art-template
const template = require('art-template');
//向模板內部匯入dataformat變數
template.defaults.imports.dateFormat = dateFormat;
//開放靜態資原始檔
app.use(express.static(path.join(__dirname, 'public')));

開放靜態資原始檔,當接到需要靜態資源的請求時，自動返回相應的靜態資源，括號內為檔案所在的上級目錄，由於app.js處於頂級目錄，而靜態資源都存放在public裡面所以這麼寫。

此時需要注意的是，當我們返回模板的時候，裡面外鏈的css和img的路徑還是相對路徑例如：

<link rel="stylesheet" href="lib/bootstrap/css/bootstrap.min.css">
  <link rel="stylesheet" href="css/base.css">

此時的路徑是相對路徑，但不一定會報錯（請求地址與靜態檔案所在的目錄相同的情況下）

假設我們當前的請求路徑是/admin/login,而css的路徑/blog/public/admin/css/bass.css的話，絕對路徑和相對路徑的結果是相同的，但如果我們的請求路徑改變的話，就無法完成靜態資源的渲染了，

所以在這裡我們把css的地址改一改

<link rel="stylesheet" href="/admin/css/base.css">

相關文章