express框架
【基于nodejs,用于构建web服务器的框架】
官网：www.expressjs.com.cn
安装：npm install express
例1：创建web服务器
// 引入express第三方模块 const express = require('express'); // 创建web服务器 var server=express(); server.listen(3000,()=>{ console.log('success'); });
1、路由：
浏览器向web服务器发来请求，web服务器要根据请求的方法和请求的url来做出响应。
路由三要素：请求的方法、请求的url、响应的内容；
响应对象(res):
res.send() 响应文本，只能响应一次send，如果是数字认为是状态码；
res.sendFile() 响应文件，必须使用绝对路径(__dirname)
res,redirect() 响应的重定向
路由中的请求对象：
req.method 获取请求的方法
req.url 获取请求的url
req.header 获取请求的头信息
req.query 获取请求时以查询字符串形式传递的数据，返回格式为对象
例2：接收请求 做出响应
// 引入express第三方模块 const express = require('express'); // 创建web服务器 var server=express(); server.listen(3000,()=>{ console.log('success'); }); /* 接收浏览器的请求 1、根据请求的url和方法做出不同的响应 2、 ————给服务器添加路由(根据请求的url) 3、请求的url:/login 请求的方法是get */ server.get('/login',(req,res)=>{ // req 请求的对象 // res 响应的对象 // 响应文本 res.send('this is login page!'); });
例3：send结束后不允许再次send
/* 练习：创建路由， 1、请求的方法是get 请求的url：/index this is index page 2、 post /login this is login page 3、 get /detail this is detail */ // 引入第三方模块express const express=require('express'); // 创建web服务器 var server = express(); // 监听端口 server.listen(3000); // 接收请求 做出响应 server.get('/index',(req,res)=>{ res.send('this is index page!'); }); server.get('/detail',(req,res)=>{ res.send('this is detail page!'); }); server.post('/login'(req,res)=>{ res.send('this is login page!'); });
例4：响应一个文件（必须使用绝对路径）
【.html文件】
<!-- index.html --> <!DOCTYPE html> <html> <head> <title></title> </head> <body> <h1>test</h1> </body> </html>
【.js文件】
// 引入第三方模块express const express=require('express'); // 创建web服务器 var server = express(); // 监听端口 server.listen(3000); // 接收请求 做出响应 server.get('/index',(req,res)=>{ //res.send('this is index page!'); res.sendFile(__dirname+'/index.html'); });
例5：重定向
// 引入第三方模块express const express=require('express'); // 创建web服务器 var server = express(); // 监听端口 server.listen(3000); // 接收请求 做出响应 server.get('/index',(req,res)=>{ //res.send('this is index page!'); res.sendFile(__dirname+'/index.html'); }); // 重定向到/index server.get('/',(req,res)=>{ res.redirect('/index'); });
例6：
/* 使用express创建web服务器，创建以下路由 get '/index' 发送文本“这是首页” get '/login' 送文件“login.html” post '/register' 发送文本“注册成功” get '/' 跳转到/index */ // 引入express模块 const express=require('express'); // 创建web服务器 var server=express(); // 监听端口 server.listen(3000); // 发出请求接收响应 server.get('/index',(req,res)=>{ res.send('this is index page!'); }); server.get('/login',(req,res)=>{ res.sendFile(__dirname+'/login.html'); }); server.post('/register',(req,res)=>{ res.send('success'); }); server.get('/',(req,res)=>{ res.send('/index'); });
2、post和get请求
- get请求以查询字符串的形式传递数据，服务器端使用req.query获取数据，结果是对象；
- post请求是通过表单提交的方式传递数据，服务器端通过事件的形式获取数据;
req.on('data',(buf)=>{
// 获取的结果是buffer数据，需要使用查询字符串解析为对象；
});
1）、以get 方式提交，客户端和服务端交互
【login.html】
<!DOCTYPE html> <html> <head> <title></title> </head> <body> <h1>登录</h1> <!-- form---用于表单提交; action---向服务器请求的url; method---请求的方法； name给当前的数据起名字，后台接收根据名字找到对应的数据； 服务器需要有对应的路由来接收这个请求 --> <form action="/mylogin" method="get"> 用户:<input type="text" name="username"><br> 密码:<input type="text" name="password"><br> <input type="submit" name="submit"> </form> </body> </html>
【.js】
// 请求方法 get 请求url /login 响应文件login.html const express=require('express'); var server=express(); server.listen(3000); server.get('/login',(req,res)=>{ res.send(__dirname+'/login.html') }); server.get('/mylogin',(req,res)=>{ // 获取表单中传递的数据 var obj=req.query; res.send('success,用户名为：'+obj.username+'密码为：'+obj.password); });
例1：
// 练习：创建web服务器，新建路由(get, /reg),响应一个注册文件reg.html const express=require('express'); var server=express(); server.listen(3000); server.get('/reg',(req,res)=>{ res.send(__dirname+'/reg.html'); });
2）、以post方式提交，客户端和服务器交互
【reg.html】
<!DOCTYPE html> <html> <head> <title></title> </head> <body> <h1>请注册</h1> <!-- form---用于表单提交; action---向服务器请求的url; method---请求的方法； name给当前的数据起名字，后台接收根据名字找到对应的数据； 服务器需要有对应的路由来接收这个请求 --> <form action="/myreg" method="post"> 用户:<input type="text" name="username"><br> 密码:<input type="password" name="password"><br> 手机:<input type="text" name="phone"><br> 邮箱:<input type="email" name="email"><br> <input type="submit" name="submit"> </form> </body> </html>
【.js】
// 练习：创建web服务器，新建路由(get, /reg),响应一个注册文件reg.html const express=require('express'); const querystring=require('querystring'); var server=express(); server.listen(3000); server.get('/reg',(req,res)=>{ res.send(__dirname+'/reg.html'); }); server.post('/myreg',(req,res)=>{ // 获取表单中post请求传递的数据 // 以事件的形式获取表单中的数据 req.on('data',(buf)=>{ // buffer格式转换为查询字符串 var str=buf.toString(); // 将查询字符串解析为对象 var obj=querystring.parse(str); console.log(obj); // 获取数据后，响应到浏览器 res.send('注册成功，用户名为'+obj.username); }); });
3、使用路由传递数据——路由传参
1）设置路由中接收的名称
server.get('/detail/:lid',(req.res)=>{
req.params // 获取路由传递的数据，格式为对象
});
浏览器请求方式 (5就是传递的数据使用lid来接收)
http://127.0.0.1/detail/5
例1：
/* 创建一个购物车的路由，请求的URL；/shopping,请求的方法get, 传递商品的价格price和名称pname */ const express=require('express'); var server=express(); server.listen(3000); // /shopping/5000/dell server.get('/shopping/:price/:pname',(req,res)=>{ console.log(req.params); res.send('这是购物车'); });
4、路由器
路由在使用过程中，不同的模块可能出现相同的url，把同一个模块下的路由挂载到特定的前缀。
例如：商品模块下的路由挂载到/product,访问形式/product/list,用户模块下的路由挂载到/user,访问形式/user/list
路由器就是一个js文件，把同一模块下的路由放到一起。
【步骤】
【路由器】
// 1、引入express const express=require('express'); // 2、创建空的路由器 var router=express.Router(); // 3、往路由器中添加路由 router.get('/list',(req,res)=>{ }); // 4、导出路由器 module.exports=router;
【web服务器】
// 1、在web服务器下使用路由器模块 const userRouter=require('./user.js'); // 2、把路由器userRouter挂载到/user下，访问形式变为/user/list server.use('/user',userRouter);
例1：
【user.js】
//[user.js] // 使用路由器来管理用户模块下的路由 const express=require('express'); // 创建一个空的路由器---对象 var router=express.Router(); // 添加路由 router.get('/list',(req,res)=>{ res.send('这是用户列表'); }); router.get('/delete',(req,res)=>{ res.send('删除成功'); }); // 导出路由器router module.exports=router;
【web服务器引用user.js】
/* 商品模块下的路由挂载到/product,访问形式/product/list, 用户模块下的路由挂载到/user,访问形式/user/list */ // 导入路由器user.js const userRouter=require('/.user.js'); //[服务器] const express=require('express'); var server=express(); server.listen(3000); // 服务器使用路由器 // 将引入的用户路由器挂载到/user // 访问形式/user/list server.use('/user',userRouter);
例2：
【web服务器文件】
/* 1、商品模块下的路由挂载到/product,访问形式/product/list, 用户模块下的路由挂载到/user,访问形式/user/list ; 2、创建商品模块的路由器product.js，添加路由商品列表(list)、 商品删除(delete)、商品添加(add),在web服务器引入，并挂载 到/product */ // 导入路由器user.js const userRouter=require('/.user.js'); // 引入路由器[product.js] const product_router=require('./product.js'); //[服务器] const express=require('express'); var server=express(); server.listen(3000); // 服务器使用路由器 // 将引入的用户路由器挂载到/user // 访问形式/user/list server.use('/user',userRouter); // 将路由器product_router挂载到/product下 server.use('/product',product_router);
【user.js】
// 使用路由器来管理用户模块下的路由 const express=require('express'); // 创建一个空的路由器---对象 var router=express.Router(); // 添加路由 router.get('/list',(req,res)=>{ res.send('这是用户列表'); }); router.get('/delete',(req,res)=>{ res.send('删除成功'); }); // 导出路由器router module.exports=router;
【product.js】
// [product.js] // 引入express const express=require('express'); // 创建路由器 var router=express.Router() // 添加路由 router.get('/list',(req,res)=>{ res.send('商品列表'); }); router.get('/add',(req,res)=>{ res.send('商品添加'); }); router.get('/delete/:lid',(req,res)=>{
// 获取此值
console.log(req.params);
res.send('商品删除');
}); // 导出路由器 module.exports(router);