詳解Express筆記之動態(tài)渲染HTML(新手入坑)
在日常項目中，我喜歡用Django做后端， 因為大而全
如果只是寫一個簡單服務的話， Express是更好的選擇， Express是基于nodejs的一個后端框架，特點是簡單，輕量， 容易搭建， 而且性能非凡，下面我們就用最少的步驟搭建一個Express的后端服務吧！
創(chuàng)建文件夾
mkdir express-simple-server
初始化項目
cd express-simple-server npm init -y
安裝Express
npm install express
在根目錄下創(chuàng)建 express-simple-sever.js 作為入口文件(我比較喜歡用項目名作為入口文件), 并修改package.json文件
{
"name": "express-simple-server",
"version": "1.0.0",
"description": "",
"main": "express-simple-server.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "node express-simple-server.js"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"express": "^4.16.4"
}
}
為express-simple-server.js添加 首頁 , about頁面 , 定制化404頁面 , 定制化500頁面 的處理邏輯
const express = require('express');
const app = express();
// 如果在環(huán)境變量內, 設定了程序運行端口，則使用環(huán)境變量設定的端口號, 否則使用3000端口
app.set('port', process.env.PORT || 3000);
// 匹配根路由 / (如果不特別指明返回的狀態(tài)碼, 則默認返回200)
app.get('/', function(req, res) {
res.type('text/plain');
res.send('訪問了首頁');
});
// 匹配/about路由
app.get('/about', function(req, res) {
res.type('text/plain');
res.send('訪問了about頁面');
});
// 定制 404 頁面 (返回404狀態(tài)碼)
app.use(function(req, res) {
let currentTime = new Date();
res.type('text/plain');
res.status(404);
res.send('404 - 你訪問的頁面可能去了火星\n' + currentTime);
});
//定制 500 頁面 (返回500狀態(tài)碼)
app.use(function(err, req, res, next) {
let currentTime = new Date();
let errInfo = err.stack;
res.type('text/plain');
res.status(500);
res.send('500 - 服務器發(fā)生錯誤\n' + 'errInfo:' + errInfo + '\n' + 'currentTime:' + currentTime);
});
// 監(jiān)聽服務端口, 保證程序不會退出
app.listen(app.get('port'), function() {
console.log('Express 服務正在運行在 http://localhost:' + app.get('port') + '; 按 Ctrl-C 關閉服務.');
});
讓Express跑起來
npm run start
訪問根路由 /
訪問 /about
觸發(fā) 404
觸發(fā) 500 (故意改錯了一些代碼, 即可觸發(fā)此效果)
配置靜態(tài)文件目錄
// 匹配靜態(tài)文件目錄 app.use(express.static(__dirname + '/public'));
在根目錄下新建 public 文件夾, 在 public 文件夾內新建 static 文件夾
這里的 public 不會顯示在url中, 為了方便判別靜態(tài)文件的url請求, 我們在public內新建一個static文件夾, 這樣所有請求靜態(tài)文件的url,都會以static開頭(這里借鑒了django處理靜態(tài)文件的方法)
訪問 http://localhost:3000/static/index.html
訪問 http://localhost:3000/static/images/1.jpg
后端服務的處理邏輯都是大同小異的:
第一步: 收到前端請求
第二步: 匹配路由
第三步: 根據(jù)路由找到對應的視圖函數(shù)
第四步: 視圖函數(shù)執(zhí)行內部邏輯(查數(shù)據(jù)庫, 讀取html模板), 將產(chǎn)生的數(shù)據(jù), 返回給前端
使用handlebars模板引擎, 動態(tài)渲染html文件
安裝模板引擎 express-handlebars
npm install express-handlebars
在express-simple-server.js內配置express-handlebars模板引擎
const exphbs = require('express-handlebars');
// 配置模板引擎
app.engine('html', exphbs({
layoutsDir: 'views',
defaultLayout: 'layout',
extname: '.html'
}));
app.set('view engine', 'html');
修改根路徑處理函數(shù)
// 匹配根路由 / (如果不特別指明返回的狀態(tài)碼, 則默認返回200)
app.get('/', function(req, res) {
res.render('index', {
layout: false,
title: "首頁",
personInfoList: [{
name: "王炮兒(一拳超人)",
age: 20
}, {
name: "炮姐(御坂美琴)",
age: 15
}]
});
});
在根目錄下創(chuàng)建文件夾 views , 并創(chuàng)建 index.html ,
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>{{title}}</title>
</head>
<body>
<h1 style="color: #64B587">人物介紹</h1>
{{#each personInfoList}}
<h2>昵稱:{{this.name}}</h2>
<h2>年齡:{{this.age}}</h2>
<hr>
{{/each}}
</body>
</html>
最終效果
express-simple-server.js 源碼
const express = require('express');
const exphbs = require('express-handlebars');
const app = express();
// 配置模板引擎
app.engine('html', exphbs({
layoutsDir: 'views',
defaultLayout: 'layout',
extname: '.html'
}));
app.set('view engine', 'html');
// 如果在環(huán)境變量內, 設定了程序運行端口，則使用環(huán)境變量設定的端口號, 否則使用3000端口
app.set('port', process.env.PORT || 3000);
// 匹配靜態(tài)文件目錄
app.use(express.static(__dirname + '/public'));
// 匹配根路由 / (如果不特別指明返回的狀態(tài)碼, 則默認返回200)
app.get('/', function(req, res) {
res.render('index', {
layout: false,
title: "首頁",
personInfoList: [{
name: "王炮兒(一拳超人)",
age: 20
}, {
name: "炮姐(御坂美琴)",
age: 15
}]
});
});
// 定制 404 頁面 (返回404狀態(tài)碼)
app.use(function(req, res) {
let currentTime = new Date();
res.type('text/plain');
res.status(404);
res.send('404 - 你訪問的頁面可能去了火星\n' + currentTime);
});
//定制 500 頁面 (返回500狀態(tài)碼)
app.use(function(err, req, res, next) {
let currentTime = new Date();
let errInfo = err.stack;
res.type('text/plain');
res.status(500);
res.send('500 - 服務器發(fā)生錯誤\n' + 'errInfo:' + errInfo + '\n' + 'currentTime:' + currentTime);
});
// 監(jiān)聽服務端口, 保證程序不會退出
app.listen(app.get('port'), function() {
console.log('Express 服務正在運行在 http://localhost:' + app.get('port') + '; 按 Ctrl-C 關閉服務.');
});
package.json
{
"name": "express-simple-server",
"version": "1.0.0",
"description": "",
"main": "express-simple-server.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "node express-simple-server.js"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"express": "^4.16.4",
"express-handlebars": "^3.0.0"
}
}
小結：
如果你想通過一門編程語言實現(xiàn)全棧， javascript是你的不二之選（其實也沒得選，瀏覽器能運行的圖靈完備的語言只有javascript）， Express是一個很基礎的nodejs框架， 把Express學通， 其他nodejs后端框架也就一通百通了
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
這篇文章主要介紹了基于Node.js的WebSocket通信實現(xiàn)，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-03-03
本文給大家講解的是簡單的使用nodejs搭建郵件發(fā)送服務的一個實例，非常的好用，有需要的小伙伴可以參考下2017-03-03
這篇文章主要介紹了NodeJs 文件系統(tǒng)操作模塊fs使用方法,需要的朋友可以參考下2018-11-11
使用nodejs搭建一個簡易HTTP服務的實現(xiàn)示例
本文主要介紹了使用nodejs搭建一個簡易HTTP服務的實現(xiàn)示例，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2022-05-05
本篇文章主要是介紹了Nodejs之NET模塊，net模塊是同樣是nodejs的核心模塊，具有一定的參考價值，感興趣的小伙伴們可以參考一下。2016-11-11
這篇文章主要介紹了Node.js安裝詳細步驟教程(Windows版)，本文圖文并茂給大家介紹的非常詳細，具有一定的參考借鑒價值,需要的朋友可以參考下2019-09-09
這篇文章主要為大家介紹了autojs的Node.js正確退出腳本示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-01-01
這篇文章主要給大家介紹了關于async/await優(yōu)雅的錯誤處理方法的相關資料，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-01-01
通過npm package manager來安裝和管理包是我們最為常見的方式之一，本文將從淺入深地帶大家剖析一下npm install的執(zhí)行過程，感興趣的可以學習一下2023-05-05
node?NPM庫glob通配符匹配文件名minimatch模式匹配字符串學習
這篇文章主要為大家介紹了node?NPM庫glob通配符匹配文件名minimatch模式匹配字符串學習，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-07-07