Node.js學習——Express的路由、動態(tài)路由、get 傳值、引入ejs

一、安裝express

1. 局部安裝

生成package.json文件。

npm init

或：

npm init -y         // -y表示快速生成

下載并安裝express，并寫入package.json。

npm install express --save

或簡寫為：

npm i express -S

2. 全局安裝express

npm install express --global

或：

npm i express -g

3. 使用express的腳手架生成器生成項目框架

詳情可查看官網：https://www.expressjs.com.cn/starter/generator.html
全局安裝express-generator

npm install express-generator -g

使用如下指令在指定目錄下新建express項目

express --view=ejs OperateExpressGenerator

此處使用的是ejs模板引擎，OperateExpressGenerator就是新建的express項目目錄，
到指定目錄下install各個模塊

npm  install

啟動項目使用指令

node start

或者

node ./bin/www

二、路由、動態(tài)路由、get 傳值、請求對象req、響應對象res

const express = require('express')

const app=express()

app.get("/",(req,res)=>{
    res.send("你好 express")
})

app.get('/.*fly$', function(req, res) {    // app.js-路由路徑匹配fly結尾的任意路徑
    res.send('/.*fly$');
})

app.get("/article",(req,res)=>{
    res.send("新聞頁面")
})

app.get("/login",(req,res)=>{
    res.send("登錄")
})

app.get("/register",(req,res)=>{  //get:顯示數(shù)據(jù)
    res.send("注冊頁面")
})
// 請求對象req
// 地址欄輸入http://localhost:3000/aa/bb/cc/3?a=1&b=2
app.get('/aa/bb/cc/:id', function (req, res) {
    // 1.req.originalUrl:獲取請路由配置的原始url由baseUrl和url組成
    console.log(req.originalUrl); // 返回結果為/aa/bb/cc/3?a=1&b=2

    // 2.req.hostname:獲取用戶請求的域名 
    console.log(req.hostname);  // localhost

    // 3.req.ip:獲取用戶請求的ip地址，可以用來設置白名單 
    console.log(req.ip);    // ::1

    // 4.req.method:獲取用戶請求方法，可以手動實現(xiàn)路由功能 
    console.log(req.method);    // GET

    // 5.req.params:用來獲取路由動態(tài)參數(shù)中的內容 
    console.log(req.params);    // { id: '3' }

    // 6.req.path:獲取url請求中的路徑，注意不是host，port或query，僅僅是路徑，可以手動實現(xiàn)路由功能
    console.log(req.path);  // /aa/bb/cc/3

    // 7.req.protocol:獲取客戶端請求的協(xié)議，一般是http或https
    console.log(req.protocol);  // http

    // 8.req.secure:判斷用戶是否是https請求，返回boolean值
    console.log(req.secure);    // false

    // 9.req.xhr:用來判斷是否是Ajax請求（XMLHttprequest），返回boolean值   
    console.log(req.xhr);   // false

    res.send()
});

// 響應對象res
var goods = {
    "iphonex": {
        "nums": 100,
        "price": 1999.98,
        "color": "red"
    },
    "car": {
        "nums": 100,
        "price": 9999999,
        "color": "black"
    }
}
router.get('/testRes', function (req, res) {
    // 1.res.json():給客戶端發(fā)送json數(shù)據(jù)
    res.json({error:0,data:goods}); 

    // 2.res.send():發(fā)送數(shù)據(jù)給客戶端，可以是字符串，json對象或buffer
    res.send('success');
    res.send(goods);
    res.send(Buffer.from('Hi,Harrison!')); 

    // 3.res.render():渲染指定模板給客戶端
    res.render('index', {
        title: 'Hi,Hou sir!'
    });

    // 4.res.redirect():重定向
    res.redirect('/login');

    // 5.res.status():設置響應header狀態(tài)碼，比如200,301,404,500等
    res.status(200).send('success');

    // 6.res.sendStatus():同樣是設置響應header狀態(tài)碼，它等同于send + status兩個方法的鏈式操作
    res.sendStatus(200); // 等效于 res.status(200).send('OK')
    res.sendStatus(403); // 等效于 res.status(403).send('Forbidden')
    res.sendStatus(404); // 等效于 res.status(404).send('Not Found')
    res.sendStatus(500); // 等效于 res.status(500).send('Internal Server Error') 

    // 7.res.set(),res.setHeader:設置響應head信息，如content-type，content-lenght等
    res.setHeader('Content-Type', 'text/html;charset=utf8');
    res.set({
        'Content-Type': 'application/json'
    });

    console.log(res.get('Content-Type'));
    
    res.setHeader('Access-Control-Allow-Origin', '*');
    res.setHeader('Access-Control-Allow-Methods', 'GET, POST');
    res.setHeader('Access-Control-Allow-Headers', 'X-Requested-With,content-type, Authorization');
    res.setHeader("Content-Type", "application/json;charset=utf-8");

    res.end();

    // 8.res.end():結束請求響應循環(huán)
    res.end();
});

app.post("/doLogin",(req,res)=>{   //post:增加數(shù)據(jù)
    console.log("執(zhí)行登錄")
    res.send("執(zhí)行登錄")
})

app.put("/editUser",(req,res)=>{  //put：主要用于修改數(shù)據(jù)
    console.log("修改用戶")
    res.send("修改用戶")
})

app.delete("/deleteUser",(req,res)=>{  //delete：主要用于刪除數(shù)據(jù)
    console.log("執(zhí)行刪除")
    res.send("執(zhí)行刪除")
})

