[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);
}
});
[Express] Level 2: Middleware -- 1的更多相关文章
- [Express] Level 2: Middleware -- 2
Logging Middleware Help finish the following middleware code in the logger.js file: On the response ...
- [Express] Level 4: Body-parser -- Post
Parser Setup Assume the body-parser middleware is installed. Now, let's use it in our Express applic ...
- [Express] Level 3: Massaging User Data
Flexible Routes Our current route only works when the city name argument matches exactly the propert ...
- [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 ...
- [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 ...
- [Express] Level 4: Body-parser -- Delete
Response Body What would the response body be set to on a DELETE request to /cities/DoesNotExist ? H ...
- [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 ...
- [Express] Level 1: First Step
Installing Express Let's start building our new Express application by installing Express. Type the ...
- 透析Express.js
前言 最近,本屌在试用Node.js,在寻找靠谱web框架时发现了Express.js.Express.js在Node.js社区中是比较出名web框架,而它的定位是“minimal and flexi ...
随机推荐
- leetcode：Integer to Roman（整数转化为罗马数字）
Question: Given an integer, convert it to a roman numeral. Input is guaranteed to be within the rang ...
- 在 Asp.NET MVC 中使用 SignalR 实现推送功能
一,简介Signal 是微软支持的一个运行在 Dot NET 平台上的 html websocket 框架.它出现的主要目的是实现服务器主动推送(Push)消息到客户端页面,这样客户端就不必重新发送请 ...
- python中使用多继承
python中使用多继承,会涉及到查找顺序(MRO).重复调用(钻石继承,也叫菱形继承问题)等 MRO MRO即method resolution order,用于判断子类调用的属性来自于哪个父类.在 ...
- Git 提交后开始自动构建
设定Git仓库的钩子 一般路径为 xxx.git/hooks 参考文档 https://git-scm.com/docs/githooks 修改 post-receive #!/bin/bash wh ...
- bzoj3717: [PA2014]Pakowanie
Time Limit: 90 Sec Memory Limit: 256 MBSubmit: 128 Solved: 43[Submit][Status][Discuss]Description 你有 ...
- Cocos2d-JS v3.0 alpha 导入 cocostudio的ui配置
1.在新项目的根文件夹下打开project.json文件,修改: "modules" : ["cocos2d", "extensions", ...
- 加固Samba安全三法
欢迎大家给我投票: http://2010blog.51cto.com/350944 650) this.width=650;" onclick='window.open("htt ...
- Ruiy自我识人做事领悟录ing
是坑总需要人去踩,谁踩谁收获! 做人做事分层分次,后方能至始及终不乱; 做人做事切记诚记信,宁他人负我,我定不负他人! 做人做事做力求清心寡欲; 安静做工,沉静学道;
- 如何申请TexturePacker注册码
TexturePacker是一款很强大的游戏图片制作工具,网上有很多关于它的教程和说明,这里不再说它的作用和好处.这里只是说一下如何申请免费的注册码. 国人都习惯了使用免费或者破解的软件,但是使用破解 ...
- Win7系统下利用U盘安装Ubuntu14.04麒麟版
转自http://www.360doc.cn/article/14743053_335473181.html 重要提示:在采用u盘安装ubuntu分区时,所有磁盘一定要全部设置成逻辑分区,包括根目录/ ...