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. Steam即将正式加入人民币支付（转）

    Valve将在2015年Q4和2016年Q1加入一批新的货币结算支持,其中包括了人民币,这意味着以后玩家将无需在跳转支付平台后并通过美元结算.这对中国玩家来说是喜是忧? 本文由爱玩网整理报道,转载请保 ...

  2. Heilmeier's criteria

    介绍个Criteria:Heilmeier's criteria 在Alex Smola 的  SML: Scalable Machine Learning 课程网页上看到的,写的非常好. Heilm ...

  3. 使用Thrift RPC编写程序（服务端和客户端）

    1. Thrift类介绍 Thrift代码包(位于thrift-0.6.1/lib/cpp/src)有以下几个目录: concurrency:并发和时钟管理方面的库processor:Processo ...

  4. vim7.4 安装 k-vim

    注:在虚拟机 kali 1.9中安装完成之后,无法连接到网络(目前没找到有效的解决方法,不知道是不是通病,本人安装了两次,都一样),cpu占用率 70%+  ,建议安装之前,先建立快照,否则,后悔莫极 ...

  5. js 剪切板应用clipboardData

    http://blog.csdn.net/fox123871/article/details/6454634 <a href="http://blog.csdn.net/fox1238 ...

  6. ajax 模仿百度下拉

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  7. 第二百二十九天 how can I 坚持

    百度-让人更容易的获取信息,腾讯-让人更方便的交流,阿里-让人更方便的消费,每个公司都有自己的使命,每个公司的使命都是围绕着人. 创新-其实应该是在每个人的内心深处都或多或少有一些新的想法,但是什么是 ...

  8. delphi AES encrypt

    xe8 ok unit TntLXCryptoUtils; interface function AES128_Encrypt( Value, Password : string ) : string ...

  9. ESB的XmlProPertyMgr类的getNode(xxx)方法

    //------------------------------------------------------------------------------ public static Eleme ...

  10. linux 下查找大于100M的文件

    命令行如下 find . -type f -size +100M Linux系统下查找大文件或目录的技巧 当硬盘空间不够时,我们就很关心哪些目录或文件比较大,看看能否干掉一些了,怎么才能知道呢?以易读 ...