一、基本框架
-
安裝express框架:
cnpm install express --save
-
步驟:
(1)導入
(2)實例化express
(3)監聽一個端口 8100 服務可以正常啓動
(4)配置後臺系統路由 app.get(…)
var express=require("express");
var app=new express();
app.get("/",function(req,res){
res.send("首頁");
});
app.get("/regest",function(req,res){
res.send("註冊");
});
app.get("/login",function(req,res){
res.send("登錄");
});
app.listen(8100);
二、express裏的動態路由傳參
直接在路由路徑後面配置參數(類似於 /:id)
var express=require("express");
var app=new express();
app.get("/:id/:name",function(req,res){
//路由的動態傳值 使用params接收傳遞參數
var id=req.params.id;
var name=req.params.name;
res.send("首頁---"+id+"---"+name);
});
app.listen(8100);
三、express裏的路由get傳參(類似於?id=1&name=2)
var express=require("express");
var app=new express();
app.get("/regest",function(req,res){
var id=req.query.id;
var name=req.query.name;
res.send("註冊---"+id+"---"+name);
});
app.listen(8100);
四、express裏使用靜態文件託管
- 設置靜態資源文件
var express=require("express");
var app=new express();
//設置靜態資源文件
app.use(express.static("static"));
- 設置虛擬靜態目錄
var express=require("express");
var app=new express();
app.use(express.static("public")); //給當前express框架設置一個靜態資源目錄爲public文件
//虛擬靜態目錄 如果路徑爲 /static/1.jpg 則會在public/1.jpg找
app.use("/static",express.static("public")); //直接將express裏面的靜態資源文件public動態修改爲static
五、express框架渲染ejs模板
- 使用
- express中使用
var express=require("express");
var ejs=require("ejs");
var app=new express();
app.set("view engine","ejs"); //模板引擎設置爲ejs
- 在express中使用ejs,文件組織遵循express
.views——放置動態模板
.public——放置靜態網頁
.layouts——放置佈局文件
- express框架使用ejs模板可以直接使用
渲染的時候直接找模板引擎的名稱,即res.render(“index”) 裏面直接寫模板的名字
var express=require("express");
var ejs=require("ejs");
var app=new express();
app.use(express.static("public"));
app.use("/static",express.static("public"));
//配置express框架 在views文件裏使用ejs模板
app.set("view engine","ejs");
app.get("/:id/:name",function(req,res){
res.render("index");
});
app.listen(8100);
- 通過express框架往index裏面渲染數據
App.js:
var express=require("express");
var ejs=require("ejs");
var app=new express();
app.use(express.static("public"));
app.use("/static",express.static("public"));
app.set("view engine","ejs"); //模板引擎設置爲ejs
app.get("/:id/:name",function(req,res){
//通過express框架往index裏面渲染數據
var id=req.params.id;
var name=req.params.name;
res.render("index",{
id:id,
name:name
});
});
app.listen(8100);
index.ejs:
<body>
<div>首頁</div>
<div><%=id%></div>
<div><%=name%></div>
</body>
- 框架渲染傳參與ejs.render()是一樣的