zoukankan      html  css  js  c++  java
  • node之Express框架

      Express是node的框架,通过Express我们快速搭建一个完整的网站,而不再只是前端了!所以Express还是非常值得学习的!

      express有各种中间件,我们可以在官方网站查询其用法。

      Express框架的核心特性如下:

    • 通过中间件来响应http请求。
    • 定义路由表来执行不同的HTTP请求动作。
    • 通过向模板传递参数来动态渲染页面。

      

    安装Express


    首先新建一个文件夹expressTest, 终端输入 npm init, 生成package.json文件。内容如下;

    {
      "name": "express",
      "version": "1.0.0",
      "description": "for Express test",
      "main": "index.js",
      "scripts": {
        "test": "echo "Error: no test specified" && exit 1"
      },
      "repository": {
        "type": "git",
        "url": "no"
      },
      "keywords": [
        "express"
      ],
      "author": "Johon Zhu",
      "license": "ISC"
    }
    View Code

    使用cnpm安装express(注意:这里需要使用cnpm,使用npm会报错),

    cnpm install express --save

    执行之后,我们就可以发现在当前目录下多了一个node_modules文件,其中包含了express的相关文件。

    在package.json文件中,可以发现多了依赖项express,如下:

    "dependencies": {
        "express": "^4.15.2"
      }

    安装下面几个重要的模块(安装express,就必须安装这几个配合使用)

    • body-parser   -  nodejs中间件,用于处理JSON、txt、Raw和Url编码的数据。
    • cookie-parser  -  用于解析cookie。
    • multer  -  nodejs中间件,用于处理enctype="multipart/form-data"的表单数据。
    cnpm install body-parser --save
    cnpm install cookie-parser --save
    cnpm install multer --save

      此时,在package.json中我们就可以看到目前的依赖项已经包含了四项:

    "dependencies": {
        "body-parser": "^1.17.1",
        "cookie-parser": "^1.4.3",
        "express": "^4.15.2",
        "multer": "^1.3.0"
      }
    View Code

      

    第一个Express框架实例


    在express.js文件下输入下面的代码:

    var express = require('express');
    var app = express();
     
    app.get('/', function (req, res) {
       res.send('Hello World');
    })
     
    var server = app.listen(8081, function () {
     
      var host = server.address().address
      var port = server.address().port
     
      console.log("应用实例,访问地址为 http://%s:%s", host, port)
     });

    在浏览器中输入127.0.0.1:8081,页面输出Hello world。 

    可以看出,最后如果我们不log,express的例子将会更加简单,如下:

    var express = require('express');
    var app = express();
     
    app.get('/', function (req, res) {
       res.send('Hello World');
    })
    
    var server = app.listen(8081);

    同样在访问localhost:8081时可以看到页面显示Hello World。

    重要: 因为引入了express框架,所以我们不需要自行再建立server.js、client.js,只需要通过这么一个文件就可以完成了。并且也没有引入url、http等。

    补充:有时gitbash汉字无法正常显示,可在gitbash中右键-> options -> text -> 设置charset为utf-8。  即可解决问题。

    Express 中的get、post


    app.get('/', function (req, res) {
       // --
    })

    其中,app为express(), 我们一般可以通过req和res来处理请求request和响应respond。 

    req对象包含了很多与请求相关的属性,重要的几个如下:

    • req.app 即访问express实例
    • req.body 获得请求主题
    • req.cookies 获得cookies
    • req.hostname获取主机名
    • req.ip获取主机ip
    • req.originalUrl 获取原始url
    • req.params 获取路由的parameters
    • req.path 获取请求路径
    • req.protocal 获取请求协议
    • req.query 获取url的查询字符串
    • req.accepts() 获取可接受的请求的文档类型
    • 。。。

    res对象包含了很多和响应有关的属性,重要的几个如下:

    • res.cookie() 设置cookie
    • res.json() 传送json响应
    • res.jsonp() 传送jsonp响应
    • res.send() 传送http响应
    • res.status() 设置状态码
    • res.type() 设置Content-Type的MIME类型

    路由


    之前我们通过app.get("/", function (req, res) {...}) 来处理的,但是他们每次访问的都默认是主页,而路由决定不同的页面,即路径不同,就响应不同。

    var express = require('express');
    var app = express();
     
    app.get('/', function (req, res) {
       res.send("主页get请求");
    });
    app.post('/', function (req, res) {
       res.send("主页post请求");
    });
    app.get('/delSomething', function (req, res) {
       res.send("删除页面get请求");
    });
    app.get('/addSomething', function (req, res) {
       res.send("添加页面get请求");
    })

      app.get('/g*d', function (req, res) {
        res.send("输入g()d,可以正则匹配");
      });

    var server = app.listen(8081);

    输出如下:

    即路径不同,返回不同。 这就是路由。

    静态文件


    nodejs提供了express.static中间件来设置css、js、图片等静态文件。

    即使用 express.use(express.static("public"));  即使用public文件夹下的静态文件,我们再public文件夹下放置一些css和js就可以访问了。如下:

    var express = require("express");
    var app = express();
    app.use(express.static("public"));
    app.get("/", function (req, res) {
        res.send("hello");
    });
    app.listen(8081);

    即首先需要引入express,然后app.use(express.static("public")),表示需要使用静态资源,且在public文件中。 然后监听端口就可以了。 

    注意: 在请求时, 不需要输入public,只需要输入public内的文件即可。

    get请求


    之前在使用node时,使用过类似的,是一个post请求,这里用express实现get请求,index.html如下:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>index</title>
    </head>
    <body>
        <form action="http://127.0.0.1:8081/process_get" method="get">
            <input type="text" name="name" placeholder="name"><br>
            <input type="text" name="age" placeholder="age"><br>
            <input type="submit">
        </form>
    </body>
    </html>

    注意到action,即将数据发送到action所在的接口上,在下面的modejs文件中我们定义了如果处理这个接口。

    js如下:

    var express = require("express");
    var app = express();
    app.get("/index.html", function (req, res) {
        res.sendFile(__dirname + "/" + "index.html");
    });
    app.get("/process_get", function (req, res) {
        var response = {
            name: req.query.name,
            age: req.query.age
        };
        res.send(response);
    });
    app.listen(8081);

    即请求Index.html时,返回html,如果再通过get方式来发送表单,我们就把用户输入的以json字符串的形式返回。 (注意这里sendFile和__dirname的应用)

    post请求


    get请求比较简单实现,但是安全性不高,所以可以使用post,使用post不会再url上添加查询字符串,而是直接发送,但是需要我们使用body-parser来编码。 如下:

    (注意:现在index.html的form内的method已经成了post, 如下:)

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>index</title>
    </head>
    <body>
        <form action="http://127.0.0.1:8081/process_get" method="post">
            <input type="text" name="name" placeholder="name"><br>
            <input type="text" name="age" placeholder="age"><br>
            <input type="submit">
        </form>
    </body>
    </html>

    js如下所示:

    var express = require("express");
    var app = express();
    var bodyParser = require("body-parser");
    var urlEcode = bodyParser.urlencoded({extended: false});
    app.get("/index.html", function (req, res) {
        res.sendFile(__dirname + "/" + "index.html");
    });
    app.post("/process_post",urlEcode, function (req, res) {
        var response = {
            name: req.body.name,
            age: req.body.age
        };
        res.send(response);
    });
    app.listen(8081);

    即首先引入express,然后引入body-parser,为什么呢? 我们在用get方法时直接传送查询字符串,但是post方法,就要传送数据了,而post方法就在body里,所以要使用body-parser将字符串解析为数据才能传送,最后,在处理post的接口process_post时,就要传入这个urlEcode作为参数用来解析, 另外值得注意的是response中要用req.body.name要和get方法里的req.query.name区分开来。

    文件上传:


     文件上传需要将index.html中form的enctype设置为multipart/form-data,这样才可以上传文件,另外,input的type设置为file。 

    如下:

    <html>
    <head>
    <title>文件上传表单</title>
    </head>
    <body>
    <form action="/file_upload" method="post" enctype="multipart/form-data">
    <input type="file" name="image" size="50" />
    <br />
    <input type="submit" value="上传文件" />
    </form>
    </body>
    </html>

     在nodejs中不仅仅要引入express,还要引入fs来对文件进行操作,引入body-parser来对文件的类型进行操作(类似于post),实际上文件上传就是post,因为post是传送的意思。

    var express = require("express");
    var app = express();
    var bodyParser = require("body-parser");
    var multer = require("multer");
    var fs = require("fs");
    
    app.use(express.static('public'));
    app.use(bodyParser.urlencoded({extended: false}));
    app.use(multer({dest: '/tmp/'}).array('image'));
    var urlEcode = bodyParser.urlencoded({extended: false});
    
    app.get("/index.html", function (req, res) {
        res.sendFile(__dirname + "/" + "index.html");
    });
    app.post("/file_post",function (req, res) {
        var des_file = __dirname + "/" + req.files[0].originalname;
        fs.readFile( req.files[0].path, function (err, data) {
               fs.writeFile(des_file, data, function (err) {
                if( err ){
                     console.log( err );
                }else{
                      response = {
                          message:'File uploaded successfully', 
                          filename:req.files[0].originalname
                     };
                 }
                 console.log( response );
                 res.end( JSON.stringify( response ) );
              });
          });
    });
    app.listen(8081);

    Cookie管理:


    var express = require("express");
    var cookieParser = require("cookie-parser");
    
    var app = express();
    app.use(cookieParser());
    app.get('/', function (req, res) {
        console.log("Cookies:",req.cookies);
    });
    app.listen(8081);

    引入cookie-parser,用于传递cookie,即向nodejs服务器发送cookie信息, req.cookies即客户端的cookie信息。

     

     学习资源: http://study.163.com/category/nodejs?utm_source=baidu&utm_medium=cpc&utm_campaign=affiliate&utm_term=IT-419&utm_content=SEM

     

     

     

     

     

     

     

  • 相关阅读:
    ASP'禁止网页缓存,验证码生成,删除文件 iFileName 文件名 iPath 文件路径
    ASP.NET中如何防范SQL注入式攻击
    ThickBox 2.0
    ASP.NET用户控件也可以在Web.Config中进行引用
    SQL Server数据类型介绍
    CSS和JS标签style属性对照表
    Server.UrlEncode、HttpUtility.UrlDecode的区别[两篇文章]
    使用table数据类型变量获得临时表
    关闭页面JS兼容火狐_谷歌_IE6、7、8
    SQL语句实现两个数据库表直接操作
  • 原文地址:https://www.cnblogs.com/zhuzhenwei918/p/6708038.html
Copyright © 2011-2022 走看看