首页 > 代码库 > [Express] Level 2: Middleware -- 1

[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 publicapp.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