腳本之家服務器常用軟件

快捷導航

node中的Express框架詳解

更新時間：2023年04月22日 08:43:33 作者：憶凡_

這篇文章主要介紹了node中的Express框架,框架是為了規(guī)范開發(fā)流程，降低開發(fā)難度，提高開發(fā)效率而制定的一套共人們使用的功能模塊或者是編程的約定,需要的朋友可以參考下

Express框架

Express文檔

1.什么是框架

可以理解為是一條路，要遵守一定的規(guī)則，就會給咱們提供很多便利。為了規(guī)范開發(fā)流程，降低開發(fā)難度，提高開發(fā)效率而制定的一套共人們使用的功能模塊或者是編程的約定。

2.express安裝

mkdir myapp 創(chuàng)建項目目錄。
cd myapp==>npm init。
npm install express --save （可替換為[-S]）。

3.創(chuàng)建web服務

基本遵循之前的四個步驟：

導入需要使用的express包
創(chuàng)建web實例
定義允許訪問的地址 ( 路由 )
- 原先的輸出： res.end()
- 使用express后的輸出： res.send()
啟動服務（監(jiān)聽端口）

//前提是安裝好express，導包
let express=require('express');
//創(chuàng)建web服務
let app=express();

//配置路由
  //監(jiān)聽  get請求
  //req  請求對象
  //res  響應對象 
app.get("請求的URL",(req,res)=>{
    //邏輯
    //向客戶端響應數據
    res.send({id:1,name:'張三'})
});
//監(jiān)聽post請求
app.post("請求的URL",(req,res)=>{
    //邏輯
});
......

//開啟服務器
app.listen(8000,()=>{})

4.路由

接收發(fā)送請求，分析請求路徑（pathname），分發(fā)到指定的位置。

由：請求方式+請求路徑

（1）get發(fā)送數據

查詢字符串：？key=value&key=value

（2）get接收數據

Express中內置了一個API，可以直接通過request.query來獲取。

request.query

// 在express中可以直接通過 request.query 來獲取字符串參數
// http://127.0.0.1:4000/about?name=zhangsan&message=hello
app.get('/about',function (request,response) {
  console.log(request.query);
  response.send('關于我');
})

（3）get動態(tài)路由

/path/:id

接受數據：req.params

（4）post接收數據

在Express中沒有內置獲取 post 請求體的API，我們需要使用第三方插件 body-parser

安裝 npm install body-parser

配置 body-parser

進行下方代碼的配置，就會在 request 請求對象上就會多出來一個屬性：body 我們就可以直接通過 request.body 來獲取表單 POST 請求體的數據了

app.use(bodyParser.urlencoded({ extended: false }))
app.use(bodyParser.json())

使用

var express = require('express')
var bodyParser = require('body-parser')

var app = express()

app.use(bodyParser.urlencoded({ extended: false }))
app.use(bodyParser.json())

app.post('/about',function (request,response) {
  console.log(request.body);
})

（5）post傳遞數據

const express = require('express');
const app = express();
app.post('/api/post', function(req, res) {
  // 直接返回對象
  res.send({ name: 'abc' });
});
app.listen('8088', () => {
  console.log('8088');
});

5.模板引擎

什么是模板引擎

模板引擎是一個將頁面模板和要顯示的數據結合起來生成HTML頁面的工具。

引入模板引擎設置模板目錄設置模板引擎渲染模板

app.render(viewname,data,callback)

原理

function render(tpl,data){
    return tpl.replace(/\{\{(\w+)\}\}/g,function(input,words){
        return data[words];
        })
}
var result = render('<h1>{{title}}</h1>',{title:'人生如此美好'})

在express中使用模板引擎

app.set('views','./views'); //設置模板存儲位置
app.set('view engine','ejs'); //設置模板引擎

設置模板引擎后綴

app.set('views',path.join(__dirname,'views')); //設置模板存儲位置
app.set('view engine','html');
app.engine('html',require('ejs').renderFile); //使用ejs模板引擎解析html

ejs的標簽

<% ‘Scriptlet’ 標簽, 用于控制流，沒有輸出
<%= 向模板輸出值（帶有轉義）
<%- 向模板輸出沒有轉義的值
<%# 注釋標簽，不執(zhí)行，也沒有輸出
<%% 輸出字面的 ‘<%’
%> 普通的結束標簽

語法

<% code %> //javascript代碼
<%= code %> //顯示替換過html的特殊字符內容
<%- code %> //顯示原始html內容(支持標簽)

<%= code %>與<%- code %>的區(qū)別，code為普通字符串兩者沒有區(qū)別，為標簽時<%- code %>會顯示標簽效果

包含include

<% include header %>
<% include tpl/footer %>

自定義分隔符

app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'ejs');
var ejs = require('ejs');
ejs.delimiter = '$';
app.engine('ejs',ejs.renderFile);

6.靜態(tài)文件托管

設置靜態(tài)托管：app.use( express.static ( ) )

本方法一定要寫在具體的路由監(jiān)聽之前。

app.use(express.static('static'));
//讓app實例去使用一些內容（常規(guī)的方法，也是一些中間件）；
//express.static("public")中的參數是靜態(tài)路由資源所在的目錄的名字

//其還支持虛擬的前綴用于迷惑被人
app.use('/gjsgadjgajdgadgajdga',express.static('static'));

前綴的使用意義：