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. DOM笔记（七）：开发JQuery插件

    在上一篇笔记本中,讲解了如何利用jQuery扩展全局函数和对象:DOM笔记(六):怎么进行JQuery扩展? 在这篇笔记本中,将开发一个简单的动画插件,名称是example-plugin,用其实现一个 ...

  2. 免费CDN

    什么是CDN? CDN (Content Delivery Network) ,CDN 是包含可分享代码库的服务器网络. CDN公共库是指将常用的JS库存放在CDN节点,以方便广大开发者直接调用.与将 ...

  3. 2013年19个最棒的HTML5网站模板免费下载

    上次我们整理了14个HTML5奉献给大家下载了,今天我再给大家整理了19个2013最新的HTML5模板供有需要的朋友下载使用,它们涉及不同的行业的模板需求,支持手机设备,十分精美! 1. Affini ...

  4. Python 批量创建同文件名的特定后缀文件

    看了很多批量创建文件和文件批量格式转换的code,感觉杀鸡焉用牛刀,自己写了几行轻量级的拿来给大家参考: 在out_dir目录下批量创建与in_dir目录下同文件名但后缀不同的文件. in_dir = ...

  5. 分区表,桶表,外部表,以及hive一些命令行小工具

    hive中的表与hdfs中的文件通过metastore关联起来的.Hive的数据模型:内部表,分区表,外部表,桶表受控表(managed table):包括内部表,分区表,桶表 内部表: 我们删除表的 ...

  6. 轻松学Linux之使用转义字符

         转义字符是C语言中表示字符的一种特殊形式.通常使用转义字符表示ASCII码字符集中不可打印的控制字符和特定功能的字符,如用于表示字符常量的单撇号( '),在Unix操作系统中有一类特殊的字符 ...

  7. Uber新功能：隐藏司机乘客们的手机号码

    滴快车单单2.5倍,注册地址:http://www.udache.com/ 如何注册Uber司机(全国版最新最详细注册流程)/月入2万/不用抢单:http://www.cnblogs.com/mfry ...

  8. HDU 2147 kiki's game （简单博弈，找规律）

    kiki's game Time Limit: 5000/1000 MS (Java/Others)    Memory Limit: 40000/1000 K (Java/Others)Total ...

  9. LightOJ 1236 Pairs Forming LCM （LCM 唯一分解定理 + 素数筛选）

    http://lightoj.com/volume_showproblem.php?problem=1236 Pairs Forming LCM Time Limit:2000MS     Memor ...

  10. Swift项目兼容Objective-C问题汇总

    Swift项目兼容Objective-C问题汇总 转载自 http://www.cocoachina.com/swift/20150608/12025.html 本文是投稿文章,作者:一叶(博客)欢迎 ...