详解nodejs通过响应回写的方式渲染页面资源


Posted in NodeJs onApril 07, 2018

我们一般通过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 相关文章推荐
nodejs 后缀名判断限制代码
Mar 31 NodeJs
NodeJs中的非阻塞方法介绍
Jun 05 NodeJs
Nodejs使用mysql模块之获得更新和删除影响的行数的方法
Mar 18 NodeJs
Nodejs sublime text 3安装与配置
Jun 19 NodeJs
轻松创建nodejs服务器(2):nodejs服务器的构成分析
Dec 18 NodeJs
nodejs中使用多线程编程的方法实例
Mar 24 NodeJs
详解nodejs微信公众号开发——4.自动回复各种消息
Apr 11 NodeJs
使用nodejs爬取前程无忧前端技能排行
May 06 NodeJs
nodejs创建简易web服务器与文件读写的实例
Sep 07 NodeJs
NodeJs项目中关闭ESLint的方法
Aug 09 NodeJs
nodejs实现范围请求的实现代码
Oct 12 NodeJs
M2实现Nodejs项目自动部署的方法步骤
May 05 NodeJs
原生nodejs使用websocket代码分享
Apr 07 #NodeJs
nodejs多版本管理总结
Apr 03 #NodeJs
nodejs搭建本地服务器轻松解决跨域问题
Mar 21 #NodeJs
nodejs中密码加密处理操作详解
Mar 20 #NodeJs
nodejs连接mysql数据库及基本知识点详解
Mar 20 #NodeJs
nodejs基于express实现文件上传的方法
Mar 19 #NodeJs
nodejs+mongodb aggregate级联查询操作示例
Mar 17 #NodeJs
You might like
文件上传类
2006/10/09 PHP
如何获知PHP程序占用多少内存(memory_get_usage)
2012/09/23 PHP
php多文件打包下载的实例代码
2017/07/12 PHP
php文件操作之文件写入字符串、数组的方法分析
2019/04/15 PHP
基于Jquery的实现回车键Enter切换焦点
2010/09/14 Javascript
JQuery 绑定select标签的onchange事件,弹出选择的值,并实现跳转、传参
2011/01/06 Javascript
jquery $(this).attr $(this).val方法使用介绍
2013/10/08 Javascript
Javascript 拖拽雏形中的一些问题(逐行分析代码,让你轻松了拖拽的原理)
2015/01/23 Javascript
浅谈jquery事件处理
2015/04/24 Javascript
NodeJS连接MongoDB数据库时报错的快速解决方法
2016/05/13 NodeJs
浅谈JavaScript 函数参数传递到底是值传递还是引用传递
2016/08/23 Javascript
Bootstrap源码解读下拉菜单(4)
2016/12/23 Javascript
老生常谈jacascript DOM节点获取
2017/04/17 Javascript
微信小程序实现锚点定位楼层跳跃的实例
2017/05/18 Javascript
浅谈Vue的加载顺序探讨
2017/10/25 Javascript
vue中的event bus非父子组件通信解析
2017/10/27 Javascript
Vue 将后台传过来的带html字段的字符串转换为 HTML
2018/03/29 Javascript
vue-router实现编程式导航的代码实例
2019/01/19 Javascript
微信小程序基于高德地图API实现天气组件(动态效果)
2020/10/22 Javascript
Python两个整数相除得到浮点数值的方法
2015/03/18 Python
让python 3支持mysqldb的解决方法
2017/02/14 Python
python使用opencv按一定间隔截取视频帧
2018/03/06 Python
PyQt5实现简易计算器
2020/05/30 Python
Python 使用双重循环打印图形菱形操作
2020/08/09 Python
英国最大的割草机购买网站:Just Lawnmowers
2019/11/02 全球购物
Timberland德国官网:靴子、鞋子、衣服、夹克及配件
2019/12/10 全球购物
LUISAVIAROMA德国官网:时尚奢侈品牌购物网站
2020/11/12 全球购物
几个数据库方面的面试题
2016/07/01 面试题
物流管理应届生求职信
2013/11/07 职场文书
致短跑运动员广播稿
2014/01/09 职场文书
高中军训感言400字
2014/02/24 职场文书
亲子阅读的活动方案
2014/08/15 职场文书
2014年民主评议党员个人总结
2014/09/24 职场文书
抗洪救灾感谢信
2015/01/22 职场文书
实习证明模板
2015/06/16 职场文书
springboot 全局异常处理和统一响应对象的处理方式
2022/06/28 Java/Android