node.js简单的页面输出
好了，我们来点实质的内容吧。node.js本来就是一个http服务器，它是要与前端交互的，因此少不了两个对象：请求(request)与响应(response)。请求与响应显然一种异步的东西，因为我们 不知道前端什么时候发请求过来，响应也不能立即给前端，还要做日志，读写数据库等操作呢。因此对于javascript来说，这用回调函数来实现最好。那么由誰来接受这个回调呢？一个服务器对象！
var http = require("http");
http.createServer(function(request, response) {
response.writeHead(200, {"Content-Type":"text/plain"});
response.write("Hello node.js");
response.end();
}).listen(8888);
node.js有个特殊的require，用于同步加载其他模块的对象，这与其他语言的require, import差不多。能同步就是好，不像前端那样一层套一层。然后利用一个函数去实例化一个服务器对象，然后监听8888端口。这是node.js官网最初的例子，大家都写烂了。但这样的程序在现实中一无是处，我们在地址栏上输入URL，你起码要返回一个完整页面给我吧！
对此，我们首先要进行模块化。模块化是以文件为单位的，把example.js更名为server.js，然后再把里面的内容改为一个模块。对于一个node.js的文件，其实它里面的内容是在一个封闭的环境中执行。要想共享给其他模块使用，就必须绑定在exports对象上。
var http = require("http");
exports.start = function(){
http.createServer(function(request, response) {
console.log("Request received...");
response.writeHead(200, {"Content-Type":"text/plain"});
response.write("Hello node.js");
response.end();
}).listen(8888);
console.log("server start...");
}
然后我们再建一个index.js作为入口（index.js与server.js放在同一目录下）。
var server = require("./server");
server.start();
然后建一个index.html页面。
<!doctype html>
<html>
<head>
<title>index</title>
<metacontent="IE=8"http-equiv="X-UA-Compatible"/> <metahttp-equiv="Content-Type"content="text/html; charset=UTF-8"> </head>
<body>
<h2>这是首页</h2> </body>
</html>
现在我们就在要请求过来时，把此页的内容读出来，返给用户。这时我们就要用到fs模块的方法了。
var http = require("http");
var fs = require('fs');
exports.start = function(){
http.createServer(function(request, response) {
fs.readFile('./index.html','utf-8',function(err, data) {//读取内容
if(err) throw err;
response.writeHead(200, {"Content-Type":"text/html"});//注意这里
response.write(data);
response.end();
});
}).listen(8888);
console.log("server start...");
}
好了，这时我们重启再次输入地址，就看到一个完整的页面了。
但一个页面除了HTML结构层外，还有javascript与css。那么，我们在当前目录建一个文件夹javascripts， 里面建index.js，内容如下：
window.onload = function(){
varp = document.createElement("p");
p.innerHTML ="这是动态添加的"
document.body.appendChild(p);
}
再建一个styles目录，里面建index.css，内容如下：
html,body{
background:#3671A5;
height: 100%
}
然后在index.html引入这两个文件：
<!doctype html>
<html>
<head>
<title>index</title>
<metacontent="IE=8"http-equiv="X-UA-Compatible"/>
<metahttp-equiv="Content-Type"content="text/html; charset=UTF-8">
<linktype="text/css"rel="stylesheet"href="styles/index.css"/>
<scriptsrc="/javascripts/index.js"></script> </head>
<body>
<h2>这是首页</h2> </body>
</html>
重新打开，发现没有改变，google，说要处理js与css文件的请求。没有办法，取得request.url属性，再判定后缀名，为它进行文件读取与设置首部。
var http = require("http");
var fs = require('fs');
var url = require('url');
exports.start = function(){
http.createServer(function(request, response) {
varpathname = url.parse(request.url).pathname;
varext = pathname.match(/(\.[^.]+|)$/)[0];//取得后缀名
switch(ext){
case".css":
case".js":
fs.readFile("."+request.url,'utf-8',function(err, data) {//读取内容
if(err) throw err;
response.writeHead(200, {
"Content-Type": {
".css":"text/css",
".js":"application/javascript",
}[ext]
});
response.write(data);
response.end();
});
break;
default:
fs.readFile('./index.html','utf-8',function(err, data) {//读取内容
if(err) throw err;
response.writeHead(200, {
"Content-Type":"text/html"
});
response.write(data);
response.end();
});
}
}).listen(8888);
console.log("server start...");
}
node.js简单的页面输出的更多相关文章
- Node.js简单介绍并实现一个简单的Web MVC框架
编号:1018时间:2016年6月13日16:06:41功能:Node.js简单介绍并实现一个简单的Web MVC框架URL :https://cnodejs.org/topic/4f16442cca ...
- 通过node.js读取html页面及其页面中引入的css样式
Node 是什么? Node 是一个基于Chrome V8 引擎的JavaScript 运行环境. Node 不是一种独立的语言.Node不是 JavaScript 框架, Node是一个除了浏览器之 ...
- 在Node.js中使用ejsexcel输出EXCEL文件
1.背景 在Nodejs应用程序中输出Excel,第一印象想到的一般是node-xlsx,这类插件不仅需要我们通过JS写入数据,还需要通过JS进行EXCEL显示样式的管理. 这是个大问题,不仅代码冗余 ...
- Node.js简单操作
在node中是不支持BOM和DOM操作的,所以像alert().document.write...都是不支持的,可以是console.log() 首先我们来输出"hello world&qu ...
- Node.js的静态页面想通过jQuery的Ajax函数调用远程服务的措施无效
程序下载:https://files.cnblogs.com/files/xiandedanteng/nodejsMakejqueryAjaxInvalid.rar 在 http://www.cnbl ...
- node.js简单数据接口开发
随着网络时代的快速发展,前端开发不仅仅是做出漂亮的页面就可以了,还要会一点后端语言,那么后端语言有Java,php,node.js最常见,那我们应该学哪一种呢,为了让我们自己更好的学习,我推荐选择no ...
- 使用Node.js简单创建一个服务器
首先,我们要了解Node.js不是一种语言,它只是一个除了浏览器之外的,可以运行js的环境. 其次,Node能做些什么 ? web服务器. 命令行工具. 网络爬虫. 桌面应用程序开发等 3.接下 ...
- Node.js简单介绍
Node.js是一个能够让javascript执行在server上的平台,既是语言又是平台. Node.js是一个实时web应用程序的平台. Node.js有强大的包管理器npm,故node相关软件安 ...
- 一个基于React整套技术栈+Node.js的前端页面制作工具
pagemaker是一个前端页面制作工具,方便产品,运营和视觉的同学迅速开发简单的前端页面,从而可以解放前端同学的工作量.此项目创意来自网易乐得内部项目nfop中的pagemaker项目.原来项目的前 ...
随机推荐
- GIT本地操作
01. GIT简介(PPT) ================================================================================ 02. ...
- memcached 缓存服务器
Memcached 缓存服务器 Memcached 是高性能的分布式内存缓存服务器. 一般的使用目的是,通过缓存数据库查询结果,减少数据库访问次数,以提高动态web应用的速度.提高可扩展性. 主要特点 ...
- nginx try_files命令
location / { index index.html index.htm index.php l.php; autoindex on; try_files $uri $uri/ /index.p ...
- TFS2008解除独占式锁定文件命令（转载）
使用场景:如果项目团队成员A对项目某个文件以独占式方式签出,恰好那天该成员A没有来上班而成员需要对此文件进入修改并check in,这时需要先把A对该文件的锁定解除.没有IDE可以使用,只能使用下面的 ...
- vsPhere安装虚拟sm
1.在机器上单击右键 2.选择“编辑设置” 设备状态,选择打开电源时链接,数据存储ISO文件,选择镜象. 3.重启,进入安装界面. 4.
- [Android教程]EditText怎样限制用户的输入?数字/字母/邮箱
有输入必有验证.为了防止用户随便输入确保提交数据的合法性,程序不得不在文本输入框(EditText)中增加限制或验证. 关于输入类型有数字.字母.邮箱.电话等形式,这些具体得根据业务来.那么Andro ...
- [Effective JavaScript 笔记]第50条：迭代方法优于循环
"懒"程序员才是好程序员.复制和粘贴样板代码,一但代码有错误,或代码功能修改,那么程序在修改的时候,程序员需要找到所有相同功能的代码一处处进行修改.这会使人重复发明轮子,而且在别人 ...
- search in 2d matrix and serach minimum in rotated array
import java.io.*; import java.lang.reflect.Array; import java.util.Arrays; import java.util.Collecti ...
- Instance Variables in ruby
Dogs have many shared characteristics, like the abilities to wag their tails and drink water from a ...
- ruby代码重构第一课
(文章是从我的个人主页上粘贴过来的, 大家也可以访问我的主页 www.iwangzheng.com) 新手写代码的时候往往会出现很多重复的代码没有提取出来,大师高瞻远瞩总能提点很多有意义的改进,今天重 ...