zoukankan      html  css  js  c++  java
  • 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);

      

  • 相关阅读:
    2016-12-31:最后一天:回顾
    ubuntu-15.10-server-i386.iso 安装 Oracle 11gR2 数据库
    ubuntu-15.04-server-i386.iso 安装 Oracle 11gR2 数据库
    ubuntu-16.04+-xxx-i386.iso :安装 Oracle 11gR2 数据库
    VirtualBox 所有版本的下载地址:http://download.virtualbox.org/virtualbox/
    上海医保每年注入时间
    打新股
    check system version
    add, subtract, multiply, divide
    WRITE T AFTER ADVANCING 2 LINES
  • 原文地址:https://www.cnblogs.com/lznzxy/p/10494893.html
Copyright © 2011-2022 走看看