一、Nodejs安裝

1.在nodejs.org下載nodejs并安裝。

2.在cmd里面運(yùn)行 npm config set registry https://registry.npmmirror.com （把npm包的下載路徑設(shè)置為國(guó)內(nèi)的淘寶鏡像）

二、Express安裝配置

1. 在cmd里面運(yùn)行 npm config set registry https://registry.npmmirror.com （把npm包的下載路徑設(shè)置為國(guó)內(nèi)的淘寶鏡像）

1. 接著運(yùn)行npm install -g express-generator

第一步：在win10中找到powershell

第二步：以管理員身份運(yùn)行PowerShell

第三步：輸入set-ExecutionPolicy RemoteSigned

第四步：選A

ok，問(wèn)題解決

三、Express項(xiàng)目創(chuàng)建

1.進(jìn)入你想放項(xiàng)目的文件夾（例如）：

cd D:\計(jì)算機(jī)教師\File\Nodejs

或者通過(guò)vscode打開(kāi)終端

2.創(chuàng)建一個(gè)項(xiàng)目：

運(yùn)行：express myapp

3.進(jìn)入目錄：

【打開(kāi)終端】

運(yùn)行npm i

4.啟動(dòng)項(xiàng)目：

運(yùn)行：npm start

5.打開(kāi)瀏覽器訪問(wèn)：

http://localhost:3000

會(huì)看到 Express 自帶的歡迎頁(yè)面 ?

四、項(xiàng)目結(jié)構(gòu)講解

生成后的目錄大致如下：

myapp/

│

├─ app.js              ← 入口文件，項(xiàng)目核心邏輯（重點(diǎn)講）

├─ bin/

│   └─ www             ← 啟動(dòng)文件（運(yùn)行服務(wù)器）

├─ package.json        ← 項(xiàng)目信息與依賴記錄

│

├─ public/             ← 靜態(tài)資源目錄（HTML、CSS、JS、圖片）

│   ├─ images/

│   ├─ javascripts/

│   └─ stylesheets/

│

├─ routes/             ← 路由目錄（定義訪問(wèn)路徑）

│   ├─ index.js        ← 首頁(yè)路由

│   └─ users.js        ← 用戶路由

│

├─ views/              ← 視圖目錄（頁(yè)面模板）

│   ├─ error.jade

│   ├─ index.jade

│   └─ layout.jade

五、核心文件講解

?? 1. bin/www（服務(wù)器啟動(dòng)文件）

#!/usr/bin/env node
// 導(dǎo)入 app.js
var app = require('../app');
var http = require('http');
// 設(shè)置端口
var port = normalizePort(process.env.PORT || '3000');
app.set('port', port);
// 創(chuàng)建 HTTP 服務(wù)器
var server = http.createServer(app);
// 監(jiān)聽(tīng)端口
server.listen(port);
console.log('服務(wù)器已啟動(dòng)：http://localhost:' + port);

講解：

• 這是項(xiàng)目真正的“入口”，通過(guò) require('../app') 加載主應(yīng)用。
• Express 生成器把服務(wù)器啟動(dòng)與業(yè)務(wù)邏輯分開(kāi)，方便管理。
• 默認(rèn)監(jiān)聽(tīng) 3000 端口。

?? 2. app.js（核心應(yīng)用邏輯文件）

// 1. 引入模塊
var express = require('express'); // 導(dǎo)入 express 框架
var path = require('path'); // 處理路徑
var cookieParser = require('cookie-parser'); // 解析 cookie
var logger = require('morgan'); // 日志工具
// 2. 引入路由文件
var indexRouter = require('./routes/index');
var usersRouter = require('./routes/users');
// 3. 創(chuàng)建 express 應(yīng)用對(duì)象
var app = express();
// 4. 設(shè)置模板引擎
app.set('views', path.join(__dirname, 'views')); // 模板目錄
app.set('view engine', 'jade'); // 模板引擎（默認(rèn) jade，可改 ejs/pug）
// 5. 使用中間件（Middleware）
app.use(logger('dev')); // 打印請(qǐng)求日志
app.use(express.json()); // 解析 JSON 請(qǐng)求體
app.use(express.urlencoded({ extended: false })); // 解析表單數(shù)據(jù)
app.use(cookieParser()); // 處理 Cookie
app.use(express.static(path.join(__dirname, 'public'))); // 提供靜態(tài)資源訪問(wèn)
// 6. 路由綁定
app.use('/', indexRouter); // 首頁(yè)路由
app.use('/users', usersRouter); // 用戶路由
// 7. 404 錯(cuò)誤處理
app.use(function(req, res, next) {
  res.status(404).send('頁(yè)面未找到！');
});
// 8. 導(dǎo)出 app 對(duì)象供 www 調(diào)用
module.exports = app;

講解要點(diǎn)：

• express() 創(chuàng)建服務(wù)器實(shí)例。
• .use() 表示“注冊(cè)中間件”，每個(gè)中間件處理請(qǐng)求的一部分。
• .set('view engine', 'jade') 設(shè)置模板語(yǔ)言。
• .use('/', indexRouter) 表示訪問(wèn) / 時(shí)調(diào)用 routes/index.js 文件。
• 最后 module.exports = app; 是導(dǎo)出給 www 啟動(dòng)文件用的。

?? 3. routes/index.js（首頁(yè)路由）

var express = require('express');
var router = express.Router();
// GET / 首頁(yè)路由
router.get('/', function(req, res, next) {
  res.render('index', { title: 'Express 首頁(yè)' });
});
// 導(dǎo)出路由
module.exports = router;

講解：

• router.get() 表示訪問(wèn) / 路徑時(shí)執(zhí)行。
• res.render('index', {...}) 會(huì)渲染 views/index.jade 模板。
• 模板中會(huì)使用 { title: 'Express 首頁(yè)' } 這個(gè)變量。

?? 4. views/index.jade（模板文件）

extends layout
block content
  h1= title
  p 歡迎來(lái)到 #{title}

Jade 模板是一種簡(jiǎn)化版 HTML（縮進(jìn)代表層級(jí)）。

你可以把它改成 ejs 或 pug，也可以輸出普通 HTML。

?? 5. public/（靜態(tài)資源目錄）

• public/stylesheets/style.css：樣式文件
• public/javascripts/：放前端 JS
• public/images/：放圖片

訪問(wèn)示例：

http://localhost:3000/stylesheets/style.css

總結(jié)

到此這篇關(guān)于Nodejs中Express安裝配置以及使用教程的文章就介紹到這了,更多相關(guān)Nodejs Express安裝配置及使用內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論