最终目录结构
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 function2.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端口");
