使用node建立本地服务器访问静态文件

最终目录结构

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端口");

巴特西