最终目录结构
demo
│ node_modules
└───public
│ │ index.html
│ │ index.css
│ └───index.js
└───server.js
一、使用express框架的示例
1.下载express依赖
cnpm install express
2.server.js代码
//server.js
var express = require('express');
var app = express(); app.use(express.static('public'));//express.static是express提供的内置的中间件用来设置静态文件路径 app.get('/index.htm', function (req, res) {
res.sendFile(__dirname + "/" + "index.htm");
}) var server = app.listen(3000, function () {
console.log("监听3000端口")
})
3.public目录里面的index.html、index.css、index.js （其他几个方法公用这个文件夹的面问资源文件）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>本地服务器</title>
<meta charset="UTF-8" />
<link rel="stylesheet" type="text/css" href="index.css"/>
<script src="index.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<h3>本地服务器</h3>
</body>
</html>
//index.css
body{
background: #fff000;
}
//index.js
console.log("index.html加载了index.js")
4.运行
node server.js
二、使用koa框架的示例
1.安装koa koa-static
cnpm install koa koa-static
注意：koa要求node的版本较高(node v7.6.0+)，如果出现如下错误，要升级node
koa-static@4.0.1@koa-static\index.js:39
return async function serve (ctx, next) {
^^^^^^^^
SyntaxError: Unexpected token function
2.server.js代码如下
const Koa = require('koa');
const app = new Koa();
const path = require('path');
const serve = require('koa-static');
const main = serve(path.join(__dirname+'/public'));
app.use(main);
app.listen(3001,function(){
console.log("监听3001端口")
});
三、使用fastify框架的示例
1.安装fastify serve-static
cnpm install fastify serve-static
2.server.js代码如下
const serveStatic = require('serve-static');
const fastify = require('fastify')();
const path = require('path');
fastify.use('/', serveStatic(path.resolve(__dirname, 'public')));
fastify.listen(3002, function () {
console.log("监听3002端口");
})
三、不使用框架的示例
server.js(不需要引入任何第三方依赖)
var url = require("url"),
fs = require("fs"),
http = require("http"),
path = require("path");
http.createServer(function (req, res) {
var pathname = __dirname + url.parse("/public"+req.url).pathname;//资源指向public目录
if (path.extname(pathname) == "") {
pathname += "/";
}
if (pathname.charAt(pathname.length - 1) == "/") {
pathname += "index.html";
}
fs.exists(pathname, function (exists) {
if (exists) {
switch(path.extname(pathname)){
case ".html":
res.writeHead(200, {"Content-Type": "text/html"});
break;
case ".js":
res.writeHead(200, {"Content-Type": "text/javascript"});
break;
case ".css":
res.writeHead(200, {"Content-Type": "text/css"});
break;
case ".gif":
res.writeHead(200, {"Content-Type": "image/gif"});
break;
case ".jpg":
res.writeHead(200, {"Content-Type": "image/jpeg"});
break;
case ".png":
res.writeHead(200, {"Content-Type": "image/png"});
break;
default:
res.writeHead(200, {"Content-Type": "application/octet-stream"});
}
fs.readFile(pathname, function (err, data) {
res.end(data);
});
} else {
res.writeHead(404, {
"Content-Type": "text/html"
});
res.end("<h1>404 Not Found</h1>");
}
});
}).listen(3003);
console.log("监听3003端口");