express的基本使用(中间件,静态文件访问)

#express是node的一个框架,类似与jquery是js的一种框架,目前在学习中发现比较好用,用来写接口太合适不过了,不需要用mock假数据,可以自己搭建一个后台服务,提供接口,供前台接口使用
1:安装node
2:安装express

cnpm  install express -D 
let  express = require('express')
let  app = express();
//请求方式 可以是get post  
app.get('/user',(req,res)=>{
	res.send("User")
});
//监听端口 启动服务啦
app.listen(9090,()=>console.log("server start"))

后端路由访问也可以直接提取为一个js,然后单独使用
image.png

切记最后一定要导出哦
module.exports = router;
最后在app.js中注册使用就好啦

let  cart  = require('./cart.router.js');
app.use(cart);

###这里推荐2个好用的自动重启服务的包,不用每次改代码后手动重启node服务
nodemon 和 forever

cnpm  install  nodemon  forever  -D

然后命令调用
image.png

开始配置使用啦,例如:
app.get("/",(req,res)=>{ //也可以直接访问index.html
res.sendfile(“index.html”); //访问根目录下的index.html 文件
});

//传递动态参数使用如下
app.get('/name/:age',(req,res)=>{
	//获取请求的参数 
	let  {age} = req.params;
	res.json({
		name:'dongdong',
		age:age
	})
});

image.png

这样就可以获取到url里面的动态参数啦!!!

如果想获取到后面的参数怎么办?别着急,慢慢来

image.png
没错,就是req.query 就可以获取到,然后就可以做参数的必传校验等等

//test?name=111
function  valid_middle(req,res,next){
	let {name} = req.query;
	if(!name || !name.length){
		res.json({
			data:'error',
			code:'300',
			message:'没有name参数'
		})
	}else{
		next()
	}	
};

###如果想获取post提交的表单的数据怎么办?
这里express提供了body-parser的使用就可以解决
1:首先安装
cnpm install body-parse -D
2:使用 //引入post req.body 处理

let bodyPraser = require('body-parser');

3://注册处理中间件

app.use(bodyPraser.urlencoded({extended:false}))
app.use(bodyPraser.json());

4:使用
上代码!
A:先提供一个form表单,必须是post和有name属性,submit提交
image.png
B:直接获取

 //获取post提交的数据哦 
 app.post('/doLogin',(req,res)=>{
 	console.log(req.body);
 	res.send(req.body)
 });

效果1
image.png
效果2
image.png

###中间件的使用

//应用中间件    不写前缀 匹配所有路由  (注意参数next是必须要操作的,后续的调用)
app.use((req,res,next)=>{
	console.log(new Date());
	next();
});

也可以提取出来一个函数,然后直接调用(可以做访问路由前的参数校验)

//test?name=111  中间件 
function  valid_middle(req,res,next){
	let {name} = req.query;
	if(!name || !name.length){
		res.json({
			data:'error',
			code:'300',
			message:'没有name参数'
		})
	}else{
		next()
	}
}

//1 所有路由都匹配这个中间件
//app.all(’*’,valid_middle);

//添加之后可以直接访问static2下面的index.html

//添加一个static的中间件  express.static  托管页面的中间件 
app.use(express.static('static2',{
	//动态给你匹配后缀 添加访问  
	extensions:['html','htm']
}));

image.png

//可以添加全局404中间件 ,err中间件,看图
function  notFound_middle(req,res,next){
	//res.status(404).send('404没有找到路由');
	res.json({
		data:'error',
		code:'404',
		message:'没有api'
	})	
};

function  err_middle(err,req,res,next){
	if(err){
		let {message} = err;
		res.status(500).json({
			message:`${message || '服务器异常'}`,
			code:500
		})
	}else{
		
	}	
};

image.png

总之:中间件有很多用处,可以做权限的配置,访问前的各种参数校验,系统提供的static中间是最好用,可以直接访问各种资源如css、img、html,pdf,zip直接就下来啦!

###ejs模板引擎的使用(可以用来访问动态数据)
1:安装ejs cnpm install ejs ejs-cli -D
2:使用
let ejs = require('ejs');
//设置ejs为默认的模板引擎
app.set('view engine','ejs')

//设置模板引擎的默认位置(不推荐修改)
//app.set(‘views’,__dirname+’/ejs’);
//修改后缀为html(不推荐修改)
//app.engine(‘html’,ejs.__express);
//app.set(‘view engine’,‘html’);

这里用/login 和/send来演示如何使用
1:首先定义路由
image.png
说明 :res.render(‘loginPage’)---->就是要渲染的模板引擎,名称必须views下面的对应,否则就找不到
image.png

image.png
如果要引入其他ejs模板引擎,一行代码搞定
//可以做公用的头部
<%- include(‘common/header.ejs’) %>
详情api,请参考官网 https://ejs.bootcss.com/

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值