在node.js基本上没有兼容问题(如果你不是从早期的node.js玩起来),而且原生对象又加了这么多扩展,再加上node.js自带的库,每个模块都提供了花样繁多的API,如果还嫌不够,github上还有上千个插件。对于想向尝试一下后端编程的JSer来说,这是极具诱惑力的。可能有人说,后端不是涉及数据库操作吗?这与比前端的DOM兼容比起来,不值一提。还有什么文件夹与文件操作 ,你就当成是一种特殊的数组操作就是。因此你完全可以愤愤不平!

好了,我们来点实质的内容吧。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简单的页面输出的更多相关文章

  1. Node.js简单介绍并实现一个简单的Web MVC框架

    编号:1018时间:2016年6月13日16:06:41功能:Node.js简单介绍并实现一个简单的Web MVC框架URL :https://cnodejs.org/topic/4f16442cca ...

  2. 通过node.js读取html页面及其页面中引入的css样式

    Node 是什么? Node 是一个基于Chrome V8 引擎的JavaScript 运行环境. Node 不是一种独立的语言.Node不是 JavaScript 框架, Node是一个除了浏览器之 ...

  3. 在Node.js中使用ejsexcel输出EXCEL文件

    1.背景 在Nodejs应用程序中输出Excel,第一印象想到的一般是node-xlsx,这类插件不仅需要我们通过JS写入数据,还需要通过JS进行EXCEL显示样式的管理. 这是个大问题,不仅代码冗余 ...

  4. Node.js简单操作

    在node中是不支持BOM和DOM操作的,所以像alert().document.write...都是不支持的,可以是console.log() 首先我们来输出"hello world&qu ...

  5. Node.js的静态页面想通过jQuery的Ajax函数调用远程服务的措施无效

    程序下载:https://files.cnblogs.com/files/xiandedanteng/nodejsMakejqueryAjaxInvalid.rar 在 http://www.cnbl ...

  6. node.js简单数据接口开发

    随着网络时代的快速发展,前端开发不仅仅是做出漂亮的页面就可以了,还要会一点后端语言,那么后端语言有Java,php,node.js最常见,那我们应该学哪一种呢,为了让我们自己更好的学习,我推荐选择no ...

  7. 使用Node.js简单创建一个服务器

    首先,我们要了解Node.js不是一种语言,它只是一个除了浏览器之外的,可以运行js的环境. 其次,Node能做些什么 ? web服务器.  命令行工具.   网络爬虫. 桌面应用程序开发等 3.接下 ...

  8. Node.js简单介绍

    Node.js是一个能够让javascript执行在server上的平台,既是语言又是平台. Node.js是一个实时web应用程序的平台. Node.js有强大的包管理器npm,故node相关软件安 ...

  9. 一个基于React整套技术栈+Node.js的前端页面制作工具

    pagemaker是一个前端页面制作工具,方便产品,运营和视觉的同学迅速开发简单的前端页面,从而可以解放前端同学的工作量.此项目创意来自网易乐得内部项目nfop中的pagemaker项目.原来项目的前 ...

随机推荐

  1. 得分(Score,ACM/ICPC Seoul 2005,UVa 1585)

    #include<stdio.h> int main(void) { char b; int t,cou,sum; scanf("%d",&t); getcha ...

  2. CSS 2D转换 matrix() 详解

    2D转换 IE10.Firefox.Opera 支持 transform 属性 Chrome.Safari 需要前缀 -webkit- . IE9 需要前缀 -ms- . translate():接收 ...

  3. Nginx变量的实现机制

    Nginx有两种定义变量的方式,一种是在配置文件中使用set指令(由rewrite模块提供支持),另一种是在模块内定义变量. 变量相关结构体: struct ngx_http_variable_s { ...

  4. ProcDump

    https://technet.microsoft.com/en-us/sysinternals/dd996900.aspx

  5. delete this及堆破坏检测方法

    作者: Bruce   日期: 2012年06月03日 04:20 周日 发表评论 (0) 查看评论 --END*1--> 0 条评论 --END*2-->1,837 人阅读   程序BU ...

  6. 转15个必须知道的chrome开发者技巧GIF

    在Web开发者中,Google Chrome是使用最广泛的浏览器.六周一次的发布周期和一套强大的不断扩大开发功能,使其成为了web开发者必备的工具.你可能已经熟悉了它的部分功能,如使用console和 ...

  7. Antenna Placement(匈牙利算法 ,最少路径覆盖)

    Antenna Placement Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 6991   Accepted: 3466 ...

  8. java笔记--反射机制之基础总结与详解

    一.反射之实例化Class类的5种方式: java的数据类型可以分为两类,即引用类型和原始类型(即基本数据类型). 对于每种类型的对象,java虚拟机会实例化不可变的java.lang.Class对象 ...

  9. (源码)自己写的ScrollView里套漂亮的圆角listview(算是漂亮吧。。。)

    找了相关的资料终于写完了: http://blog.csdn.net/jamin0107/article/details/6973845 和 http://emmet1988.iteye.com/bl ...

  10. Ubuntu 14.04/14.10下安装VMware Workstation 11图文教程

    VMware workstation 是一个可以进行桌面操作的虚拟软件.它可以让我们在一台电脑或者虚拟机中运行多个虚拟机. 由VMware公司研发和维护.由于是商业软件,我们需要买他们家的许可证或者说 ...