Node express框架

一、基本框架

  1. 安装express框架:cnpm install express --save

  2. 步骤:

(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里使用静态文件托管

  1. 设置静态资源文件
var express=require("express");
var app=new express();

//设置静态资源文件
app.use(express.static("static"));

在这里插入图片描述

  1. 设置虚拟静态目录
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模板

  1. 使用
  • 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——放置布局文件

  1. 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);

在这里插入图片描述

  1. 通过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;
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章