详解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基础应用
Feb 03 NodeJs
Nodejs基于LRU算法实现的缓存处理操作示例
Mar 17 NodeJs
nodejs个人博客开发第四步 数据模型
Apr 12 NodeJs
详解nodejs express下使用redis管理session
Apr 24 NodeJs
NodeJS收发GET和POST请求的示例代码
Aug 25 NodeJs
详解使用PM2管理nodejs进程
Oct 24 NodeJs
Nodejs连接mysql并实现增、删、改、查操作的方法详解
Jan 04 NodeJs
nodejs 使用http进行post或get请求的实例(携带cookie)
Jan 03 NodeJs
nodejs微信开发之授权登录+获取用户信息
Mar 17 NodeJs
NodeJS读取分析Nginx错误日志的方法
May 14 NodeJs
Nodejs异步流程框架async的方法
Jun 07 NodeJs
Nodejs中使用puppeteer控制浏览器中视频播放功能
Aug 26 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里的JS打印函数
2006/10/09 PHP
php下将图片以二进制存入mysql数据库中并显示的实现代码
2010/05/27 PHP
PHP网页游戏学习之Xnova(ogame)源码解读(二)
2014/06/23 PHP
浅谈php优化需要注意的地方
2014/11/27 PHP
php curl模拟post请求和提交多维数组的示例代码
2015/11/19 PHP
PHP的自定义模板引擎
2017/03/24 PHP
laravel返回统一格式错误码问题
2019/11/04 PHP
Document 对象的常用方法
2009/07/31 Javascript
JS getStyle获取最终样式函数代码
2010/04/01 Javascript
img onload事件绑定各浏览器均可执行
2012/12/19 Javascript
JS脚本defer的作用示例介绍
2014/01/02 Javascript
javascript文本模板用法实例
2015/07/31 Javascript
js命名空间写法示例
2015/12/18 Javascript
谈一谈bootstrap响应式布局
2016/05/23 Javascript
AngularJS中的DOM操作用法分析
2016/11/04 Javascript
纯js实现悬浮按钮组件
2016/12/17 Javascript
前端JS面试中常见的算法问题总结
2016/12/23 Javascript
vue快捷键与基础指令详解
2017/06/01 Javascript
浅析vue.js数组的变异方法
2018/06/30 Javascript
详解vue中使用微信jssdk
2019/04/19 Javascript
谈谈IntersectionObserver懒加载的具体使用
2019/10/15 Javascript
JS实现基本的网页计算器功能示例
2020/01/16 Javascript
Vue axios 跨域请求无法带上cookie的解决
2020/09/08 Javascript
[03:15]DOTA2-DPC中国联赛1月22日Recap集锦
2021/03/11 DOTA
Python合并字符串的3种方法
2015/05/21 Python
Python编程产生非均匀随机数的几种方法代码分享
2017/12/13 Python
python MNIST手写识别数据调用API的方法
2018/08/08 Python
澳大利亚体育和露营装备在线/实体零售商:Find Sports
2020/06/03 全球购物
类如何去实现接口
2013/12/19 面试题
毕业生文员求职信
2013/11/03 职场文书
中学生爱国演讲稿
2013/12/31 职场文书
餐饮管理自我介绍信
2014/01/15 职场文书
《小小竹排画中游》教学反思
2014/02/26 职场文书
教师师德考核自我评价
2014/09/13 职场文书
农村党支部书记司法四风问题对照检查材料
2014/09/26 职场文书
英文邀请函
2015/02/02 职场文书