美文网首页
Node学习笔记二:Hello Express

Node学习笔记二:Hello Express

作者: PM熊叔 | 来源:发表于2015-09-06 20:53 被阅读529次

    Express 版本:4.13.1

    1 启动服务

    1.1 手动启动

    如果需要手动启动服务,执行命令:

     npm start
    

    或:

    DEBUG=LearnNodejs:* npm start
    

    1.2 Supervisor自动监测文件变化

    Superviosr 安装资料 https://github.com/petruisfan/node-supervisor

    全局安装

    npm install supervisor -g
    

    安装完毕后,执行命令:

    supervisor bin/www
    

    supervisor 默认监测的是当前目录下的所有文件。当项目文件夹中有文件变化时,会重新执行 bin/www文件;
    为何不是supervisor app.js?
    打开package.json

    "scripts": {
        "start": "node ./bin/www"
      }
    

    可以发现新版的express入口文件是bin/www而不是app.js
    所以Supervisor 应该指向bin/www,既当文件发生改变的时候执行node bing/www

    2 初识视图与路由:

    2.1 添加视图:

    ./views/创建:about.jad
    输入代码

    extends layout
    
    block content
      h1= title
      p this is #{title}
    

    2.2 添加路由

    在路由文件夹:./routes/添加about.js作为新的路由模块,
    输入代码

    var express = require('express');
    var router = express.Router();
    
    /* GET about */
    router.get('/',function(req,res,next){ 
       //引用刚刚创建的视图:./views/about.jad文件
        res.render('about',{title:'About'});
    });
    
    module.exports = router;
    
    

    在app.js加入以下代码

    //引入about路由模块
    var about = require('./routes/about');
    //当用户访问localhost:3000/about/路径时 使用about模块
    app.use('/about',about);
    

    如果是需要制定更深层的路径,例如: /about/me该怎么做?
    打开routes/about.js文件,添加以下代码

    /* GET about/me */
    router.get('/me',function(req,res,next){
        res.render('about',{title:'me'});
    });
    
    我们可以看出,在`routes/about.js`作为一个子模块(sub-app)加载到app.js中。
    

    3 更换模板引擎

    Express 默认的模板引擎为jad,如果要使用underscore.js模板怎么办?

    3.1 安装underscore-express

    npm install underscore-express
    

    在app.js中引入underscore-express:

    // view engine setup
    app.set('views', path.join(__dirname, 'views'));
    //设置模板文件格式`tmpl`
    app.set('view engine', 'tmpl');
    //引入underscore-express
    require('underscore-express')(app);
    

    3.2 创建undercore模板:

    在views文件夹中创建header.tmpl

    <html>
        <head>
            <title>Header!</title>
        </head>
        <body>
    

    创建footer.tmpl

        </body>
    </html>
    

    创建 index.tmpl

    <%= include('header') %>
    Welcome to <%= title %> !
    <%= include('footer') %>
    

    访问 http://localhost:3000/
    可以看到

    Welcome to underscore !
    

    4 RESTful API

    Router 支持 RESTful 风格的API:
    先准备好RESTful 调试工具,
    Postman:
    https://chrome.google.com/webstore/search/postman?utm_source=chrome-ntp-icon

    然后就可以开始干了。
    打开about.js 在

    /* GET about */
    router.get('/',function(req,res,next){
        res.render('about',{title:'About'});
    });
    

    之后添加以下代码:

    /* POST about */
    router.post('/',function(req, res, next){
        res.json({method:'post', message:'ok',request:req.body});
    });
    

    上面代码意思是, 当用户以POST方法传递数据进来时,我们将返回Json数据。req.body是指的是请求时传递过来数据。
    如何调试呢?
    可以照如下图设置Postman:

    Paste_Image.png

    点击 Send 按钮后,可以获得响应:

    Paste_Image.png

    Put,Delete方法也类似,代码如下:

    /* PUT about */
    router.put('/',function(req,res,next){
        res.json({method:'put', message:'ok',request:req.body});
    });
    /* DELETE about */
    router.delete('/',function(req,res,next){
        res.json({method:'delete', message:'ok',request:req.body});
    });
    

    相关文章

      网友评论

          本文标题:Node学习笔记二:Hello Express

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