node.js(3)——express

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);

 

 

  

 

 

 

 

 

posted @ 2019-11-14 18:03  Alieen617  阅读(227)  评论(0编辑  收藏  举报