Node.js之express框架

作者: LemonnYan | 来源:发表于2018-03-02 11:40 被阅读14次

    一、express简介

    Express 是一个简洁而灵活的 node.js Web应用框架, 提供了一系列强大特性帮助你创建各种 Web 应用,和丰富的 HTTP 工具。

    Web 应用:Express 是一个基于 Node.js 平台的极简、灵活的 web 应用开发框架,它提供一系列强大的特性,帮助创建各种 Web 和移动设备应用。
    API:丰富的 HTTP 快捷方法和任意排列组合的 Connect 中间件,让你创建健壮、友好的 API 变得既快速又简单。
    性能:Express 不对 Node.js 已有的特性进行二次抽象,只是在它之上扩展了 Web 应用所需的基本功能。

    Express 框架核心特性:

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

    二、安装 Express

    Step1:为你的应用创建一个目录,然后进入此目录并将其作为当前工作目录,如在D盘创建node-test文件夹。


    image.png

    Step2:通过 npm init 命令为你的应用创建一个 package.json 文件,此命令将要求你输入几个参数,例如此应用的名称和版本。 你可以直接按“回车”键接受默认设置即可。


    image.png

    Step3:接下来安装 Express 并将其保存到依赖列表中:


    image.png

    以上命令会将 Express 框架安装在当前目录的 node_modules 目录中, node_modules 目录下会自动创建 express 目录。

    注释:安装 Node 模块时,如果指定了 --save 参数,那么此模块将被添加到 package.json 文件中 dependencies 依赖列表中。 然后通过 npm install 命令即可自动安装依赖列表中所列出的所有模块。

    创建完成后的工作目录:


    image.png

    同时你也会发现,多了一个目录,叫 node_modules,这就是存放刚才安装的 express 库所有要用到的源码文件。
    如果你使用的是 npm 5,可能还会在目录中看到一个 package-lock.json 文件。

    以下几个重要的模块需要与 express 框架一起安装:

    • body-parser 用于处理 JSON, Raw, Text 和 URL 编码的数据。
    • cookie-parser 解析Cookie的工具。通过req.cookies可以取到传过来的cookie,并把它们转成对象。
    • multer 用于处理 enctype="multipart/form-data"(设置表单的MIME编码)的表单数据。

    安装方法:

    cnpm install body-parser --save
    cnpm install cookie-parser --save
    cnpm install multer --save
    

    安装后的配置文件:


    image.png

    三、简单实例

    1、hello world例子

    在项目根目录下创建express.js文件,并输入如下代码:

    //express.js
    var express=require('express');
    var app=express();
    //主页输出 "Hello World"
    app.get('/',function (req,res) {
        res.send('Hello World');
    })
    //创建服务并监听8081端口
    var server=app.listen(8081,function () {
        var host=server.address().address;
        var port=server.address().port;
        console.log("应用实例,访问地址为 http://%s:%s", host, port)
    })
    

    启动服务,打开命令行,输入node express.js执行命令:

    image.png

    在浏览器中访问 http://127.0.0.1:8081,结果如图:

    image.png
    2、路由和静态文件

    在项目根目录下创建express2.js文件,并输入如下代码:

    //express2.js
    var express =require('express');
    var app=express();
    //访问静态文件
    app.use(express.static('public'));
    
    //主页输出hello world
    app.get('/',function (req,res) {
        console.log('主页get请求');
        res.send('hello get');
    })
    //post请求
    app.post('/',function (req,res) {
        console.log('主页post请求');
        res.send('hello post');
    })
    //del_user页面相应
    app.get('/del_user',function (req,res) {
        console.log('/del_user响应delete请求');
        res.send('删除页面');
    })
    //list_user页面
    app.get('/list_user',function (req,res) {
        console.log('/list_user响应');
        res.send('用户列表页面');
    })
    //对页面abcd,abxcd,ab123cd等响应get请求
    app.get('/ab*cd',function (req,res) {
        console.log('/ab*cd请求页面');
        res.send('正则匹配页面');
    })
    //创建服务并监听8081端口
    var server=app.listen(8081,function () {
        var host=server.address().address;
        var port=server.address().port;
        console.log('应用实例,访问地址为http://%s:%s',host,port);
    })
    
    

    打开命令行,输入node express2.js执行命令:

    image.png

    在浏览器中访问 http://127.0.0.1:8081,结果如下图所示:

    image.png

    在浏览器中访问 http://127.0.0.1:8081/list_user,结果如下图所示:

    image.png

    在浏览器中访问 http://127.0.0.1:8081/abcd,结果如下图所示:

    image.png

    Express 提供了内置的中间件 express.static 来设置静态文件如:图片, CSS, JavaScript 等。可以使用 express.static 中间件来设置静态文件路径。例如,如果将图片, CSS, JavaScript 文件放在 public 目录下,可以这么写:

    app.use(express.static('public'));
    

    在浏览器中访问 http://127.0.0.1:8081/111.png,结果如下图所示:

    image.png

    参考:express中文网
    nodejs教程

    相关文章

      网友评论

        本文标题:Node.js之express框架

        本文链接:https://www.haomeiwen.com/subject/hiboxftx.html