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

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

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

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

4.路由

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

由：請(qǐng)求方式+請(qǐng)求路徑

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

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

（2）get接收數(shù)據(jù)

Express中內(nèi)置了一個(gè)API，可以直接通過(guò)request.query來(lái)獲取。

request.query

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

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

/path/:id

接受數(shù)據(jù)：req.params

（4）post接收數(shù)據(jù)

在Express中沒(méi)有內(nèi)置獲取 post 請(qǐng)求體的API，我們需要使用第三方插件 body-parser

安裝 npm install body-parser

配置 body-parser

進(jìn)行下方代碼的配置，就會(huì)在 request 請(qǐng)求對(duì)象上就會(huì)多出來(lái)一個(gè)屬性：body 我們就可以直接通過(guò) request.body 來(lái)獲取表單 POST 請(qǐng)求體的數(shù)據(jù)了

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傳遞數(shù)據(jù)

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

5.模板引擎

什么是模板引擎

模板引擎是一個(gè)將頁(yè)面模板和要顯示的數(shù)據(jù)結(jié)合起來(lái)生成HTML頁(yè)面的工具。

引入模板引擎設(shè)置模板目錄設(shè)置模板引擎渲染模板

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'); //設(shè)置模板存儲(chǔ)位置
app.set('view engine','ejs'); //設(shè)置模板引擎

設(shè)置模板引擎后綴

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

ejs的標(biāo)簽

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

語(yǔ)法

<% code %> //javascript代碼
<%= code %> //顯示替換過(guò)html的特殊字符內(nèi)容
<%- code %> //顯示原始html內(nèi)容(支持標(biāo)簽)

<%= code %>與<%- code %>的區(qū)別，code為普通字符串兩者沒(méi)有區(qū)別，為標(biāo)簽時(shí)<%- code %>會(huì)顯示標(biāo)簽效果

包含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)文件托管

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

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

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

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

前綴的使用意義：