Node.js搭建本地静态服务器
了解网络
HTTP(超文本传输协议)
主要内容
请求
请求头
请求体
响应
响应头
响应体
连接(三次握手)
断开(四次挥手)
基于Node.js静态服务器
url模块
- url是node.js的内建模块
- url模块中最重要的方法是parse()方法，用于将url字符串解析成为对象
- 基础语法:url.parse(url:string);
举例_url
var http = require('http');
var url = require('url');
//url为node.js中的内置模块，主要用于解析或者封装url地址
var server = http.createServer(function (req, res) {
console.log(url.parse('http://localhost:4000/img.jpg'));
});
server.listen(4000, function () {
console.log('server is running at 4000 666');
});
$ node index.js
server is running at 4000 666
Url {
protocol: 'http:',
slashes: true,
auth: null,
host: 'localhost:4000',
port: '4000',
hostname: 'localhost',
hash: null,
search: null,
query: null,
pathname: '/img.jpg',
path: '/img.jpg',
href: 'http://localhost:4000/img.jpg' }
举例_fs
fs模块:fs->files system缩写
fs.readFile(); 读取文件内容
fs.state(); 读取文件状态
index.js
var fs = require('fs');
fs.readFile('./test.txt', function(error,data) {
if(error){
console.log(error);
}else {
console.log(data.toString());
}
});
输出
$ node index.js
server is running at 4000 666
这是一个txt文本文件
返回对应的页面
var server = http.createServer(function (req, res) {
// 得到用户访问了哪个地址
var path = '.'+url.parse(req.url).pathname;
// 发送用户访问了哪个网址
fs.readFile(path, function(err, data) {
if(err){
console.log(err);
}else{
var html = data.toString();
res.end(html);
}
});
});
url.parse(req.url).pathname 会解析到对应的路径
js.stat文件状态
fs.stat('public/test.txt', function (err,stat) {
if(err){
console.log(err);
}else{
console.log(stat);
}
});
$ node index.js
server is running at 4000 厉害了
{ dev: 535335,
mode: 33206,
nlink: 1,
uid: 0,
gid: 0,
rdev: 0,
blksize: undefined,
ino: 1407374883560421,
size: 29,
blocks: undefined,
atime: 2017-02-14T01:50:56.535Z,
mtime: 2017-02-14T02:20:15.197Z,
ctime: 2017-02-14T02:51:00.394Z,
birthtime: 2017-02-14T01:50:56.535Z }
这是一个txt文本文件
注意：fs.stat会先于fs.readFile执行。显示了异步执行。
综合应用：
var server = http.createServer(function (req, res) {
// 得到用户访问了哪个地址
var path = './public'+url.parse(req.url).pathname;
fs.stat(path, function (err, stat) {
if(!stat){
// 如果访问的文件不存在，则进入分支
fs.readFile("./public/404.html", function(err,data) {
var html = data.toString();
res.end(html);
});
}else{
// 发送用户访问了哪个网址
fs.readFile(path, function(err, data) {
var html = data.toString();
res.end(html);
});
}
});
});
MIME信息
添加之后
var path = require('path');//处理一些文件目录、路径一类的信息
var MIME = {
html:'text/html',
css:'text/css'
}
发送内容的代码
var server = http.createServer(function (req, res) {
// 得到用户访问了哪个地址
var pathname = './public'+url.parse(req.url).pathname;
fs.stat(pathname, function (err, stat) {
if(!stat){
// 如果访问的文件不存在，则进入分支
fs.readFile("./public/404.html", function(err,data) {
if(err){
console.log(err);
}else{
var html = data.toString();
res.end(html);
}
});
}else{
// 发送用户访问了哪个网址
fs.readFile(pathname, function(err, data) {
if(err){
console.log(err);
}else{
var html = data.toString();
var extname = (path.extname(pathname)).split('.')[1];
res.writeHead(200,{"Content-Type":MIME[extname]});
res.end(html);
}
});
}
});
});
修改，可以传图片
var MIME = {
"":"text/html",
html:'text/html',
css:'text/css',
jpg:"image/jpeg",
png:"image/png",
ico:"image/x-icon"
}
var server = http.createServer(function (req, res) {
// 得到用户访问了哪个地址
var pathname = './public'+url.parse(req.url).pathname;
fs.stat(pathname, function (err, stat) {
if(!stat){
// 如果访问的文件不存在，则进入分支
fs.readFile("./public/404.html", function(err,data) {
if(err){
console.log("stat readFile" + err);
}else{
var extname = (path.extname(pathname)).split('.')[1];
res.writeHead(200,{"Content-Type":MIME[extname]});
res.write(data);
res.end();
}
});
}else{
// 发送用户访问了哪个网址
fs.readFile(pathname, function(err, data) {
//访问根目录，就进入index.html
if(err){
fs.readFile("./public/index.html", function(err,data) {
if(err){
console.log("stat readFile" + err);
}else{
//1.不能转字符串
//2.不用end转
var extname = (path.extname(pathname)).split('.')[1];
res.writeHead(200,{"Content-Type":MIME[extname]});
res.write(data);
res.end();
}
});
}else{
var extname = (path.extname(pathname)).split('.')[1];
res.writeHead(200,{"Content-Type":MIME[extname]});
res.write(data);
res.end();
}
});
}
});
});
页面修改
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>网页</title>
<link rel="stylesheet" href="./css/style.css">
</head>
<body>
<h1>这是HTML网页</h1>
<h2>OK,没毛病</h2>
<img src="./img/01.png" alt="">
</body>
</html>
运行即可查看网页看到效果
