将js进行到底:node学习6
2018-02-12 20:07
417 查看
开始真正的node web开发——express框架
为何说现在才是web开发的真正开始呢?首先任何企业都不会用原生的http协议API去开发一个完整的网站,除非她们先开发一个框架出来,其次我们之前的所谓http,connect都只是打开了一个http服务器而已,顶多只能算个工具集(中间件),最后使用像express这样的框架使我们把精力集中到功能业务上来了!
生产力因此而得以体现!
引入express
上一章,即便我们已经可以使用connect处理用户各种请求了,但依然需要我们人为的去关注路由,文件判断,并且connect,serve-static只是起到了纯中间作用,且拼拼凑凑组合出一个看上去还不错的网站,这些并没有直接加强HTTP这个API。可以发现我们依然在使用
require("http").createServer()"来创建http服务
package.json
{ "name":"test-express", "version":"0.0.1", "description":"an express example", "dependencies":{ "express":"latest", "jade":"latest" } }
npm install
Express是直接在http上加强的,封装了http API,我们不必再为http API缺少操心了
Express创建HTTP服务器
var express = require("express"); var app = express(); app.get('/',function(req,res){ res.send("hello world"); }); app.listen(3000);
可以看到express模块暴露的express方法本身,返回一个对象,其get方法已经解决了路径处理的问题。这是一个非常简单的示例页面,已经让我感受到了他将会使得web开发变得十分简单。
Express托管静态文件
使用express框架express.static来对上一回中的serve-static托管静态文件做修改,必须说明的是:express.static 是 Express 内置的唯一一个中间件。是基于 serve-static 开发的,负责托管 Express 应用内的静态资源。(官网说明)新建一个public目录专门存放静态文件:css,js,images等资源文件都可以
app.use(express.static('public'));
只需要一行代码,测试效果
Express视图业务分离——模板渲染引擎Jade
在刚开始开发web那会,我一直无法理解php的smarty是什么,在开发了javaee之后,慢慢熟悉了一个名词“模板引擎”,由于php本身可以内嵌html所以,很容易让初学者忽视了这个模板引擎的概念,后来,开发java之时,我们需要将前端(html)后端(java)进行分离的时候,就需要接触到模板引擎了,主要作用:在纯html文件中输入规定格式的变量或者逻辑语言,在经过http发送给客户端浏览器前将其中的变量标记替换为对应的值,并且将逻辑语言编程,最终生成纯html文件流发送给客户端。
通俗言之:模板引擎像一个加工模具,将非纯html(带模板代码)装入,生成新的,完善的纯html代码,这样我们不需要在html中直接嵌入后端语句来动态修改页面,这实现了逻辑和视图的分离(模板引擎是动态网站的核心内容之一)
举个栗子,使用Jade模板引擎!(需要外部模块,前面package.json中已经加入了)
首先模板存放位置,新建:views目录->新建index.jade文件
前端index.jade
doctype html head title= pageTitle script(type='text/javascript'). function showCityEx(city) { return city + " & " + city; } body h1 #{h1} table(border=1) tr th hello th world,citys.count=#{cscores.length + 3} th count for city,index in citys tr td= index td welcome to #{city}(#{city.substr(0,4)}) td= cscores[index] div over!
后端:index.js
var express = require("express"); var app = express(); var city_names = [ 'wuhan', 'tianjin', 'beijing', 'shanghai' ]; var city_scores = [ '60', '62', '80', '70' ]; app.use(express.static('public')); app.set("view engine","jade"); app.set("views",__dirname+"/views"); app.get('/',function(req,res){ res.render("index",{citys:city_names,cscores:city_scores}); }); app.listen(3000);
解释
学习express先不理会那些jade模板代码,如需了解,参考Jade官网API:http://jade-lang.com/
重心放在nodejs代码上,app.get方法并没有改变,参数URL绑定了参数回调函数。
res调用了render,是模板引擎渲染方法,表示向客户端输出一个渲染后的html
配置一:使用app.set可以配置express,将view engine设置为jade
配置二:将模板存放位置配置为:views目录,我们将jade文件放在里面,以后自动读取
render参数一:文件名,不带后缀
render参数二:jade模板中需要替换掉的变量
render还有一个参数是回调函数,处理生成的html,可以这样写:
res.render("index",function(err,html){ //继续处理html,比如打印到控制台console.log(html); });
模板引擎的基本使用套路无非就是:设置模板类型,设置模板目录,render出来!
Jade模板语言本身值得我们单独拿出来学习!
Express request与response
整个HTTP开发都围绕着request(用户请求)和response(响应请求)在做开发。express为我们封装了http的req与res对象,方便开发。
记录一些常见的对象方法:
Request
如果直接打印req对象你会看到一堆乱七八糟东西,没啥意思。打印如下这些东西研究一下:
params对象
app.get('/user/:name',function(req,res){ console.log(req.params.name); })
地址栏输入:http://localhost:3000/user/devil
终端显示:
query对象
app.get('/user',function(req,res){ console.log(req.query.name); });
地址栏输入:http://localhost:3000/user?name=devil
终端显示:同上!
Response
download()app.get('/getimg',function(req,res){ res.download(__dirname+"/public/images/xq.jpg"); });
用于下载文件,使用后强制用户下载该文件
json()和jsonp()
app.get('/json',function(req,res){ res.json({name:"devil",sex:"男",body:"strong"}); });
强制将js对象转换为json数据格式发送给客户端,后者则支持jsonp,效果一样。
redirect()
app.get('/baidu',function(req,res){ res.redirect('http://www.baidu.com'); });
重定向到其他页面
send()
app.get('/send',function(req,res){ res.send({some:'json'}); });
send是express非常常用的方法,功能巨多,优点是可自动转化格式,输入数字发送状态码,输入字符串返回客户端字符串,输入js对象返回json对象,他能对参数数据类型做很好的判断,要优于上述json()方法。
sendFile()
app.get('/send',function(req,res){ res.sendFile("E:\\视频\\电影\\v字仇杀队.mp4"); });
这个就有意思了,是发送文件,但并不会使得用户下载,应该是以二进制流的方式发送文件,理论上还需要浏览器支持,测试后效果:
如果是图片文件,则显示图片。
相关文章推荐
- 将js进行到底:node学习2
- 将js进行到底:node学习10
- 将js进行到底:node学习9
- 将js进行到底:node学习3
- 将js进行到底:node学习5
- 将js进行到底:node学习7
- 将js进行到底:node学习1
- 将js进行到底:node学习8
- 将js进行到底:node学习4
- [将免费进行到底]在Amazon的一年免费服务器上安装Node.JS, NPM和OurJS博客
- [将免费进行到底]在Amazon的一年免费服务器上安装Node.JS, NPM和OurJS博客
- 了不起的Node.js: 将JavaScript进行到底
- 了不起的Node.js: 将JavaScript进行到底(Web开发首选,实时,跨多服务器,高并发)
- 了不起的Node.js: 将JavaScript进行到底(Web开发首选,实时,跨多服务器,高并发)
- 大熊君大话NodeJS之开篇------Why NodeJS(将Javascript进行到底)
- Node.js stream 流学习
- JS学习第四篇;Node.js的使用
- node.js学习笔记之HTTP客户端
- node.js 学习第十天 路由 route
- Node.js系列基础学习-----回调函数,异步