Node.js之Express框架
Express.js官网:http://www.expressjs.com.cn/,是基于Node.js平台,快速开放极简的Web开发框架。
学习参考网址:http://www.runoob.com/nodejs/nodejs-express-framework.html(更多具体的实例有助于快速学习这个框架)
传统node.js缺点:
路由不方便制作,尤其是正则表达式路由
静态资源服务不方便
页面呈递不方便,没有模板引擎(Express通过向模板传递参数来动态渲染 HTML 页面)
环境配置
首先电脑里还是需要node,npm,直接去官网下载就可以了。自己创建一个文件夹,在根目录shift+右击打开命令窗口,依次输入以下命令行安装依赖:(-g是全局安装,--save是本地安装)
npm install-g cnpm --registry=https://registry.npm.taobao.org
cnpm install express--save
cnpm install body-parser --save
cnpm install cookie-parser --save
cnpm install multer --save
基本使用
引用模块
var express = require("express");
var app = express();
路由清单,术语-中间件
app.get("/",function(req,res){
res.send("首页");
});
app.get("/music",function(req,res){
res.send("音乐");
});
app.get("/news",function(req,res){
res.send("新闻");
});
静态路由
app.use(express.static("public")) //在根目录新建一个public文件夹
监听
app.listen(3000) //监听3000端口
访问
浏览器地址栏输入 localhost:3000
Express中输出使用res.send()而不是res.end(),好处是自动变为utf-8编码(输出中文)。
正则
用Express框架特别容易做一个匹配正则模式的路由:
app.get("/student/:xuehao",function(req,res){
if(/^[\d]{6}$/.test(req.params.xuehao)){
res.send("学生,学号" + req.params.xuehao);
}else{
res.send("学号不正确!");
}
});
使用某一页面
在nodejs中使用某一页面需要以下逻辑:
fs.readFile("...",function(){
...
});
而在Express中访问某一页面:
app.get("/",function(req,res){
res.sendFile(__dirname + "/public/haha.html"); //必须使用绝对路径作为参数
});
res常用的函数是send和sendFile,sendFile表示发送一个页面给用户。
模板引擎
express可以像php一样使用后台语言模板,此时最好用的模板引擎叫做ejs模板引擎。*(hexo yilia主题)
API: https://npm.taobao.org/package/ejs
同样需要安装包依赖:
cnpm install ejs --save
Express程序举例
根目录下js文件:
var express = require("express");
var app = express();
app.set("view engine","ejs");
app.get("/",function(req,res){
res.render("home",{
"product" : "3本书",
"price" : 10 * 3,
"hobby" : [
{"name" : "王俊凯" , "age" : 16},
{"name" : "王宝强" , "age" : 26},
{"name" : "宋小宝" , "age" : 36}
]
});
});
app.listen(3000);
此时当用户访问/的时候,会自动使用view文件夹中的home.ejs文件当做模板,数据就是后面传入的json。(任何js数据类型都可以上传模板)
view 文件夹下的home.ejs文件:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Ejs</title>
</head>
<body>
买了<%= product %>,花了<%= price %>
<p>我的偶像:</p>
<% for(var i = 0 ; i < hobby.length ; i++) { %>
<p><b><%= hobby[i].name %></b> <%= hobby[i].age %>岁</p>
<% } %>
</body>
</html>