详解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 终端打印进度条实例代码
Apr 22 NodeJs
nodejs入门教程三:调用内部和外部方法示例
Apr 24 NodeJs
NodeJs安装npm包一直失败的解决方法
Apr 28 NodeJs
详解Nodejs之npm&amp;package.json
Jun 15 NodeJs
nodejs开发微信小程序实现密码加密
Jul 11 NodeJs
nodejs读取并去重excel文件
Apr 22 NodeJs
Nodejs中的JWT和Session的使用
Aug 21 NodeJs
基于Nodejs的Tcp封包和解包的理解
Sep 19 NodeJs
手把手教你如何使用nodejs编写cli命令行
Nov 05 NodeJs
详解nodejs解压版安装和配置(带有搭建前端项目脚手架)
Dec 06 NodeJs
nodejs实现获取本地文件夹下图片信息功能示例
Jun 22 NodeJs
NodeJS配置CORS实现过程详解
Dec 02 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中的traits实现代码复用使用实例
2015/05/13 PHP
使用laravel的migrate创建数据表的方法
2019/09/30 PHP
php并发加锁问题分析与设计代码实例讲解
2021/02/26 PHP
JavaScript 嵌套函数指向this对象错误的解决方法
2010/03/15 Javascript
Web前端设计模式  制作漂亮的弹出层
2010/10/29 Javascript
jQuery插件开发的两种方法及$.fn.extend的详解
2014/01/16 Javascript
js对字符的验证方法汇总
2015/02/04 Javascript
对Web开发中前端框架与前端类库的一些思考
2015/03/27 Javascript
js设置document.domain实现跨域的注意点分析
2015/05/21 Javascript
jquery关于事件冒泡和事件委托的技巧及阻止与允许事件冒泡的三种实现方法
2015/11/27 Javascript
jQuery实现的多滑动门,多选项卡效果代码
2016/03/28 Javascript
Bootstrap编写一个兼容主流浏览器的受众门户式风格页面
2016/07/01 Javascript
jQuery验证表单格式的使用方法
2017/01/10 Javascript
基于JS实现翻书效果的页面切换样式
2017/02/16 Javascript
jQuery动画_动力节点节点Java学院整理
2017/07/04 jQuery
Vue.js+Layer表格数据绑定与实现更新的实例
2018/03/07 Javascript
angular4强制刷新视图的方法
2018/10/09 Javascript
用Object.prototype.toString.call(obj)检测对象类型原因分析
2018/10/11 Javascript
原生JS使用Canvas实现拖拽式绘图功能
2019/06/05 Javascript
[01:15:18]2014 DOTA2国际邀请赛中国区预选赛 LGD VS Speed Gaming.cn
2014/05/22 DOTA
python代码检查工具pylint 让你的python更规范
2012/09/05 Python
Python入门篇之字符串
2014/10/17 Python
Python迭代器和生成器介绍
2015/03/06 Python
简单了解python单例模式的几种写法
2019/07/01 Python
python多线程同步之文件读写控制
2021/02/25 Python
CSS实现圆形放大镜狙击镜效果 只有圆圈里的放大
2012/12/10 HTML / CSS
纯CSS3实现扇形动画菜单(简化版)实例源码
2017/01/17 HTML / CSS
详解CSS3+JS完美实现放大镜模式
2020/12/03 HTML / CSS
美国汽车交易网站:Edmunds
2016/08/17 全球购物
美国Curacao百货连锁店网站:iCuracao.com
2019/07/20 全球购物
创业大赛策划书
2014/03/01 职场文书
求职自荐信的格式
2014/04/07 职场文书
旅游安全责任协议书
2016/03/22 职场文书
创业的9条正确思考方式
2019/08/26 职场文书
使用Python开发贪吃蛇游戏 SnakeGame
2022/04/30 Python
MySQL导致索引失效的几种情况
2022/06/25 MySQL