一、什么是express
express是后台的框架, jquery,bootstrap,easyui这些是前端框架,完全不是一个东西
express作为后台框架当然是为了方便
前端框架开发前台的时候:jquery jq对象 DOM对象,方法不能混用
express 参差一点原生node也是OK的
express官网:http://www.expressjs.com.cn/ 参考手册4.x
express下载安装:
1.npm init 初始化package.json
2.npm install express --save (--save是更新package。json文件)
npm install 可以根据package.json文件中的依赖项去安装node_modules文件夹中的包
二、express的基本写法:
var express = require("express"); var app = express(); app.use(express.static("./app")); //静态伺服 app.get("/hello",function(req,res){ res.send("hello express"); }) app.listen(3000);
三、模板引擎
模板引擎(这里特指用于Web开发的模板引擎)是为了使用户界面与业务数据(内容)分离而产生的,它可以生成特定格式的文档,用于网站的模板引擎就会生成一个标准的HTML文档。
1、ejs模板引擎
原生node的写法:
var ejs = require("ejs"); var fs = require("fs"); var http = require("http"); var server = http.createServer(function(req,res){ fs.readFile("./views/index.ejs",function(err,data){ // 模板加载完成 // console.log(data); var template = data.toString(); // 数据 var dota = { day : "三", news : [ {"title" : "符书鑫穿裙子","num" : 300}, {"title" : "林天浩吃鸡屁股","num" : 500}, {"title" : "殷博眼睛疼","num":50} ] } // 数据和模板进行绑定 var html = ejs.render(template,dota); // 展示 res.writeHead(200,{"content-type":"text/html;charset=utf8"}) res.end(html); }) }); server.listen(3000)
express写法:
var express = require("express"); var app = express(); //使用模板引擎的时候需要设置 //1.不需要引入ejs,不需要引入fs,http app.set("view engine","ejs"); // 展示 app.get("/",function(req,res){ // 数据 var data = { day : "三", news : [ {"title" : "吃饭睡觉打豆豆","num" : 300}, {"title" : "林天浩吃鸡屁股","num" : 500}, {"title" : "殷博眼睛疼","num":50} ] } res.render("index",data) }) app.listen(3000);
ejs文件写法:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <h1>今天星期<%= day %>,天气真好</h1> <ul> <% for(var i = 0;i < news.length;i++){ if(news[i].num > 100){ %> <li><%= news[i].title %></li> <% } } %> </ul> </body> </html>
2、jade模板引擎
var app = require("express")(); app.engine('jade',require("jade").__express); app.set("view engine","jade"); app.get("/",function(req,res){ res.render("jadetest"); }) app.listen(3000)
jade文件:
html
head
title 今天下午考试
body
#box
ul
li 吃饭
li 睡觉
#box2
四、中间件问题
我们先来看一段简单的代码:
var express = require("express"); var app = express(); app.get("/",function(req,res){ console.log(1) // res.send("1"); }) app.get("/",function(req,res){ console.log(2) // res.send("2"); }) app.listen(3000);
这里运行服务器后台输出的是1,不是2,也不是1和2,这是为什么呢? express中接口可以写成正则的形式,后面的接口也能正好匹配这个接口,那么后面那个接口就再也进不去了
//路由的设计跟顺序是至关重要 app.get("/:username/:id",function(req,res){ res.send("用户+编号界面") }) app.get("/admin/login",function(req,res){ //这个地方永远进不去 res.send("管理员登录界面") })
那么这个问题要怎么解决呢:
回调函数中可以传入第三个参数next,然后函数体中进行判断,next()之后可以转到下一个接口匹配。
//路由的设计跟顺序是至关重要 app.get("/:username/:id",function(req,res,next){ // if(检索数据库){ // res。send(用户信息) // }else{ // next() // } res.send("用户+编号界面") }) app.get("/admin/login",function(req,res){ //这个地方永远进不去 res.send("管理员登录界面") })
五、express中获取请求参数的方式:
1、获取get请求:
// express 获取get参数 // 原生的获取方式,就是url.parse(req.url,true).query var express = require("express"); var app = express(); app.get("/",function(req,res){ console.log(req.query); res.send("OK") }) app.listen(3000)
2、获取post请求:
//express 中post获取参数的方式 var express = require("express"); var bodyParser = require("body-parser"); var app = express() app.set("views","st"); app.set("view engine","ejs"); app.get("/",function(req,res){ res.render("form"); }) app.use(bodyParser.urlencoded({ extended: false })); //post请求的请求头 app.post("/",function(req,res){ console.log(req.body); res.send("post方式提交成功"); }) app.listen(3000);