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. linux笔记_20150417_ubuntu 常见问题_文件_音乐播放器

    最近在学习ubuntu的过程中,遇到了一些问题,就记下来了它的解决办法.以希望对你也有用. ),至少保证周围局域网内用户可以访问.至于配置文件,内容比较少,反正对我来讲能用就ok了~不知道会不会很弱 ...

  2. 基于OSGI.Net的图形界面系统

    在2013年的十月份有幸接触了osgi.net和iopenworks的创始人,了解和学习的插件式开发,开始了后台数据的处理生涯. 第一个有图形界面的系统——智能农业的环境监测系统,其实在这个系统中所有 ...

  3. 使用源码编译wxpython-基于python2.7

    1.前言 本文主要讲述在linux环境下进行编译wxpython,在windows下面安装wxpython很简单,只要下载,然后直接执行exe文件,下一步下一步即可安装,在linux下面,则具有很多步 ...

  4. 数往知来 AJAX Ajax增删改查<十九>

    =================================================客户端================================================ ...

  5. jQuery hover demo

    先放效果图: 百度云下载地址:http://pan.baidu.com/s/1dDpn1Sl 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTM ...

  6. ets dets

    相同点:ets和dets都提供“键—值”搜索表 不同点:ets驻留在内存,dets驻留在磁盘 特点:ets表和dets表可以被多个进程共享,因此通过这两个模块可以实现数据间的交换 一  ets表 实现 ...

  7. 《Linux设备驱动程序》 笔记1

    驱动程序的任务 通常来讲,驱动(模块)要执行两类任务: 模块中的某些函数作为系统调用的一部分执行(按照既定规则填补必需的系统调用模块) 其他函数负责终端处理 内核中的并发 为什么考虑并发问题: Lin ...

  8. Fast-paced Multiplayer

    http://www.gabrielgambetta.com/fpm1.html —————————————————————————————————————————————————————— Fast ...

  9. POJ 1696 Space Ant（极角排序）

    Space Ant Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 2489   Accepted: 1567 Descrip ...

  10. USB的四种传输类型

    USB协议规定了4种传输类型:批量(bulk)传输,等时传输(同步传输),中断传输和控制传输.