详解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 npm包管理的配置方法及常用命令介绍
Jun 05 NodeJs
浅谈NodeJS中require路径问题
May 07 NodeJs
nodejs搭建本地http服务器教程
Mar 13 NodeJs
mac下的nodejs环境安装的步骤
May 24 NodeJs
详解nodeJS之路径PATH模块
May 31 NodeJs
深入理解Nodejs Global 模块
Jun 03 NodeJs
nodejs读取并去重excel文件
Apr 22 NodeJs
Nodejs中获取当前函数被调用的行数及文件名详解
Dec 12 NodeJs
NodeJs之word文件生成与解析的实现代码
Apr 01 NodeJs
nodejs如何在package.json中设置多条启动命令
Mar 16 NodeJs
nodejs+express最简易的连接数据库的方法
Dec 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
PHP 存取 MySQL 数据库的一个例子
2006/10/09 PHP
PHP文件上传主要代码讲解
2013/09/30 PHP
PHP使用NuSOAP调用Web服务的方法
2015/07/18 PHP
PHP容器类的两种实现方式示例
2019/07/24 PHP
用js计算页面执行时间的函数
2006/12/07 Javascript
IE6,IE7下js动态加载图片不显示错误
2010/07/17 Javascript
jQuery中add实现同时选择两个id对象
2010/10/22 Javascript
jquery 使用点滴函数代码
2011/05/20 Javascript
基于jQuery的模仿新浪微博时间的组件
2011/10/04 Javascript
jQuery下拉美化搜索表单效果代码分享
2015/08/25 Javascript
基于jQuery 实现bootstrapValidator下的全局验证
2015/12/07 Javascript
基于angular中的重要指令详解($eval,$parse和$compile)
2016/10/21 Javascript
Bootstrap基本组件学习笔记之分页(12)
2016/12/08 Javascript
Bootstrap免费字体和图标网站(值得收藏)
2017/03/16 Javascript
jQuery常见面试题之DOM操作详析
2017/07/05 jQuery
Vue中的ref作用详解(实现DOM的联动操作)
2017/08/21 Javascript
vue实现密码显示与隐藏按钮的自定义组件功能
2019/04/23 Javascript
JS学习笔记之贪吃蛇小游戏demo实例详解
2019/05/29 Javascript
JS window对象简单操作完整示例
2020/01/14 Javascript
Element图表初始大小及窗口自适应实现
2020/07/10 Javascript
JavaScript实现简易计算器小功能
2020/10/22 Javascript
Python获取电脑硬件信息及状态的实现方法
2014/08/29 Python
在Django的视图(View)外使用Session的方法
2015/07/23 Python
实例解析Python设计模式编程之桥接模式的运用
2016/03/02 Python
浅谈python新手中常见的疑惑及解答
2016/06/14 Python
python九九乘法表的实例
2017/09/26 Python
简单了解Django应用app及分布式路由
2019/07/24 Python
python批量读取文件名并写入txt文件中
2020/09/05 Python
PyTorch之图像和Tensor填充的实例
2019/08/18 Python
使用AJAX和Django获取数据的方法实例
2020/10/25 Python
Vivo俄罗斯官方在线商店:中国智能手机品牌
2019/10/04 全球购物
什么是索引指示器
2012/08/20 面试题
应付会计岗位职责
2013/12/12 职场文书
法人授权委托书
2014/04/03 职场文书
2015年度公共机构节能工作总结
2015/05/26 职场文书
领导激励员工的演讲稿,各种会上用得到,建议收藏
2019/08/13 职场文书