wordpress百度站长主动推送,网片挂钩,网站开发的英文书有什么,智慧软文目录
express框架
express介绍
express使用
express路由
express 响应设置
中间件
路由模块化
EJS 模板引擎
express-generator hello#xff0c;大家好#xff01;上一篇文章我们介绍了Node.js的模块化以及包管理工具等知识#xff0c;这篇文章主要给大家分享Nod…目录
express框架
express介绍
express使用
express路由
express 响应设置
中间件
路由模块化
EJS 模板引擎
express-generator hello大家好上一篇文章我们介绍了Node.js的模块化以及包管理工具等知识这篇文章主要给大家分享Node.js中的express框架 express框架
express介绍
在上几篇文章中我们介绍了如何使用http模块去搭建http请求而在实际的开发中却很少直接使用它去搭建服务。一般都会借助express框架去进行开发。express 是一个基于 Node.js 平台的极简、灵活的 WEB 应用开发框架官方网址https://www.expressjs.com.cn/ express 相当于是一个封装好的工具包封装了很多功能便于我们开发 WEB 应用HTTP 服务。
express使用
express 本身是一个 npm 包所以我们可以通过 npm 来进行安装。先对文件进行初始化npm i然后再使用npm i express来进行安装express。它的基本使用如下通过node(nodemon) index.js执行文件之后我们在浏览器通过访问http://127.0.0.1:9000/home来进行访问结果。
//导入express
const expressrequire(express);
//创建应用对象
const appexpress();
//创建get请求
app.get(/home,(req,res){res.end(hello express);
});
//监听端口
app.listen(9000,(){console.log(服务启动)
})
express路由
有学习过vue的小伙伴对路由应该不陌生express中的路由也是同样的道理通过访问不同的路径来得到不同的模块在此之前我们是通过判断语句来实现访问不同路径返回对应内容的。而路由能够更加简便地来实现相应的功能。
一个路由包括请求的方法请求的路径以及回调函数三个部分组成。回调函数接收请求的对象以及相应的对象两个参数。使用all可以适用于所有的请求方式而路径使用 * 一般用于处理请求路径匹配不到的错误。
//导入express
const expressrequire(express);
//创建应用对象
const appexpress();
//创建get请求
app.get(/home,(req,res){res.end(hello express);
});
//创建post请求
app.post(/login,(req,res){res.end(login success);
});
//首页路由
app.get(/,(req,res){res.end(home);
})
//匹配所有请求方法
app.all(/search,(req,res){res.end(all req);
})
//定义404路由
app.all(*,(req,res){res.end(h1404 Not Found/h1)
})
//监听端口
app.listen(9000,(){console.log(服务启动)
})
我们仍然可以使用express来获取到请求报文中的数据。express 框架封装了一些 API 来方便获取请求报文中的数据并且兼容原生 HTTP 模块的获取方式。它除了具有原生的method、url、httpVersion以及headers等操作以外它还可以直接使用req.path来得到请求的路径以及req.query来得到查询的数据并且是以对象形式输出。调用get()方法还可以直接传入自己想要的特定响应头进行输出。
//导入express
const expressrequire(express);
//创建应用对象
const appexpress();
//创建get请求
app.get(/request,(req,res){//原生操作console.log(req.method);//GETconsole.log(req.url);///request?nameN-Aconsole.log(req.httpVersion);//1.1console.log(req.headers);//express操作console.log(req.path);///requestconsole.log(req.query);//{ name: N-A }//获取ipconsole.log(req.ip);//::ffff:127.0.0.1//获取特定的请求头console.log(req.get(host));//127.0.0.1:9000res.end(hello express);
});//监听端口
app.listen(9000,(){console.log(服务启动)
})
路由参数的获取对我们很重要我们需要通过用于输入的不同的路由参数来匹配出不同的数据但如果我们一个一个去添加路由规则的话是不现实的。这时候我们可以使用路由参数在传参的位置我们使用一个占位符字符串。字符串的位置在发请求时随意写什么都可以进行匹配到。同时我们可以使用req.params.id来获取我们的路由参数通过判断获取到的路由参数来返回不同的结果。
//导入express
const expressrequire(express);
//创建应用对象
const appexpress();
//创建路由
app.get(/:id.html,(req,res){console.log(req.params.id);res.end(goods detail);
})//监听端口
app.listen(9000,(){console.log(服务启动)
}) 可能有点难理解我们来做一个小练习体验一下吧现在有个需求通过用于在浏览器输入不同的请求路径在json文件中会匹配到对应的数据进行展示。先将两个水果的数据放在一个json文件中然后当用于输入http:127.0.0.1:9000/friut/1.html时在页面上显示id为1的水果的描述以及图片,http:127.0.0.1:9000/friut/2.html时显示id为2的水果。 //json文件
{friut:[{id:1,name: 沃盼WOPAN四川眉山脐橙新鲜水果橙子2kg 4斤装,dicPrice: 19.9,oriPrice: 50,src:https://ts1.cn.mm.bing.net/th/id/R-C.efa51c1248bc80a2bd2bc9a1c2449fad?rikf%2f53DOukVylGvgriuhttp%3a%2f%2fn.sinaimg.cn%2fsinakd20210207s%2f296%2fw1030h866%2f20210207%2f09f4-kirmaiu8306791.jpgehkeTr6szTDThqmZdwt5x3V45f%2b%2bRNJFsDuBjDBLFY99fY%3drislpidImgRawr0},{id:2,name: 智利原装进口车厘子礼盒装JJ级 约2kg 果径约28-30mm 原箱礼盒装 新鲜水果,dicPrice: 219,oriPrice: 299,src:https://img.zcool.cn/community/0165435d9c740da801211d530e7b5e.jpg1280w_1l_2o_100sh.jpg}]
}
//index.js//导入express
const express require(express);//导入json文件
const { friut } require(./data.json);//创建应用对象
const app express();
//创建路由
app.get(/friut/:id.html, (req, res) {//获取路由参数let { id } req.params;//在数组中寻找对应的id的数据let result friut.find(item {if (item.id Number(id)) {return true;}});//判断if(!result){res.statusCode404;res.end(h1404 Not Found/h1)}res.end(!DOCTYPE htmlhtml langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title/headbodyh2${result.name}/h2img src${result.src}//body/html);
})//监听端口
app.listen(9000, () {console.log(服务启动)
})
要点就是通过获取到路由的参数来进行相应数据的寻找以及匹配。
express 响应设置
express可以对相应的数据进行相应的设置框架封装了一些 API 来方便给客户端响应数据并且兼容原生 HTTP 模块的获取方式。主要有res.status( 用于设置状态码res.set()用于设置响应头res.send()用于设置响应体使用该方法设置响应体会自动将响应体中的内容转为utf-8的格式直接写入中文不会出现乱码因此无需再进行响应头的设置。同时几个方法还可以进行连贯操作。
const expressrequire(express);
const appexpress();
app.get(/response,(req,res){//原生响应设置res.statusCode404;res.statusMessageNot Find;res.setHeader(name,N-A);res.write(hello);res.end(response);//express响应res.status(200);res.set(name,N-A);res.send(你好呀)res.status(200).set(name,N-A).send(你好呀);
});app.listen(9000,(){console.log(服务已经启动);
})
同时express还可以进行其他的响应设置比如跳转响应、下载响应、JSON响应、响应文件的内容等。具体的实现效果自行实践。
const expressrequire(express);
const appexpress();
app.get(/response,(req,res){//跳转响应res.redirect(https://baidu.com);//下载响应res.download(__dirname./data.json);//JSON响应res.json({name:N-A,study:Node.js})//响应文件内容res.sendFile(__dirname/index.html)
});app.listen(9000,(){console.log(服务已经启动);
})
中间件
中间件Middleware本质是一个回调函数中间件函数可以像路由回调一样访问 请求对象request 响应对象response。它的作用就是使用函数封装公共操作对代码进行简化。它包括全局中间件以及路由中间件。全局中间件每一个请求到达服务端之后都会执行全局中间件函数而路由中间件只对某一些路由进行功能的封装。
全局中间件的实例如下全局中间件函数三个参数reqres以及next。next用于接续执行。使用中间件需要调用app.use()。
const expressrequire(express);
const appexpress();
const fsrequire(fs);
const pathrequire(path);
//声明中间件函数
function recordMiddleware(req,res,next){let {url,ip}req;//将信息保存在文件中fs.appendFileSync(path.resolve(__dirname,./access.log),${url} ${ip}\r\n);next();
}//使用中间件函数
app.use(recordMiddleware);app.get(/home,(req,res){res.send(首页)
});
app.get(/detail,(req,res){res.send(详情页)
});
app.listen(9000,(){console.log(服务已经启动);
})
路由中间件的实例如下无需关注具体实现的功能主要认识路由中间件如何使用后续要实现什么功能函数里面替换成对应的操作即可。它的使用方式与全局中间件不一样。它需要到对应的路由中进行添加。
const expressrequire(express);
const appexpress();
const fsrequire(fs);
const pathrequire(path);
//声明中间件函数
function checkCodeMiddleware(req,res,next){if(req.query.code521){next();}else{res.send(错误);}
}app.get(/home,checkCodeMiddleware,(req,res){res.send(首页)
});
app.get(/detail,checkCodeMiddleware,(req,res){res.send(详情页)
});
app.all(*,(req,res){res.send(h1404/h1)
})
app.listen(9000,(){console.log(服务已经启动);
})
静态资源来前几篇文章我们已经有介绍到了对于静态资源的处理也是比较麻烦需要获取对应文件的后缀名来判断该文件属于哪一种资源再做相应的处理。而静态资源中间件可以大大地提高我们处理静态资源的效率。使用方式如下
//引入express框架
const express require(express);
//创建服务对象
const app express();
//静态资源中间件的设置将当前文件夹下的public目录作为网站的根目录
app.use(express.static(./public)); //当然这个目录中都是一些静态资源
//如果访问的内容经常变化还是需要设置路由
//但是在这里有一个问题如果public目录下有index.html文件单独也有index.html的路由
//则谁书写在前优先执行谁
app.get(/index.html,(request,response){
respsonse.send(首页);
});
//监听端口
app.listen(3000,(){
console.log(3000 端口启动....);
});
静态资源中间件index.html为默认打开的资源如果静态资源与路由规则同时匹配谁先匹配谁就响应。路由响应动态资源静态资源中间件响应静态资源。
最后我们再介绍一个中间件body-parser。express可以使用这个中间件来进行处理请求体。首先需要使用npm i body-parser 进行安装。然后需要导入body-parser包再获取中间件函数最后是使用 request.body 来获取请求体数据。 我们以一个实例来展示吧假设我们通过get请求来向本地的/login路径发请求显示表单网页通过post请求访问/login来获取表单中的用户名以及密码。 //index.html
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
bodyform action/login methodpost用户名input typetext nameusernamebr/密码 input typepassword namepasswordbr/button登录/button/form/body
/html//导入express
const expressrequire(express);
//导入body-parser包
const bodyParser require(body-parser);
//创建应用对象
const appexpress();//处理 JSON 格式的请求体
//let jsonParser bodyParser.json();//处理 querystring 格式的请求体
let urlParser bodyParser.urlencoded({extended:false});
//创建路由规则
app.get(/login,(req,res){res.sendFile(__dirname/index.html);
});
//post规则
app.post(/login,urlParser,(req,res){console.log(req.body);res.send(req.body)
})
//监听端口
app.listen(9000,(){console.log(服务启动)
})
路由模块化
当什么需要对多个路由进行设置时都在主文件中进行设置就会非常乱维护起来也不是很好因此express引入了Router它可以实现路由的模块化更好地进行管理路由。express 中的 Router 是一个完整的中间件和路由系统可以看做是一个小型的 app 对象。
//创建单独的管理文件homeRouter.js//1. 导入 express
const express require(express);
//2. 创建路由器对象
const router express.Router();
//3. 在 router 对象身上添加路由
router.get(/, (req, res) {
res.send(首页);
})
router.get(/cart, (req, res) {
res.send(购物车);
});
//4. 暴露
module.exports router;//主文件
const express require(express);
const app express();
//5.引入子路由文件
const homeRouter require(./routes/homeRouter);
//6.设置和使用中间件
app.use(homeRouter);
app.listen(9000,(){
console.log(服务已经启动);
})
EJS 模板引擎
EJS 是一个高效的 Javascript 的模板引擎模板引擎是分离 用户界面和业务数据 的一种技术。简单地将就是它能够实现我们的html文件以及js文件分离。上面那个路由跳转不同水果的案例我们就把html中的文件写到了js里面。因此使用EJS模板引擎可以让两者进分开。
首先我们需要使用npm i ejs --save来进行安装。它是将变量名使用% 变量名 %的形式包裹起来的。那具体怎么样体现它的分离效率呢
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
bodyh2% name %今天学习% study %/h2/body
/html//导入EJS
const ejsrequire(ejs);
const fsrequire(fs);
//字符串
let nameN-A;
let studyNode.js
//声明变量
let strfs.readFileSync(./index.html).toString();
//使用ejs渲染
let resultejs.render(str,{name,study});
console.log(result);这样就可以完全将两者进行拆分后续想要修改或者增加都是可以实现的。
下面再来演示EJS模块列表的渲染以及条件的渲染。都是使用% %将内容或者操作包裹在里面然后变量仍然使用% %来进行包裹。
//进行列表的渲染
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
bodyul% study.forEach(item{ %li% item %/li% })%/ul/body
/html//导入EJS
const ejsrequire(ejs);
const fsrequire(fs);const study[Node.js,Vue.js,ES6,Webpack]
//声明变量
let strfs.readFileSync(./index.html).toString();
//使用ejs渲染
let resultejs.render(str,{study});
console.log(result);//输出
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
bodyulliNode.js/liliVue.js/liliES6/liliWebpack/li/ul/body
/html
下面展示条件渲染
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
body% if(isLogin) { %span欢迎回来/span% }else{ %span请登录/span% } %/body
/html//导入EJS
const ejsrequire(ejs);
const fsrequire(fs);let isLogintrue;
//声明变量
let strfs.readFileSync(./index.html).toString();
//使用ejs渲染
let resultejs.render(str,{isLogin});
console.log(result);//当isLogin为true是会输出欢迎回来当为false时会显示请登录
那express如何使用EJS模板引擎呢首先需要设置模板引擎其次要设置模板文件的存放位置然后通过render()方法来做响应该方法接受两个参数模板的文件名以及数据。最后再去设置的相应位置下去创建模板文件后缀应该是.ejs。
//index.js//导入express
const expressrequire(express);
const appexpress();
const pathrequire(path);
//设置模板引擎
app.set(view engine,ejs);
//设置模板文件的存放位置
app.set(views,path.resolve(__dirname,./views));app.get(/home,(req,res){//render响应let nameN-A;res.render(home,{name});res.end(hello express);
})
//监听端口
app.listen(9000,(){console.log(服务启动)
})
!-- home.ejs --!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
bodyh1% name %/h1/body
/html
express-generator
在我们练习的过程中express框架的代码都是我们一点一点写的但是在实际的开发中会非常地低效而express官方提供了一个工具express-generator可以帮助我们快速搭建应用的骨架。
首先我们使用npm install -g express-generator命令来进行安装。然后可以通过express -h来查看它的相关命令。我们选择ejs模板引擎来进行创建。输入expres -e 文件名。创建之后先对文件进行初始化npm init 以及npm i。之后运行npm start 打开3000端口看到如下图片则表示成功 创建之后的文件内容可以自己研究研究这里就不做过多的解释
好了本文就好这里结束啦感谢阅读~~
