详解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和PhantomJS抓取网站页面信息以及网站截图
Nov 18 NodeJs
详解nodejs 文本操作模块-fs模块(一)
Dec 22 NodeJs
nodeJs链接Mysql做增删改查的简单操作
Feb 04 NodeJs
NodeJS测试框架mocha入门教程
Mar 28 NodeJs
nodejs使用express创建一个简单web应用
Mar 31 NodeJs
nodejs个人博客开发第六步 数据分页
Apr 12 NodeJs
NodeJs模拟登陆正方教务
Apr 28 NodeJs
nodejs socket实现的服务端和客户端功能示例
Jun 02 NodeJs
解决Nodejs全局安装模块后找不到命令的问题
May 15 NodeJs
Nodejs中怎么实现函数的串行执行
Mar 02 NodeJs
nodejs搭建本地服务器并访问文件操作示例
May 11 NodeJs
关于NodeJS中的循环引用详解
Jul 23 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 ? EasyUI DataGrid 资料取的方式介绍
2012/11/07 PHP
php实现12306余票查询、价格查询示例
2014/04/17 PHP
PHP附件下载中文名称乱码的解决方法
2015/12/17 PHP
PHP中模拟链表和链表的基本操作示例
2016/02/27 PHP
详解PHP使用Redis存储session时的一个Warning定位
2017/07/05 PHP
PHP parse_ini_file函数的应用与扩展操作示例
2019/01/07 PHP
Javascript 入门基础学习
2010/03/10 Javascript
jquery CSS选择器笔记
2010/03/29 Javascript
jquery 图片轮换效果
2010/07/29 Javascript
jQuery$命名冲突怎么办如何解决
2014/01/16 Javascript
jquery实现滑动特效代码
2015/08/10 Javascript
JS使用eval解析JSON的注意事项分析
2015/11/14 Javascript
js实现页面跳转的几种方法小结
2016/05/16 Javascript
AngularJS基础 ng-list 指令详解及示例代码
2016/08/02 Javascript
详解在WebStorm中添加Vue.js单文件组件的高亮及语法支持
2017/10/21 Javascript
Vuex中实现数据状态查询与更改
2019/11/08 Javascript
基于Python的身份证号码自动生成程序
2014/08/15 Python
python标准算法实现数组全排列的方法
2015/03/17 Python
Python3一行代码实现图片文字识别的示例
2018/01/15 Python
使用Django简单编写一个XSS平台的方法步骤
2019/03/25 Python
用Python批量把文件复制到另一个文件夹的实现方法
2019/08/16 Python
Python元组 tuple的概念与基本操作详解【定义、创建、访问、计数、推导式等】
2019/10/30 Python
python pygame实现挡板弹球游戏
2019/11/25 Python
Tensorflow读取并输出已保存模型的权重数值方式
2020/01/04 Python
为什么称python为胶水语言
2020/06/16 Python
python 如何将office文件转换为PDF
2020/09/22 Python
python 利用Pyinstaller打包Web项目
2020/10/23 Python
css3动画过渡实现鼠标跟随导航效果
2018/02/08 HTML / CSS
函授自我鉴定
2013/11/06 职场文书
美容师的职业规划书
2013/12/27 职场文书
《月迹》教学反思
2014/02/19 职场文书
小学班干部竞选演讲稿
2014/04/24 职场文书
驾驶员培训方案
2014/05/01 职场文书
研究生导师评语
2014/12/31 职场文书
雷锋电影观后感
2015/06/10 职场文书
法人身份证明书
2015/06/18 职场文书