Express框架基础

再讲Express框架之前,先了解一些小的点:

  • 在文件目录打开固定文件,点击路径输入cmd直接进入该文件的命令行
  • 命令行输入cls 清除命令行上的内容
  1. 安装 (建立一个文件夹,打开cmd 进入到文件夹内部,输入nmp install express)
  2. 配置
  3. 接收请求
  4. 响应

  1. 创建服务
    var server=express();

  2. 监听
    server.listen(8080);

  3. 处理用户的请求
    server.use(‘地址’,function(req,res){});

  • 此处的req,res还含有原生的方法(eg:req.write();)
  • express保留了原生的功能,添加了一些方法(send),增强原有的功能
const express=require('express');

var server=express();
server.use('/1.html',function(req,res){ //靠use来处理用户相应的请求
	res.send('abc'); //send可以传输的类型更多 res.send({a:12,b:4})eg:可以接受json数据
	res.end();
});
server.use('/2.html',function(req,res){
	res.send('123');
	res.end();
});
server.listen(8083);

  • 依赖中间件
  • express有三种方式可以接受用户的请求
    .get('/地址',function(req,res){});
    .post(…)
    .use(…) //use 模式下get和post 通吃
  • 非破坏式的 (req等该具有的方法仍存在)

中间件 express-static

  1. 现在cmd控制台上下载 npm install express-static,引入
  2. server.use(static('./www'); 引入指定目录下的文件

实现用户的登陆请求:
js部分

const express=require('express');
const expressststic=require('express-static') //中间件

var server=express();
var users={
	'blue':'123456',
	'zhangsan':'654321',
	'lisi':'000000'
};  //自定义一个json数据,也是一个对象

server.get('/login',function(req,res){
	//console.log(req.query);  //提交表单结果显示为:{ user: '小明', pass: '123456' }
	//返回的是一个对象 (访问对象的属性有方括号和点访问两种方法)
	var user=req.query['user']; //单独拿出一个属性
	var pass=req.query['pass'];
	
    if(users[user]==null){
    	res.send({ok:false,msg:'用户不存在'}); //这里返回一个json
    }else{
        if(users[user]!=pass){
        res.send({ok:false,msg:'密码错了'}); //这里返回一个json	
        }
        else{
        	res.send({ok:true,msg:'成功'}); //这里返回一个json
        }
    }
});

server.listen(8080);
server.use(expressststic('./www'))  //访问http://localhost:8086/1.html(读取指定目录下的文件)

html 部分
在这里插入图片描述
(总的来说express就是一个框架,它依赖于中间件,接受请求有三种方式~~~)


  1. 数据:GET,POST

  2. 中间件:使用,写,链式操作

    • GET-无需中间件
      req.query

    • POST-需要中间件 “body-parser”

const express=require('express');
const bodyparse=require('body-parser');

var server=express();
server.listen(8083);

//这里运用多个use相当于一个流水线 先加工一步再加工一步
server.use(bodyparse.urlencoded({}))  //中间环节先加工一次 解析数据!!

server.use('/',function(req,res){
// console.log(req.query);  //容纳的是GET数据 
   console.log(req.body);   //容纳的是POST数据  用在body身上!!
});

//------------里面也可以有参数
server.use(bodyparse.urlencoded({ 
	//extended:true; //扩展模式
	//limit:   //限制 最多接受多大的POST数据 默认100k(1024=1k,1024*1024=1兆,1024*1024*1024=1G)
})) //中间环节先加工一次

中间件

什么是中间件,再网上查,专业地说中间件就是处理HTTP请求的函数。它的特点就是,一个中间件处理完,再传递给下一个中间件。
每个中间件都可以接收三个参数,依次为request对象(代表HTTP请求)、response对象(代表HTTP回应),next回调函数(代表下一个中间件)。每个中间件都可以对HTTP请求(request对象)进行加工,并且决定是否调用next方法,将request对象再传给下一个中间件。

function use(req,res,next){
	next();  //next 就是执行下一个中间件
}

如果next带有参数,则代表抛出一个错误,参数为错误文本。
抛出错误以后,后面的中间件将不再执行,直到发现一个错误处理函数为止。

function use(req,res,next){
	next('结束了!'; 
  1. 链式操作:
server.use('/',function(req,res,next){  //多加一个参数 next
	console.log('a');

	next();   //这里调用 next 才向下走
});
server.use('/',function(req,res,next){
	console.log('b');
});

中间件的原理:

const express=require('express');
const querystring=require('querystring');

var server=express();
server.listen(8080);

server.use('/',function(req,res,next){
	var str='';
	req.on('data',function(data){
		str+=data;
	});
    req.on('end',function(){
    	req.body=querystring.parse(str); //将收集解析好的 信息加到body身上!!
    	next();  //全部数据得到之后才向下执行
    })
});

server.use('/',function(req,res,next){
	console.log(req.body);  //传递过程中不变
});

将上面的例子封装成 自己写的中间件:

//服务器
const express=require('express');
const body=require('./body-parser.js');  //引用自己的模块 ./

var server=express();
server.listen(8080);

server.use(body);
server.use('/',function(req,res){
	console.log(req.body);  //传递过程中不变
});


//body-parser.js (自己写的中间件)
const querystring=require('querystring');

module.exports=function(req,res,next){ //module.exports 要输出
	var str='';
	req.on('data',function(data){
		str+=data;
	});
    req.on('end',function(){
    	req.body=querystring.parse(str);  //解析收集好的数据
    	next();  //全部数据得到之后才向下执行
    })
};  //请求显示结果为:{ user: 'xiaoming', pass: '123456' }

详细express标准请参考【《JavaScript 标准参考教程(alpha)》,by 阮一峰】

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值