详解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中的非阻塞方法介绍
Jun 05 NodeJs
跟我学Nodejs(一)--- Node.js简介及安装开发环境
May 20 NodeJs
Nodejs实现的一个简单udp广播服务器、客户端
Sep 25 NodeJs
Nodejs全局安装和本地安装的不同之处
Jul 04 NodeJs
nodejs中模块定义实例详解
Mar 18 NodeJs
NodeJs模拟登陆正方教务
Apr 28 NodeJs
nodejs实现的连接MySQL数据库功能示例
Jan 25 NodeJs
NodeJS安装图文教程
Apr 19 NodeJs
NodeJS实现自定义流的方法
Aug 01 NodeJs
NodeJs实现简单的爬虫功能案例分析
Dec 05 NodeJs
nodejs实现聊天机器人功能
Sep 19 NodeJs
nodejs中的异步编程知识点详解
Jan 17 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/02/14 PHP
php while循环得到循环次数
2013/10/26 PHP
Yii实现多按钮保存与提交的方法
2014/12/03 PHP
php断点续传之文件分割合并详解
2016/12/13 PHP
PHP实现的基于单向链表解决约瑟夫环问题示例
2017/09/30 PHP
iis6+javascript Add an Extension File
2007/06/13 Javascript
json的前台操作和后台操作实现代码
2012/01/20 Javascript
js 数组操作之pop,push,unshift,splice,shift
2014/01/29 Javascript
JS+DIV+CSS实现的经典标签切换效果代码
2015/09/14 Javascript
Jquery1.9.1源码分析系列(六)延时对象应用之jQuery.ready
2015/11/24 Javascript
详解AngularJs中$resource和restfu服务端数据交互
2016/09/21 Javascript
JS实现重新加载当前页面或者父页面的几种方法
2016/11/30 Javascript
浅谈js中startsWith 函数不能在任何浏览器兼容的问题
2017/03/01 Javascript
mac上配置Android环境变量的方法
2018/07/08 Javascript
vue中使用heatmapjs的示例代码(结合百度地图)
2018/09/05 Javascript
JS实现判断有效的数独算法示例
2019/02/25 Javascript
javascript创建元素和删除元素实例小结
2019/06/19 Javascript
Vue项目打包部署到iis服务器的配置方法
2019/10/14 Javascript
Python列表(list)、字典(dict)、字符串(string)基本操作小结
2014/11/28 Python
浅谈python中列表、字符串、字典的常用操作
2017/09/19 Python
Python有序查找算法之二分法实例分析
2017/12/11 Python
Python数字图像处理之霍夫线变换实现详解
2018/01/12 Python
Python使用pickle模块存储数据报错解决示例代码
2018/01/26 Python
python实现提取COCO,VOC数据集中特定的类
2020/03/10 Python
基于python 凸包问题的解决
2020/04/16 Python
Python机器学习工具scikit-learn的使用笔记
2021/01/28 Python
Etam德国:内衣精品店
2019/08/25 全球购物
什么是三层交换,说说和路由的区别在那里
2014/09/01 面试题
师范毕业生求职自荐信
2013/09/25 职场文书
房地产出纳岗位职责
2013/12/01 职场文书
某同学的自我鉴定范文
2013/12/26 职场文书
大学生国庆节65周年演讲稿范文
2014/09/25 职场文书
2014年优质护理服务工作总结
2014/11/14 职场文书
幼儿园教师教育随笔
2015/08/14 职场文书
如何优化vue打包文件过大
2022/04/13 Vue.js
redis protocol通信协议及使用详解
2022/07/15 Redis