详解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异步编程
Dec 04 NodeJs
nodeJs内存泄漏问题详解
Sep 05 NodeJs
Nodejs进阶:基于express+multer的文件上传实例
Nov 21 NodeJs
详谈Angular路由与Nodejs路由的区别
Mar 05 NodeJs
详解nodeJS中读写文件方法的区别
Mar 06 NodeJs
nodejs实现简单的gulp打包
Dec 21 NodeJs
解决nodejs的npm命令无反应的问题
May 17 NodeJs
nodejs读取本地中文json文件出现乱码解决方法
Oct 10 NodeJs
CentOS7中源码编译安装NodeJS的完整步骤
Oct 13 NodeJs
基于NodeJS开发钉钉回调接口实现AES-CBC加解密
Aug 20 NodeJs
NodeJs内存占用过高的排查实战记录
May 10 NodeJs
详解NodeJS模块化
Jun 15 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
php分页示例代码
2007/03/19 PHP
PHP下用rmdir实现删除目录的三种方法小结
2008/04/20 PHP
PHP文件操作方法汇总
2015/07/01 PHP
jQuery判断元素是否是隐藏的代码
2011/04/24 Javascript
JQuery在页面中添加和除移DOM示例代码
2013/06/24 Javascript
javascript 获取图片尺寸及放大图片
2013/09/04 Javascript
JQuery Highcharts 动态生成图表的方法
2013/11/15 Javascript
JS+CSS相对定位实现的下拉菜单
2015/10/06 Javascript
jquery实现网页的页面平滑滚动效果代码
2015/11/02 Javascript
javaScript嗅探执行神器-sniffer.js
2017/02/14 Javascript
JavaScript+Html5实现按钮复制文字到剪切板功能(手机网页兼容)
2017/03/30 Javascript
vue使用axios时关于this的指向问题详解
2017/12/22 Javascript
Vue中使用create-keyframe-animation与动画钩子完成复杂动画
2019/04/09 Javascript
原生js实现each方法实例代码详解
2019/05/27 Javascript
原生js实现分页效果
2020/09/23 Javascript
[03:40]DOTA2英雄梦之声_第01期_炼金术士
2014/06/23 DOTA
[45:44]完美世界DOTA2联赛PWL S2 FTD vs PXG 第一场 11.27
2020/12/01 DOTA
在Python程序中实现分布式进程的教程
2015/04/28 Python
python虚拟环境virtualenv的安装与使用
2017/09/21 Python
Python模拟脉冲星伪信号频率实例代码
2018/01/03 Python
matplotlib给子图添加图例的方法
2018/08/03 Python
Python实现的排列组合、破解密码算法示例
2019/04/12 Python
Python提取转移文件夹内所有.jpg文件并查看每一帧的方法
2019/06/27 Python
Python实现性能自动化测试竟然如此简单
2019/07/30 Python
Python作用域与名字空间原理详解
2020/03/21 Python
Django ModelForm组件原理及用法详解
2020/10/12 Python
Giglio俄罗斯奢侈品购物网:男士、女士、儿童高级时装
2018/07/27 全球购物
莱德杯高尔夫欧洲官方商店:Ryder Cup Shop
2019/08/14 全球购物
如何设定的weblogic的热启动模式(开发模式)与产品发布模式
2012/09/08 面试题
Linux如何压缩可执行文件
2013/10/21 面试题
彩色的翅膀教学反思
2014/04/25 职场文书
镇党政领导班子民主生活会思想汇报
2014/10/11 职场文书
2014年小学校长工作总结
2014/12/08 职场文书
小学教师个人工作总结2015
2015/04/20 职场文书
小鞋子观后感
2015/06/05 职场文书
MySQL面试题讲解之如何设置Hash索引
2021/11/01 MySQL