express路由、靜態託管、ejs模板引擎
阿新 • • 發佈：2021-09-04
-
app.js
配置不同的路由
const express = require("express")
const querystring = require("querystring")
const app = express();
// http://127.0.0.1:3000/?name=user&age=12
app.get("/",(req,res) => {
var query = req.query;
console.log(query);//{ name: 'user', age: '12' }
res.send("你好express");
})
app.get("/register",(req,res) => { //
ejs模板使用、靜態資源託管
/** * express中使用ejs模板引擎 * express預設集成了ejs * 1、安裝 cnpm install ejs --save * 2、app.set("view engine","ejs") * 3、使用 預設載入模板引擎的資料夾是views * res.render("index",{ * * }) * * 如何將模板的.ejs字尾設定成.html字尾 沒有下面的設定 那麼模板的字尾名就用.ejs * 1、引入ejs const ejs = require("ejs") 不用安裝ejs哦 * 2、app.engine("html",ejs.__express) * 3、app.set("view engine","html") * * * 配置靜態託管 * app.use(express.static('public')) * 也可以配置虛擬目錄 * app.use('/static',express.static('public')) 正常訪問public下的靜態資源 前面需要加上./static*/ const express = require("express"); const ejs = require("ejs"); const app = express(); // 配置靜態資源託管 app.use(express.static("static")) // 使用ejs模板引擎 並設定模板字尾為.html字尾 app.engine("html",ejs.__express) app.set("view engine","html") // 指定模板位置(預設是views) 可以省去行程式碼 app.set("views",__dirname+'/views') app.get("/",(req,res) => { let title = "你好ejs" res.render("index",{ title:title, }) }) app.get("/news",(req,res) => { let userInfo = {name:"張三",age:18}; let artical = "<h3>我是一個html標籤</h3>" let list = [111,222,333] res.render("./news",{ userInfo, artical, flag:true, score:Math.random()*10, list, }) }) app.listen(3000)
news.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>news</title> <link rel="stylesheet" href="css/base.css"> </head> <body> <h2>繫結資料</h2> <div><%=userInfo.name%>---<%=userInfo.age%></div> <h2>解析html標籤</h2> <div><%-artical%></div> <h2>條件判斷</h2> <%if(flag == true){%> <div>flag == true</div> <%}%> <%if(score > 6){%> <div>及格</div> <%}else{%> <div>不及格</div> <%}%> <h2>迴圈遍歷</h2> <ul> <%for(var i = 0;i < list.length;i++){%> <li><%=list[i]%></li> <%}%> </ul> <h2>引入公共元件</h2> <%-include('./footer.html')%> </body> </html>
-