详解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写的一个简单项目打包工具
May 11 NodeJs
NodeJS制作爬虫全过程(续)
Dec 22 NodeJs
nodeJS代码实现计算交社保是否合适
Mar 09 NodeJs
NodeJS测试框架mocha入门教程
Mar 28 NodeJs
基于nodejs 的多页面爬虫实例代码
May 31 NodeJs
nodejs mysql 实现分页的方法
Jun 06 NodeJs
NodeJS 实现手机短信验证模块阿里大于功能
Jun 19 NodeJs
基于nodejs res.end和res.send的区别
May 14 NodeJs
nodejs实现一个word文档解析器思路详解
Aug 14 NodeJs
NodeJS搭建HTTP服务器的实现步骤
Oct 12 NodeJs
nodejs同步调用获取mysql数据时遇到的大坑
Mar 02 NodeJs
nodejs简单抓包工具使用详解
Aug 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
人大复印资料处理程序_输入篇
2006/10/09 PHP
Nigma vs Alliance BO5 第三场2.14
2021/03/10 DOTA
一些常用的Javascript函数
2006/12/22 Javascript
jQuery拖动div、移动div、弹出层实现原理及示例
2014/04/08 Javascript
jQuery简单实现遍历数组的方法
2015/04/14 Javascript
JS实现淡蓝色简洁竖向Tab点击切换效果
2015/10/06 Javascript
JQuery 传送中文乱码问题的简单解决办法
2016/05/24 Javascript
jQuery增加和删除表格项目及实现表格项目排序的方法
2016/05/30 Javascript
jQuery bt气泡实现悬停显示及移开隐藏功能的方法
2016/07/12 Javascript
浅析前端路由简介以及vue-router实现原理
2018/06/01 Javascript
基于vue中对鼠标划过事件的处理方式详解
2018/08/22 Javascript
NodeJs实现简易WEB上传下载服务器
2019/08/10 NodeJs
vue 实现模糊检索并根据其他字符的首字母顺序排列
2019/09/19 Javascript
你不可不知的Vue.js列表渲染详解
2019/10/01 Javascript
解决ant-design-vue中menu菜单无法默认展开的问题
2020/10/31 Javascript
在Python中使用M2Crypto模块实现AES加密的教程
2015/04/08 Python
pandas的object对象转时间对象的方法
2018/04/11 Python
对python sklearn one-hot编码详解
2018/07/10 Python
用python实现刷点击率的示例代码
2019/02/21 Python
python批量读取文件名并写入txt文件中
2020/09/05 Python
python实现树的深度优先遍历与广度优先遍历详解
2019/10/26 Python
Python进程池Pool应用实例分析
2019/11/27 Python
虚拟机下载python是否需要联网
2020/07/27 Python
Python爬虫之Spider类用法简单介绍
2020/08/04 Python
企业面试题试卷附带答案
2015/12/20 面试题
经管应届生求职信
2013/11/17 职场文书
外语系毕业生自荐信范文
2013/12/16 职场文书
新闻学专业个人求职信写作
2014/02/04 职场文书
高中生学期学习自我评价
2014/02/24 职场文书
小学生环保演讲稿
2014/04/25 职场文书
演讲稿格式
2014/04/30 职场文书
旅游与环境专业求职信
2014/06/05 职场文书
培训研修方案
2014/06/06 职场文书
五一劳动节演讲稿
2014/09/12 职场文书
2014年政风行风评议工作总结
2014/10/21 职场文书
个人年终总结开头
2015/03/06 职场文书