Express 是node 第三方框架,框架的意义就在于能大大简化程序地开发。看一下Express是怎么简化node程序开发的。
1,用Express写一个hello world 程序,我们来体验一下Express 开发。
新建文件夹express,npm init 快速创建package.json, 再新建一个server.js 用于项目启动。由于express 是第三方框架,我们要先安装它,npm install express --save, server.js 代码如下:
let express = require("express"); let http = require("http"); let app = express(); app.use(function(req,res){ res.writeHead("200",{'content-type':'text/plain'}) res.end("Hello World") }) http.createServer(app).listen(8080)
现在在当前文件夹中,调用cmd 命令窗口,输入node server 开启服务器,浏览器中输入localhost:8080 可以看到Hello World. 现在我们再把原生node 代码拿过来(如下),看一下它们的区别。
let http = require("http"); // 创建请求处理函数 let app = function(req,res) { res.writeHead("200",{'content-type':'text/plain'}) res.end("Hello World") } http.createServer(app).listen(8080)
原生node 程序和Express 程序最主要的区别的就是请求处理函数,原生node是直接创建一个函数来处理请求,所有请求和响应操作都放到这一个函数里。Express 则是调用 express()返回一个请求处理函数, 然后调用该函数的use方法来处理请求。
2, 路由
Express提供了强大的路由,我们可以很轻松地实现路由。路由就是不同的url 对应不同内容,例如用户点击about , 我们就要返回 about 页面,用户点击home,我们就要返回首页。Express 路由是app.method(path, function) 来实现的. method就是指的get, post 请求,path 指的就是/about, 后面的函数就是对这个请求的处理。如用户点击about, 服务器该怎么返回呢? 它是一个get 请求,请求的是about, 我们要返回about, 就可以这么写,app.get('/about', function(req,res){res.end("about")}). 再写几个路由加深一下理解。
let express = require('express') let app = express(); // 首页路由 app.get("/", function(request, response) { response.end("Welcome to my homepage!"); }); // about 路由 app.get("/about", function(request, response) { response.end("Welcome to the about page!"); }); // weather 路由 app.get("/weather", function(request, response) { response.end("The current weather is NICE."); }); // 404 页面 app.use(function(request, response) { response.statusCode = 404; response.end("404!"); }); app.listen(8080)
我们在浏览器中输入localhost:8080/about, 就看到 Welcome to the about page。
3. 模版引擎
Express增加了对许多模板引擎的支持,如pug(jade), ejs等,可以动态输出html, 这是原生node所不具有的。我们使用一下ejs, 使用模版引擎有三个步骤,首先是安装,其次是注册,最后是配置。
安装很简单 npm install ejs -S; 注册是对express 不支的模版如handlebars, 由于Express 原生支持ejs, 所以不需要注册;配置,就是告诉Express要使用哪个模版引擎,模版文件放在什么地方,以便Express在渲染的时候知道从哪里去寻找模版。
这时在express 文件夹中新建views文件夹,用于放置模版文件, 在views文件夹中新建一个模版文件,如index.ejs
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Hello, world!</title> </head> <body> <%= message %> </body> </html>
在server.js中配置模版引擎
app.set("view engine",'ejs'); // 设置 view engine, 使用ejs模版引擎 app.set("views", path.resolve(__dirname,'views')) // 设置views,模版放置的地方
动态渲染模版,输出html。 这要调用res.render()方法,render 方法,接受一个参数就是我们要渲染的模版的名称,还有一个可选的参数,就是向模版中输入的数据 来替换模版中的变量。
调用render方法的时候,express 就向views 文件夹中寻找对应的模版,这也是我们 app.set("views",...) 的原因。
app.get('/', function(req,res){ res.render('index',{ message:"this is a ejs view" }) })
完成的server.js 如下,在浏览器中输入localhost:8080, 就看到 this is a ejs view。
let express = require('express') let path =require('path'); let app = express(); // 设置模版引擎 app.set("view engine",'ejs'); app.set("views", path.resolve(__dirname,'views')) // render 渲染模版 app.get('/', function(req,res){ res.render('index',{ message: "this is a ejs view" }) }) app.listen(8080)
4, 中间件
调用express()返回app 请求处理函数,然后调用app.use 来处理请求,这么写到到底有什么好处? 最主要的就是我们可以把请求处理,放到不同的函数进行,从而避免了在原生node 中只有一个函数进行处理的问题。把所有的处理逻辑放到一个函数,不利于代码的维护和扩展。
现在我们想要在响应之前输出请求日志,用Express,我们就可以直接在程序中填加app.use(), 而不用管以前的代码,而且原生node, 我们还是要在请求处理函数中填加。Express 代码如下:
var express = require("express");var app = express(); // 记录请求日志 app.use(function(request, response, next) { console.log("In comes a " + request.method + " to " + request.url); next(); }); // 对请求做出响应 app.use(function(request, response) { response.writeHead(200, { "Content-Type": "text/plain" }); response.end("Hello, world!"); }); app.listen(8080);
这里,我们调用两个函数对http 请求进行处理,一个记录日志,一个负责响应,这就是Express 的中间件思想,不是把http请求放到一个大的函数中进行处理,而是把请求进行分解,放到一堆函数中进行处理,Express 则按照函数的书写顺序从上到下依次执行。 并且一个函数只做一件事件,这有利于模块化,代码的复用,更重要的是可以引用第三方模块。那么中间件是什么? 它就是这一堆函数中的每一个函数,就是我们app.use 中的函数。
我们再用一下Express 唯一的内置的中间件static 中间件,它提供静态文件服务,例如浏览器请求图片。我们在express 文件夹下新建public文件夹,用于存放静态资源,我们放一张图片(如:flower.png)在里面. static 中间件使用也非常简单,它只接受一个参数,就是我们静态文件放置的目录。我们修改代码看一下:
let express = require('express') let app = express(); let path = require('path'); let publicPath = path.resolve(__dirname,'public') // 获取静态文件所在的目录 app.use(express.static(publicPath)); // express static 中间件。 app.use(function(req,res){ res.writeHead("200",{'content-type':'text/plain'}) res.end("no static file") }) app.listen(8080)
当我们在浏览器中输入localhost:8080/flower.png的时候,网页显示一张图片。但当我们输入localhost:8080 时候,no static file. 当有静态文件服务的时候,如果我们请求的静态文件正好和服务器上的资源相匹配,它就会返回静态资源,程序也不会继续执行。 如果没有相匹配的静态资源,程序就会继续执行,返回 no static file.