[Express] Level 2: Middleware -- 1

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);
  }
});

posted @ 2014-12-04 05:03 Zhentiw 阅读(383) 评论(0) 编辑收藏举报

刷新页面返回顶部

（评论功能已被禁用）

公告

昵称： Zhentiw
园龄： 13年2个月
粉丝： 41
关注： 0

+加关注

2025年3月

日

一

二

三

四

五

六

Answer1215

[Express] Level 2: Middleware -- 1

Mounting Middleware

Default Middleware

Express Static

Script Tags

公告

常用链接

最新随笔

积分与排名

随笔分类

随笔档案

阅读排行榜

评论排行榜