1.前言
express模块,node里对http模块的再次封装
官方定义 Express是一个自身功能极简的,完全是由
路由和中间件构成的一个web开发框架.通俗理解 express应用就是在调用各种中间件
安装
npm i express -S
2.基础版
1.引入express对象 var express = require('express') //2 执行express 返回 app var app = express(); //3设置监听端口 app.listen(6789,function () { console.log("6789 服务启动") })
3.基础版请求
地址栏输入
6789端口 后面跟上/index回车返回数据就算成功
// 请求的第一个参数 就是路由 pathname app.get("/index",function(req,res){ res.json({code:1000, message:"成功"}) })
express极简吧
4.跨域设置
使用app.all()实现服务器跨域
CORS(Cross-Origin Resource Sharing)跨域资源共享,是一个官方标准
通过对请求做判断,对响应对象做域名的设置和返回信息的设置,允许某些域访问本域
jsonp只是一个大家公认的解决跨域的方案
跨域请求头 只写一次
记不住不要紧
// 所有请求都必须进来,然后在进行判断,也是个中间件 app.all("*",function(req,res,next){ // 相当于域名白名单 不能写*,这样所有请求,不是你网站的也访问了 // res.setHeader("Access-Control-Allow-Origin",["http://127.0.0.1:5501"]); res.setHeader("Access-Control-Allow-Origin","*"); //Headers res.setHeader("Access-Control-Allow-Headers","X-request-With"); res.setHeader("Access-Control-Allow-Methods","GET,POST,DELETE,PUT,OPTIONS"); next(); });
5.静态资源请求
res.sendFile(静态资源文件的绝对路径)
相当于fs读写一套
//判断请求类型,判断路由pathnmae app.get(/(((.*)\.html$)|(\/favicon\.ico))/,function(req,res){ res.sendFile(__dirname +req.path); //一行搞定 });
6.get
get客户端
$("button").eq(0).click(function () { $.ajax({ url:"http://127.0.0.1:9123/ajaxGet", data:{name:nameI.value,age:ageI.value}, type:"get", success:function(data){ console.log(data); } // dataType:"json"//可以不写 }) });
服务端
注意这里的
req.query值已经是个对象了
express帮我们做了 之前我们自己把query转为对象的工作
get也算中间件
app.get("/ajaxGet",function(req,res){ let data = null; //resquest response let {name,age} = req.query if(name === "yzs" && age ==="20"){ data = {msg:"登录成功",code:0} }else{ data = {msg:"登录失败",code:534} } res.json(data) });
7.jsonp
客户端
$("button").eq(2).click(function () { $.ajax({ url:"http://127.0.0.1:9123/ajaxJsonp", dataType:"jsonp", data:{name:nameI.value,age:ageI.value}, type:"get", jsonpCallback:"getData" }) }); function getData(data){ console.log("jsonp callback:",data); }
服务端-jsonp
注意这个打印这个query 查看
比正常的get请求 多了一个时间戳 和一个
callback字段
callback字段对应的就是回调函数的名字这个名字可以由客户端修改,但修改的话 后台这边也需要做对应的处理
一般用默认的就行
app.get("/ajaxJsonp",function(req,res){ // console.log("req",req.query); let {name,age} = req.query if(name === "yzs" && age === "20"){ res.jsonp([1,2,3]); }else{ res.jsonp([4,5,6]); } console.log("jsonp---"); });
修改回调函数的键
默认是callback
app.set("jsonp callback name","cb")
// ?callback=foo res.jsonp({ user: 'tobi' }) // => foo({ "user": "tobi" }) app.set('jsonp callback name', 'cb') // ?cb=foo res.status(500).jsonp({ error: 'message' }) // => foo({ "error": "message" })
8.post
客户端
$("button").eq(1).click(function () { $.ajax({ url:"http://127.0.0.1:9123/ajaxPost", data:{name:nameI.value,age:ageI.value}, type:"post", success:function(data){ console.log(data); }, dataType:"json" }) });
服务端
express里接收post请求的数据时,数据存储在req对象的body属性里
新版解决方案 可以不引用
body-parser使用
express自带的功能
app.use(express.urlencoded({extended:true}))
app.use(express.urlencoded({extended:true})) app.post("/ajaxPost",function(req,res){ // // 需要借助中间件 // console.log(req.body.name,req.body.age); // console.log(req.body); let data = ""; let {name,age} = req.query if(name === "yzs" && age === "20"){ data = {msg:"登录成功",code:0} }else{ data = {msg:"登录失败",code:534} } res.json(data); });
9.中间件的用法
app.use("路由",function(req,res,next){});
express的路由匹配顺序是从上往下依次匹配
通常中间件 和
all都是写到 最上方
app.use(bodyParser.urlencoded({extended:false}));
10.总结
1.get post
express方法调用之后得到的返回值是一个服务器的对象,该对象有3个监听方法,
实现了类似判断请求类型和路由的功能
.get() 监听get请求
.post() 监听post请求
.all() 监听所有请求 一般不会用来判断详细的请求 解决跨域问题
2.参数简介
参数1:路由
1. 字符串 ,如:"/favico.ico" "/ajax.html" "/api"
2. 正则表达式
参数2:回调函数
req对象 --- 请求对象 ,旧有的属性method,url(parse解析后的属性 query ,pathname)
3.方法 on监听
属性: 1. query:参数对象 最常用 2. path文:件路径 3. hostname:服务器地址
4. res对象 -- 响应对象 ,旧有的方法 write end writeHeader
5. res.jsonp(原始数据) 参数可以是对象
相当于原来的
res.write(JSON.stringify(data));
res.end();
6.res.send(内容)
es.write() res.end()
7.res.setHeader()
res.writeHeader()