app.all('/secret', function(req,res,next){  // all：接收任意的http方法
    res.send('This is all request page!')
})

//路由里面配置多級目錄  http://localhost:3000/admin/user/edit
app.get("/admin/user/add",(req,res)=>{
    res.send("admin user add")
})

app.get("/admin/user/edit",(req,res)=>{
    res.send("admin user  edit")
})

//動態(tài)路由  配置路由的時候也要注意順序
app.get("/article/add",(req,res)=>{
    res.send("article add")
})

app.get("/article/:id",(req,res)=>{
    var id=req.params["id"]    //獲取動態(tài)路由
    res.send("動態(tài)路由"+id)
})

app.get('/users/:uid/movies/:mid', function(req, res) {
    res.send(req.params);
    // 訪問localhost:3000/users/1/movies/2時得到{'uid':1,'mid':3}
})


//get 傳值  http://localhost:3000/product?id=123&cid=123
app.get("/product",(req,res)=>{
    let query = req.query   //獲取get傳值
    console.log(query)
    res.send("product-"+query.id)
})

app.listen(3000)

注意
1、在使用express獲取動態(tài)路由時

app.get("/article/:id",(req,res)=>{
    var id=req.params["id"]    //獲取動態(tài)路由
    res.send("動態(tài)路由"+id)
})

id是作為路由類型的占位符，可以替代其他值
2、獲取get傳值是通過let query = req.query //獲取get傳值

三、引入ejs

1、安裝 cnpm install ejs --save
2、配置 app.set("view engine","ejs")
3、使用 (默認加載模板引擎的文件夾是views)

    res.render("index",{

    })

4、改變加載模板引擎文件夾

app.set('views', __dirname + '/views');

__dirname表示當前文件目錄，此處的__dirname + '/views'可以換為其他的文件路徑

新建app.js文件

const express = require("express");
const app = express()
//配置模板引擎
app.set("view engine","ejs")

app.get("/",(req,res)=>{
    let title = "你好ejs";
    res.render("index",{
        title:title
    })
})

app.get("/news",(req,res)=>{
    let userinfo={
        username:"張三",
        age:20
    }
    let article="<h3>我是一個h3</h3>"

    let list=["1111","22222","3333333"]

    let newsList=[
        {
            title:"新聞1111",          
        },
        {
            title:"新聞122222",          
        },
        {
            title:"新聞33331",          
        },
        {
            title:"新聞44444",          
        }
    ]

    res.render("news",{
        userinfo:userinfo,
        article:article,
        flag:true,
        score:60,
        list:list,
        newsList:newsList
    })
})

//監(jiān)聽端口  端口號建議寫成3000以上
app.listen(3000)

注意
上面的res.render()的第一個參數(shù)是需要加載的目錄文件
此時新建/views/index.ejs

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h2>我是一個ejs模板引擎</h2>
    <p><%=title%></p>

    <%- include('footer.ejs') %>
</body>
</html>

新建/views/news.ejs

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h2>綁定數(shù)據(jù)</h2>
    <p><%=userinfo.username%>---<%=userinfo.age%></p>

    <p><%=article%></p>

    <p><%-article%></p>

    <h2>條件判斷</h2>

    <%if(flag==true){%>
        <strong>flag=true</strong>
    <%}%>

    <%if(score>=60){%>
        <p>及格</p>
    <%}else{%>
       不及格
    <%}%>

    <h2>循環(huán)遍歷</h2>

    <ul>
        <%for(let i=0;i<list.length;i++){%>
            <li><%=list[i]%></li>
        <%}%>        
    </ul>
    <br>

    <ul>
        <%for(let i=0;i<newsList.length;i++){%>
            <li><%=newsList[i].title%></li>
        <%}%>        
    </ul>

    <%- include('footer.ejs') %>
</body>
</html>

新建/viewss/footer.ejs

<footer>
    <h1>公共的底部</h1>
</footer>

注意

  • <% “腳本”標簽，用于流程控制，無輸出；
  • <%_ 刪除其前面的空格符；
  • <%= 輸出數(shù)據(jù)到模板，輸出的是轉義HTML標簽；
  • <%- 輸出非轉義的數(shù)據(jù)到模板；
  • <%# 注釋標簽，不執(zhí)行、不輸出內容；
  • <%% 輸出字符串 '<%'；
  • %> 一般結束標簽；
  • -%> 刪除緊隨其后的換行符；
  • _%> 將結束標簽后面的空格符刪除。
    例如：
  • <%-%>中-后面可以有空格，<%-%>主要就是解析-后面的內容，比如<h3>我是一個h3</h3>、include('footer.ejs')
  • <%=%>中=后面接的是顯示的內容
  • <%%>中可以寫JavaScript語句

5、使用ejs模板引擎注冊html模板引擎

var ejs = require('ejs'); 
app.engine('html',ejs.__express);
app.set("view engine","html")

此時引入的模板引擎的后綴名改為.html
即將views/index.ejs、views/news.ejs、views/footer.ejs改為views/index.html、views/news.html、views/footer.html、
6、配置靜態(tài)web目錄

app.use(express.static("static"))

此時在目錄/static中新建文件bese.css

h1{
    background: red;
}

在views/index.html、views/news.html中引入該css文件就能引入/static中設置的樣式

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="/css/base.css">
</head>
最后編輯于 ：
?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
【社區(qū)內容提示】社區(qū)部分內容疑似由AI輔助生成，瀏覽時請結合常識與多方信息審慎甄別。
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發(fā)布，文章內容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務。

相關閱讀更多精彩內容

友情鏈接更多精彩內容