express框架

一、什么是express

  express是后台的框架, jquery,bootstrap,easyui这些是前端框架,完全不是一个东西

  express作为后台框架当然是为了方便

    前端框架开发前台的时候:jquery jq对象 DOM对象,方法不能混用

    express 参差一点原生node也是OK的

  express官网:http://www.expressjs.com.cn/ 参考手册4.x

  express下载安装:

    1.npm init 初始化package.json

    2.npm install express --save (--save是更新package。json文件)

    npm install 可以根据package.json文件中的依赖项去安装node_modules文件夹中的包

二、express的基本写法:

var express = require("express");
var app = express();


app.use(express.static("./app"));   //静态伺服

app.get("/hello",function(req,res){
    res.send("hello express");
})











app.listen(3000);

三、模板引擎

  模板引擎(这里特指用于Web开发的模板引擎)是为了使用户界面与业务数据(内容)分离而产生的,它可以生成特定格式的文档,用于网站的模板引擎就会生成一个标准的HTML文档。

  1、ejs模板引擎

  原生node的写法:

var ejs = require("ejs");
var fs = require("fs");
var http = require("http");

var server = http.createServer(function(req,res){
    fs.readFile("./views/index.ejs",function(err,data){
        // 模板加载完成
        // console.log(data);
        var template = data.toString();
        // 数据
        var dota = {
            day : "三",
            news : [
                {"title" : "符书鑫穿裙子","num" : 300},
                {"title" : "林天浩吃鸡屁股","num" : 500},
                {"title" : "殷博眼睛疼","num":50}
            ]
        }
        // 数据和模板进行绑定
        var html = ejs.render(template,dota);


        // 展示
        res.writeHead(200,{"content-type":"text/html;charset=utf8"})
        res.end(html);


    })
});




server.listen(3000)

  express写法:

var express = require("express");
var app = express();

//使用模板引擎的时候需要设置
//1.不需要引入ejs,不需要引入fs,http
app.set("view engine","ejs");

// 展示
app.get("/",function(req,res){
    // 数据
    var data = {
        day : "三",
        news : [
            {"title" : "吃饭睡觉打豆豆","num" : 300},
            {"title" : "林天浩吃鸡屁股","num" : 500},
            {"title" : "殷博眼睛疼","num":50}
        ]
    }
    res.render("index",data)
})
app.listen(3000);

  ejs文件写法:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <h1>今天星期<%= day %>,天气真好</h1>
    <ul>
        <%
            for(var i = 0;i < news.length;i++){
                if(news[i].num > 100){
        %>
        
            <li><%= news[i].title %></li>

        <%
                }
            }
        %>
    </ul>

</body>
</html>

  2、jade模板引擎

var app = require("express")();

app.engine('jade',require("jade").__express);

app.set("view engine","jade");

app.get("/",function(req,res){
    res.render("jadetest");
})





app.listen(3000)

  jade文件:

html
    head
        title 今天下午考试
    body
        #box
            ul
                li 吃饭
                li 睡觉
        #box2

四、中间件问题

  我们先来看一段简单的代码:

var express = require("express");
var app = express();

app.get("/",function(req,res){
    console.log(1)
    // res.send("1");
})
app.get("/",function(req,res){
    console.log(2)

    // res.send("2");
})
app.listen(3000);

  这里运行服务器后台输出的是1,不是2,也不是1和2,这是为什么呢? express中接口可以写成正则的形式,后面的接口也能正好匹配这个接口,那么后面那个接口就再也进不去了

//路由的设计跟顺序是至关重要
app.get("/:username/:id",function(req,res){
    res.send("用户+编号界面")
})
app.get("/admin/login",function(req,res){   //这个地方永远进不去
    res.send("管理员登录界面")
})

  那么这个问题要怎么解决呢:

  回调函数中可以传入第三个参数next,然后函数体中进行判断,next()之后可以转到下一个接口匹配。

//路由的设计跟顺序是至关重要
app.get("/:username/:id",function(req,res,next){
    // if(检索数据库){
    //     res。send(用户信息)
    // }else{
    //     next()
    // }
    res.send("用户+编号界面")
})
app.get("/admin/login",function(req,res){   //这个地方永远进不去
    res.send("管理员登录界面")
})

五、express中获取请求参数的方式:

  1、获取get请求:

// express  获取get参数
// 原生的获取方式,就是url.parse(req.url,true).query

var express = require("express");
var app = express();

app.get("/",function(req,res){
    console.log(req.query);
    res.send("OK")
})

app.listen(3000)

  2、获取post请求:

//express 中post获取参数的方式
var express = require("express");
var bodyParser = require("body-parser");
var app = express()

app.set("views","st");
app.set("view engine","ejs"); 

app.get("/",function(req,res){
    res.render("form");
})

app.use(bodyParser.urlencoded({ extended: false }));   //post请求的请求头
app.post("/",function(req,res){
    console.log(req.body);
    res.send("post方式提交成功");
})



app.listen(3000);

  

原文地址:https://www.cnblogs.com/lznzxy/p/10494893.html