详解nodejs通过响应回写的方式渲染页面资源
2018-04-07 17:08
696 查看
我们一般通过node框架提供的api操作页面渲染,如何利用原始回写的方式来实现同样的功能呢
下面是通过node 提供的异步地读取一个文件的全部内容api readFile进行操作,代码如下:
html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <link rel="stylesheet" type="text/css" href="./static/style.css" rel="external nofollow" /> <title>Document</title> </head> <body> <div>这是一个div </div> <div>这是一个div </div> <div>这是一个div </div> <div>这是一个div </div> <div>这是一个div </div> <div>这是一个div </div> <div>这是一个div </div> <div>这是一个div </div> <div>这是一个div </div> <div>这是一个div </div> <div>这是一个div </div> <script type="text/javascript" src="./static/test.js"></script> </body> </html>
/static 文件夹里面放test.js 和 style.css 文件
div:nth-child(1){ font-size: 50px; color: red; } div:nth-child(3){ font-size: 80px; color: blue; } div:nth-child(6){ font-size: 100px; color: blueviolet; }
app.js
// 搭建服务 var http = require('http'); var fs = require('fs'); var server = http.createServer(); server.on('listening',()=> { console.log('server starts at localhost 8080'); }) server.listen('8080','localhost'); //监听服务 server.on('request',(req,res)=>{ if(req.url == '/') {//渲染html文件 fs.readFile('./html/node.html',(err,info)=>{ res.write(info); res.end(); }) } else if(req.url.startsWith('/static')) {//统一渲染html需要的static静态文件到页面 fs.readFile(__dirname + req.url,(err,info) =>{ res.write(info); res.end(); }) } })
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
您可能感兴趣的文章:
相关文章推荐
- 通过nodejs 服务器读取HTML文件渲染到页面的方法
- [原创]java WEB学习笔记55:Struts2学习之路---详解struts2 中 Action,如何访问web 资源,解耦方式(使用 ActionContext,实现 XxxAware 接口),耦合方式(通过ServletActionContext,通过实现 ServletRequestAware, ServletContextAware 等接口的方式)
- HttpClient使用GET方式通过代理服务器读取页面的例子
- 2个页面间不通过Session与url的传值方式(转)
- 详解vsftp服务器通过匿名用户、本地用户、虚拟用户三种登录方式实现文件传输
- 【Cocoa(mac) Application 开发系列之四】动作编辑器(Cocos2dx)制作流程详解及附上响应鼠标滚轴事件、反转坐标系、导入/创建资源目录等知识点代码!
- 详解ASP.NET 页面之间传值的几种方式
- 通过文件的拷贝例子,来详解文件资源的正确关闭的两种方法
- Django中通过定时任务触发页面静态化的处理方式
- 详解Spring通过@Value注解注入属性的几种方式
- Structs2通过耦合的方式访问WEB资源
- 在Js页面通过POST传递参数跳转到新页面详解
- java 通过流的方式读取本地图片并显示在jsp 页面上(类型以jpg、png等结尾的图片)
- Laravel通过ajax的POST方式传值并实现页面跳转
- libcurl通过HTTPS方式提交XML并解析响应信息
- 通过ajax方式第二次取某个页面时,得到新页面,而不是缓存的旧页面
- 2个页面间不通过Session与url的传值方式。 选择自 syeerzy 的 Blog
- 通过showModalDialog方式新建的子页面获取父页面参数
- 【REACT NATIVE 系列教程之四】刷新组件RENDER(重新渲染)的三种方式详解
- 使用window.open()方式打开新页面,关闭后浏览器不能释放资源,需要等待主界面关闭后才能释放