详解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实现PHP的print_r函数代码
Mar 14 NodeJs
轻松创建nodejs服务器(6):作出响应
Dec 18 NodeJs
Nodejs从有门道无门菜鸟起飞必看教程
Jul 20 NodeJs
nodejs连接mongodb数据库实现增删改查
Dec 01 NodeJs
详解nodejs 文本操作模块-fs模块(二)
Dec 22 NodeJs
nodejs 实现钉钉ISV接入的加密解密方法
Jan 16 NodeJs
Nodejs中使用captchapng模块生成图片验证码
May 18 NodeJs
nodejs模块学习之connect解析
Jul 05 NodeJs
nodejs中安装ghost出错的原因及解决方法
Oct 23 NodeJs
Nodejs中crypto模块的安全知识讲解
Jan 03 NodeJs
nodejs实现日志读取、日志查找及日志刷新的方法分析
May 20 NodeJs
NodeJs内存占用过高的排查实战记录
May 10 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 获取远程网页内容的函数
2009/09/08 PHP
PHP5 面向对象(学习记录)
2009/12/02 PHP
PHP中copy on write写时复制机制介绍
2014/05/13 PHP
帝国cms目录结构分享
2015/07/06 PHP
PHP设计模式之组合模式定义与应用示例
2020/02/01 PHP
jQuery+css实现图片滚动效果(附源码)
2013/03/18 Javascript
浅析Js(Jquery)中,字符串与JSON格式互相转换的示例(直接运行实例)
2013/07/09 Javascript
把字符串按照特定的字母顺序进行排序的js代码
2014/01/28 Javascript
createTextRange()的使用示例含文本框选中部分文字内容
2014/02/24 Javascript
优化Node.js Web应用运行速度的10个技巧
2014/09/03 Javascript
Javascript代码实现仿实例化类
2015/04/03 Javascript
详解js中常规日期格式处理、月历渲染和倒计时函数
2016/12/28 Javascript
JavaScript 总结几个提高性能知识点(推荐)
2017/02/20 Javascript
Vue关于数据绑定出错解决办法
2017/05/15 Javascript
ES6中Array.copyWithin()函数的用法实例详解
2017/09/16 Javascript
3种vue路由传参的基本模式
2018/02/22 Javascript
bootstrap table支持高度百分比的实例代码
2018/02/28 Javascript
jQuery实现使用sort方法对json数据排序的方法
2018/04/17 jQuery
Javascript Promise用法详解
2018/05/10 Javascript
js作用域和作用域链及预解析
2019/04/11 Javascript
微信小程序常用赋值方法小结
2019/04/30 Javascript
Smartour 让网页导览变得更简单(推荐)
2019/07/19 Javascript
vue实现一拉到底的滑动验证
2019/07/25 Javascript
JavaScript中的类型检查
2020/02/03 Javascript
vue 解决mintui弹窗弹起来,底部页面滚动bug问题
2020/11/12 Javascript
python实现倒计时的示例
2014/02/14 Python
使用Python对SQLite数据库操作
2017/04/06 Python
Python一行代码实现快速排序的方法
2019/04/30 Python
Django中和时区相关的安全问题详解
2020/10/12 Python
Pycharm同步远程服务器调试的方法步骤
2020/11/04 Python
Vichy薇姿加拿大官网:法国药妆,全球专业敏感肌护肤领先品牌
2018/07/11 全球购物
生物技术专业研究生自荐信
2013/09/22 职场文书
八一建军节感言
2014/02/28 职场文书
纪律教育学习心得体会
2014/09/02 职场文书
一年级小学生评语大全
2014/12/25 职场文书
解决MySQL Varchar 类型尾部空格的问题
2022/04/06 MySQL