Mounting Middleware

Given an application instance is set to the app variable, which of the following function calls would you use to mount a middleware called logger ?

Answer:

app.use(logger);

Default Middleware

What is the only middleware that's shipped with Express 4?

Answer: express-static

Express Static

Change the code in app.js to use the express-static middleware instead of the response.sendFile() function.

var express = require('express');

var app = express();

app.get('/', function (request, response) {

  response.sendFile(__dirname + '/public/index.html');

});

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

  var cities = ['Lotopia', 'Caspiana', 'Indigo'];

  res.send(cities);

});

app.listen(3001);

Remove our app.get() containing the root '/' route.

Mount the static middleware and serve files under the public directory.

Answer:

var express = require('express');

var app = express();

/*app.get('/', function (request, response) {

  response.sendFile(__dirname + '/public/index.html');

});*/

//cd public

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

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

  var cities = ['Lotopia', 'Caspiana', 'Indigo'];

  res.send(cities);

});

app.listen(3001);

Script Tags

Now we can add some client side javascript by including thejquery.js and client.js files.

Within index.html, include jquery.js using a <script> tag.

Within index.html, include client.js using a <script> tag.

Now in the client.js file, complete the code for the $.get function so that it calls the /cities URL path, and then runs the appendToList function.

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <title>Cities</title>

</head>

<body>

  <h1>Cities</h1>

  <ul class='city-list'></ul>

   <script src="jquery.js"></script>

   <script src="client.js"></script>

</body>

</html>

Now in the client.js file, complete the code for the $.get function so that it calls the /cities URL path, and then runs the appendToList function.

$(function(){

  $.get('/cities', appendToList ); 

  function appendToList(cities) {

    var list = [];

    for(var i in cities){

      list.push($('<li>', { text: cities[i] }));

    }

    $('.city-list').append(list);

  }

});

[Express] Level 2: Middleware -- 1的更多相关文章

  1. [Express] Level 2: Middleware -- 2

    Logging Middleware Help finish the following middleware code in the logger.js file: On the response  ...

  2. [Express] Level 4: Body-parser -- Post

    Parser Setup Assume the body-parser middleware is installed. Now, let's use it in our Express applic ...

  3. [Express] Level 3: Massaging User Data

    Flexible Routes Our current route only works when the city name argument matches exactly the propert ...

  4. [Express] Level 5: Route file

    Using a Router Instance Let's refactor app.js to use a Router object. Create a new router object and ...

  5. [Express] Level 5: Route Instance -- refactor the code

    Route Instance Let's rewrite our cities routes using a Route Instance. Create a new Route Instance f ...

  6. [Express] Level 4: Body-parser -- Delete

    Response Body What would the response body be set to on a DELETE request to /cities/DoesNotExist ? H ...

  7. [Express] Level 3: Reading from the URL

    City Search We want to create an endpoint that we can use to filter cities. Follow the tasks below t ...

  8. [Express] Level 1: First Step

    Installing Express Let's start building our new Express application by installing Express. Type the ...

  9. 透析Express.js

    前言 最近,本屌在试用Node.js,在寻找靠谱web框架时发现了Express.js.Express.js在Node.js社区中是比较出名web框架,而它的定位是“minimal and flexi ...

随机推荐

  1. MATLAB图像处理工具箱

    下列表格中除了个别函数外,其余函数都是图像处理工具箱提供的关于图像处理的函数,现摘录到此以备查找. 表1 图像显示 函数名 功能说明 函数名 功能说明 colorbar 颜色条显示 montage 按 ...

  2. BITED数学建模七日谈之六：组队建议和比赛流程建议

    今天进入数学建模经验谈第六天:组队建议和比赛流程建议 数学模型的组队非常重要,三个人的团队一定要有分工明确而且互有合作,三个人都有其各自的特长,这样在某方面的问题的处理上才会保持高效率. 三个人的分工 ...

  3. Java学习日志-01-Hello World

    1.安装JDK1.7 2.安装eclipse 3.eclipse上写第一个java程序-hello world 先建工程,再建包,养成良好的习惯,然后新建类 若不先建立包,可能会提示"The ...

  4. FlatBuffers要点

    FlatBuffers发布出来一周多,周末便抽时间先研究下它的使用方法.Flatbuffers的idl的语法主要参考[http://google.github.io/flatbuffers/md__s ...

  5. Hadoop2.2.0 自动切换HA环境搭建

    自动切换的HA,比手动切换HA集群多了一个zookeeper集群 机器分配: zookeeper:hadoop4,hadoop5,hadoop6 namenode:hadoop4,hadoop5 da ...

  6. js混淆工具

    1\  http://www.jasob.com 2\ http://developer.yahoo.com/yui/compressor

  7. 第三百五十八天 how can I 坚持

    万事要有度,不要话唠,也不能不说,把握好分寸,今天貌似又说多了. 加了天班,理了个发,还有老爸明天来北京. 还有同学聚会没去,还有金龙让去吃鱼,没去. 还有.小米视频通话还行,能远程控制桌面, 还有, ...

  8. 移动Web单页应用开发实践——页面结构化

    1. 前言 在开发面向现代智能手机的移动Web应用的时候,无法避免一个事实,就是需要开发单页应用(Single Page WebApp).对于不同的系统需求,单页应用的粒度会不同,可能是整个系统都使用 ...

  9. inputs

    inputs.bind({ keyup:function(){$(this).val($(this).val().replace(/\D/g,''));}, focus:function(){if($ ...

  10. manacher算法（转载）

    原网址:http://blog.sina.com.cn/s/blog_70811e1a01014esn.html manacher算法是我在网上无意中找到的,主要是用来求某个字符串的最长回文子串.不过 ...