详解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全局安装和本地安装的不同之处
Jul 04 NodeJs
NodeJS使用formidable实现文件上传
Oct 27 NodeJs
Nodejs 获取时间加手机标识的32位标识实现代码
Mar 07 NodeJs
nodejs+express实现文件上传下载管理网站
Mar 15 NodeJs
详解nodejs模板引擎制作
Jun 14 NodeJs
nodejs+mongodb+vue前后台配置ueditor的示例代码
Jan 02 NodeJs
NodeJs搭建本地服务器之使用手机访问的实例讲解
May 12 NodeJs
通过Nodejs搭建网站简单实现注册登录流程
Jun 14 NodeJs
nodejs文件夹深层复制功能
Sep 03 NodeJs
nodeJS与MySQL实现分页数据以及倒序数据
Jun 05 NodeJs
Nodejs + sequelize 实现增删改查操作
Nov 07 NodeJs
如何利用nodejs实现命令行游戏
Nov 24 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脚本的10个技巧(6)
2006/10/09 PHP
PHP连接SQLServer2005 的问题解决方法
2010/07/19 PHP
php中file_get_content 和curl以及fopen 效率分析
2014/09/19 PHP
php删除指定目录的方法
2015/04/03 PHP
基于命令行执行带参数的php脚本并取得参数的方法
2016/01/25 PHP
jquery中对于批量deferred的处理方法
2014/01/22 Javascript
jquery实现动画菜单的左右滚动、渐变及图形背景滚动等效果
2015/08/25 Javascript
深入解析JavaScript编程中的this关键字使用
2015/11/09 Javascript
js实现兼容IE、Firefox的图片缩放代码
2015/12/08 Javascript
通过node-mysql搭建Windows+Node.js+MySQL环境的教程
2016/03/01 Javascript
JS组件Bootstrap Table布局详解
2016/05/27 Javascript
Javascript基础_嵌入图像的简单实现
2016/06/14 Javascript
使用ajaxfileupload.js实现上传文件功能
2016/08/13 Javascript
js与jquery分别实现tab标签页功能的方法
2016/11/18 Javascript
使用 Node.js 模拟滑动拼图验证码操作的示例代码
2017/11/02 Javascript
详解html-webpack-plugin插件(用法总结)
2018/09/12 Javascript
VUE v-model表单数据双向绑定完整示例
2019/01/21 Javascript
使用Vant完成通知栏Notify的提示操作
2020/11/11 Javascript
[52:02]DOTA2-DPC中国联赛 正赛 Phoenix vs Dragon BO3 第二场 2月26日
2021/03/11 DOTA
Python实现的摇骰子猜大小功能小游戏示例
2017/12/18 Python
Python pandas常用函数详解
2018/02/07 Python
Python中按键来获取指定的值
2019/03/02 Python
python多线程下信号处理程序示例
2019/05/31 Python
图解python全局变量与局部变量相关知识
2019/11/02 Python
如何在python开发工具PyCharm中搭建QtPy环境(教程详解)
2020/02/04 Python
选购国际女性时装设计师品牌:IFCHIC(支持中文)
2018/04/12 全球购物
荷兰时尚精品店:Labels Fashion
2020/03/22 全球购物
西班牙Polo衫品牌:Polo Club
2020/08/09 全球购物
Kappa英国官方在线商店:服装和运动器材
2020/11/22 全球购物
《燕子》教学反思
2014/02/18 职场文书
合作投资意向书
2014/04/01 职场文书
2015年英语教师工作总结
2015/05/20 职场文书
HTML基础-标签分类(闭合标签,空标签,块级元素,行内元素,行级块元素,可替换元素)
2021/03/31 HTML / CSS
Python中快速掌握Data Frame的常用操作
2021/03/31 Python
Python实现DBSCAN聚类算法并样例测试
2021/06/22 Python
python使用matplotlib绘制图片时x轴的刻度处理
2021/08/30 Python