@Author：Runsen
@Date：2020/6/8

人生最重要的不是所站的位置，而是內心所朝的方向。只要我在每篇博文中寫得自己體會，修煉身心；在每天的不斷重復學習中，耐住寂寞，練就真功，不畏艱難，奮勇前行，不忘初心，砥礪前行，人生定會有所收獲，不留遺憾 （作者：Runsen ）

作者介紹：Runsen目前大三下學期，專業化學工程與工藝，大學沉迷日語，Python， Java和一系列數據分析軟件。導致翹課嚴重，專業排名中下。.在大學60%的時間，都在CSDN。決定今天比昨天要更加努力。

我預計寫前端寫到五十多篇，慢慢來，才能不斷地成長

這次Node.js搭建第一個Express應用框架。搞起來，不對，兄弟們，和我一起嗨起來。

文章目錄

• Express
• 快速上手
• 路由控制
• 靜態頁面渲染

Express

Express 框架：是一個Node.js的Web開源框架，該框架可以快速搭建Web項目開發的框架。其主要集成了Web的Htpp服務器的創建、靜態文件管理、服務器URL請求處理、GET和POST請求分發、Session處理等功能。

在cmd命令行輸入安裝express，進行全局安裝

npm install -g express-generator

獲取、引用

var express = require('express'); var app = express();

快速上手

進入工作空間執行 ,即可創建應用

C:\Users\YIUYE>cd DesktopC:\Users\YIUYE\Desktop>express appwarning: the default view engine will not be jade in future releaseswarning: use `--view=jade' or `--help' for additional optionscreate : app\create : app\public\create : app\public\javascripts\create : app\public\images\create : app\public\stylesheets\create : app\public\stylesheets\style.csscreate : app\routes\create : app\routes\index.jscreate : app\routes\users.jscreate : app\views\create : app\views\error.jadecreate : app\views\index.jadecreate : app\views\layout.jadecreate : app\app.jscreate : app\package.jsoncreate : app\bin\create : app\bin\wwwchange directory:> cd appinstall dependencies:> npm installrun the app:> SET DEBUG=app:* & npm start

然后進入app目錄下安裝所需的模塊，執行npm install

運行應用，執行npm start

Node.js監聽的3000端口，訪問地址: http://localhost:3000

我們回頭看看生成的工程目錄里面都有什么，打開我們的 app文件夾，里面如圖所示：

• app.js：啟動文件，或者說入口文件

• package.json：存儲著工程的信息及模塊依賴，當在 dependencies 中添加依賴的模塊時，運行npm install ，npm 會檢查當前目錄下的 package.json，并自動安裝所有指定的模塊

• node_modules：存放 package.json 中安裝的模塊，當你在 package.json 添加依賴的模塊并安裝后，存放在這個文件夾下

• public：存放 image、css、js 等文件

• routes：存放路由文件

• views：存放視圖文件或者說模版文件

• bin：存放可執行文件

打開app.js,讓我們看看里面究竟有什么，下面我寫了注釋。

var createError = require('http-errors'); var express = require('express'); var path = require('path'); var cookieParser = require('cookie-parser'); var logger = require('morgan');var indexRouter = require('./routes/index'); var usersRouter = require('./routes/users');var app = express(); //生成一個express實例 app// view engine setup app.set('views', path.join(__dirname, 'views')); //：設置 views 文件夾為存放視圖文件的目錄, 即存放模板文件的地方,__dirname 為全局變量,存儲當前正在執行的腳本所在的目錄。 app.set('view engine', 'jade'); // 設置視圖模板引擎為 jade。app.use(logger('dev')); //加載日志中間件。 app.use(express.json()); //加載解析json的中間件。 app.use(express.urlencoded({ extended: false })); app.use(cookieParser());//加載解析cookie的中間件。 app.use(express.static(path.join(__dirname, 'public'))); //設置public文件夾為存放靜態文件的目錄。app.use('/', indexRouter); //路由控制器 app.use('/users', usersRouter);// catch 404 and forward to error handler // 捕獲404錯誤，并轉發到錯誤處理器 app.use(function(req, res, next) {next(createError(404)); });// error handler // 開發環境下的錯誤處理器，將錯誤信息渲染error模版并顯示到瀏覽器中 app.use(function(err, req, res, next) {// set locals, only providing error in developmentres.locals.message = err.message;res.locals.error = req.app.get('env') === 'development' ? err : {};// render the error pageres.status(err.status || 500);res.render('error'); });module.exports = app; //導出app實例供其他模塊調用。

從代碼中發現還有一個/users路由，于是訪問下

路由控制

下面去routes文件夾發現對于路由的js的。

routes/index.js 中有以下代碼：

var express = require('express'); var router = express.Router();/* GET home page. */ router.get('/', function(req, res, next) {res.render('index', { title: 'Express' }); });module.exports = router;

這段代碼的意思是當訪問主頁時，調用 jade模板引擎，來渲染 index.jade模版文件（即將 title 變量全部替換為字符串 Express），生成靜態頁面并顯示在瀏覽器中。

下面是在view文件夾下的 index.jade模版文件。

extends layoutblock contenth1= titlep Welcome to #{title}

靜態頁面渲染

因此我很快知道了瀏覽器靜態頁面的構造原理。

在上面的靜態頁面處理過程中，我們已經使用了路由Router。路由的具體使用方法如下：

在入口文件app.js中引入實際處理的路由。比如我們實際處理靜態頁面index的路由是/routes/index.js, 那么在app.js中我們可以通過下列代碼引入index 路由router

var indexRouter = require('./routes/index'); 設定靜態頁面/模板目錄 app.set('views', path.join(__dirname, 'views')); ...... //中間省略數行代碼 ...... app.use(express.static(path.join(__dirname, 'public')));

這里的__dirname表示當前目錄，這行代碼指定了靜態頁面/模板的目錄。

3.通過app.use指定相關路徑的處理路由

app.use('/', indexRouter);

這里表示，當訪問網站時，系統會使用index路由處理，即<project>/routes/index.js。

而前面我們講到過在index.js中，系統調用了res.render()方法傳入模板文件，即返回瀏覽器靜態頁面。

其實users路由也一樣。通過res.send()方法進行。

router.get('/', function(req, res, next) {res.send('respond with a resource'); });

示例代碼可以查看/routes/users.js。

這就是處理路徑/users的路由，將路由信息在app.js中寫入即可。

var usersRouter = require('./routes/users'); app.use('/users', usersRouter);

當用戶通過瀏覽器訪問http://localhost:3000/users時，系統會調用/routes/users.js中的response.get()方法返回信息給客戶端。

如果本文對你有幫助，大家可以點贊轉發一波，有錯誤大家可以評論指出，感謝！

大家繼續加油，未來可期！Runsen的征途是星辰大海！

總結

以上是生活随笔為你收集整理的二十七、Node.js搭建第一个Express应用框架的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。