zoukankan      html  css  js  c++  java
  • express框架

    什么是express?

    express是基于node.js平台的后台框架,通俗点来说就是为了方便,快速的完成node

    在这里要注意一下!

    express不同于前台框架jQuery中jq对象和dom对象不可以混用,在express中是可以参差一些原生node的。

    express的下载:

    1.npm init  初始化pakage.json

    2.npm install express --save

    express的使用

    let express = require("express");//引入express
    let app = express();    //创建了一个express的应用
    app.use(express.static("./app"));   //静态伺服
    app.get(path,function(req,res){
        res.send({"name":"jack"})
    //send中是不需要转成str或者buffer,写的时候按照严格规范来
    })
    //这里的path可以是一种正则,大小写不区分自动转寒
    
    app.listen(3000);//监听端口

     这里就可以看出express相比较原生node减少了大量的代码使用

     express的一个重点模板引擎

    想要使用模板引擎就必须用到ejs模块

    // 引入ejs
    var ejs = require("ejs");
    
    //模板 day是变量
    var string = "今天星期<%= day %>,天气真好";
    
    //数据
    var data = {
        day : ""
    }
    // 数据绑定
    var html = ejs.render(string,data);
    console.log(html);//今天星期三,天气真好

    这里的模板写法十分独特,下面用一个实例来说明

    提醒一下:模板一定要写在ejs文件里

    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>

    js代码:

    原生node写法

    var ejs = require("ejs");
    var fs = require("fs");
    var http = require("http");
    
    var server = http.createServer(function(req,res){
        fs.readFile(path,function(err,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);

    中间件问题

    // 正常情况下未加中间件
    var express = require("express");
    var app = express();
    
    app.get("/",function(req,res){//每次都进入这里
        console.log(1)//1
    })
    app.get("/",function(req,res){//永远不会进入
        console.log(2)
    })
    
    app.listen(3000);

     每次都进入前面接口是因为我们path路径可以写成一个正则的形式,每次都可以匹配第一个接口,所以后面的接口永远不会进去

    // 当我们加入next中间件执行next()可以跳到下一个接口
    //1和2都会打印这说明两个接口都进入了
    var express = require("express");
    var app = express();
    
    app.get("/",function(req,res,next){
        console.log(1)//1
        next()
    })
    app.get("/",function(req,res){
        console.log(2)//2
    })
    app.listen(3000)

    这样我们就可以利用中间件做一个计数器,每次都会进入第一个请求。

    注意:

    中间件所在的位置至关重要,在下面的话就不行

    express的get和post获取参数方法

    // 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)
    //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);

     

  • 相关阅读:
    关于JQuery 中$.ajax函数利用jsonp实现Ajax跨域请求ASP.NET的WebService成功获取数据的案例
    js代码判断浏览器种类IE、FF、Opera、Safari、chrome及版本
    判断是否是IE浏览器
    点击不同位置实现同一个文件上传框上传头像
    如何去掉a标签的下划线
    jquery $(document).ready() 与window.onload的区别
    Java 程序 关于Properties 类使用Store方法时不能会覆盖以前Properties 文件的内容
    dom4j读取某个元素的某个属性
    字节流与字符流的区别详解
    Eclipse修改方法内容不用重启Jetty服务器
  • 原文地址:https://www.cnblogs.com/xuhanghang/p/10495077.html
Copyright © 2011-2022 走看看