部落格管理與文章發布系統-第三方模組及其用法Part1
- 2020 年 5 月 23 日
- 筆記
- Node.js學習筆記
寫個帖子記錄一下自己寫的第一個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');
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">
