当前位置: 首页 > 后端技术 > Node.js

node.js路由设计和页面传递简介

时间:2023-04-03 16:42:18 Node.js

类似于Apache等传统服务器软件,默认提供静态服务,有web容器和根目录的概念。对于Node.js来说,没有web容器和根目录的概念,所以在使用node.js渲染页面时,需要顶层路由设计,将用户访问的URL地址与文件关联起来。通过node.js创建一个http服务器,渲染前端页面不同于apache等传统的http服务器。首先需要进行路由设计,即针对用户不同的url地址有不同的处理方式。对于前端页面,使用fs模块读取文件,读取文件内容,然后设置相应的响应头,然后将数据作为响应体返回到本页面。如下图,在主文件1.js同级目录下有一个test文件夹,里面有一个demo1.html页面。本文件为纯html代码,没有任何外部链接和图片。将路由设计成if(req.url=='/fang'){},即当用户在浏览器中输入地址http://192.168.156.1:3000/fang时,页面就会被渲染。然后进入这个路由选择的if语句,开始用fs模块读取demo1.html文件,在回调函数中设置响应头(状态码为200,返回body的渲染类型为html)读取文件结束,最后把文件内容作为响应体返回给页面。那么1.js的示例代码为:consthttp=require('http');constfs=require('fs');constpath=require('路径');varserver=http.createServer((req,res)=>{if(req.url=='/fang'){vartargetDemo1=path.join(__dirname,'./test/demo1.html');fs.readFile(targetDemo1,(err,data)=>{if(err)throwerr;res.writeHead(200,{"Content-Type":"text/html;charset=UTF8"});res.write(data);res.end();})}});server.listen(3000,'192.168.156.1');如上图,我们要为每一个前端页面设计一个路由,这样渲染。如果我们要呈现的html页面中有外链的图片或者样式表,那么在前端的代码中,这些外链文件都是用相对路径的方式写的。如下图:路由可以设计成if(req.url=='/yuan'){},即当用户在浏览器中输入地址http://192.168.156.1:3000/yuan时,页面将被呈现。然后进入这个路由选择的if语句,开始用fs模块读取demo2.html文件,在回调函数中设置响应头(状态码为200,返回body的渲染类型为html)在读取文件结束时,最后把文件内容作为响应体返回给页面。但是由于node在渲染页面的时候没有文件夹的概念,所以在解析文本的过程中遇到一个路径,就会进行多次路由,多次渲染。当解析为时,node会在req.url='/style.css'路由中查找内容,然后在其上进行渲染。当解析到时,node会在路由req.url='/7.png'中寻找内容,然后在其上进行渲染。其中1.js当中的示例代码为:consthttp=require('http');constfs=require('fs');constpath=require('path');varserver=http.createServer((req,res)=>{if(req.url=='/fang'){vartargetDemo1=path.join(__dirname,'./test/demo1.html');fs.readFile(targetDemo1,(err,data)=>{if(err)throwerr;res.writeHead(200,{"Content-Type":"text/html;charset=UTF8"});res.write(data);res.end();});}elseif(req.url=='/yuan'){vartargetDemo2=path.join(__dirname,'./test/demo2.html');fs.readFile(targetDemo2,(err,data)=>{if(err)throwerr;res.writeHead(200,{"Content-Type":"text/html;charset=UTF8"});res.write(data);res.end();});}elseif(req.url=='/7.png'){vartargetImg=path.join(__dirname,'./test/7.png');fs.readFile(targetImg,(err,data)=>{if(错误)抛出错误;res.writeHead(200,{"Content-Type":"image/png"});res.write(数据);重发();})}elseif(req.url=='/style.css'){vartargetCss=path.join(__dirname,'./test/style.css');fs.readFile(targetCss,(err,data)=>{if(err)throwerr;res.writeHead(200,{"Content-Type":"text/css"});res.write(data);res。结尾();});}else{res.writeHead(404,{"Content-Type":"text/html;charset=UTF8"});res.write('嘻嘻,没有这个页面!');重发();}});server.listen(3000,'192.168.156.1');最终页面渲染结果为: