一、基本框架
-
安裝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()是一樣的
六、模擬express框架裏的路由
App.js：
var http=require("http");
var app=require("./router");
http.createServer(app).listen(8100);
//註冊路由
app.get("/",function(req,res){
res.send("首頁");
});
app.get("/login",function(req,res){
res.send("login");
});
router.js：
var url=require("url");
var obj={};
var app=function(req,res){
res.send=function(data){
res.writeHead(200,{"Content-Type":"text/html;charset=utf-8"});
res.end(data);
}
var path=url.parse(req.url).pathname;
if(path=="/favicon.ico") return;
if(obj[path]){
obj[path](req,res);
}else{
res.end("404");
}
}
app.get=function(string,callback){
obj[string]=callback;
}
module.exports=app;