最终目录结构

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

　　

　

使用node建立本地服务器访问静态文件的更多相关文章

  1. node静态资源服务器的搭建----访问本地文件夹（搭建可访问静态文件的服务器）

    我们的目标是实现一个可访问静态文件的服务器,即可以在浏览器访问文件夹和文件,通过点击来查看文件. 1.先创建一个文件夹anydoor,然后在该文件夹里npm init一个package.json文件, ...

  2. 在django中访问静态文件(js css img)

    刚开始参考的是别的文章,后来参考文章<各种 django 静态文件的配置总结>才看到原来没有但是没有注意到版本,折腾了一晚上,浪费了很多很多时间.后来终于知道搜索django1.7访问静态 ...

  3. Flask02 路由的书写、蓝图、利用蓝图实现url前缀、利用蓝图实现子域名、访问静态文件

    1 书写路由的两种方法 1.1 利用Flask实例对象的 add_url_rule 方法实现 该方法有一个必填参数,两个默认参数 · rule : 请求路径的规则 endpoint : 端点,默认值是 ...

  4. SpringBoot学习笔记（二）：SpringBoot访问静态文件、捕获全局异常、集成Thymeleaf、集成JSP

    SpringBoot访问静态文件 什么是静态文件? 不需要通过web容器去得到的文件,直接通过路径就能得到的文件,比如项目的css,js,img等文件. 所有的资源文件都应该在src/main/res ...

  5. SPRING-MVC访问静态文件,如jpg,js,css

    如何你的DispatcherServlet拦截 *.do这样的URL,就不存在访问不到静态资源的问题.如果你的DispatcherServlet拦截“/”,拦截了所有的请求,同时对*.js,*.jpg ...

  6. spingmvc 访问静态文件，比如css，img等

    这里我来引用一段别人的原话 url-pattern有5种配置模式: (1)/xxx:完全匹配/xxx的路径 (2)/xxx/*:匹配以/xxx开头的路径,请求中必须包含xxx. (3)/*:匹配/下的 ...

  7. nginx访问静态文件配置

    通过nginx访问静态文件配置,均是在server模块中配置,有两种方式: 1.alias 通过alias关键字,重定义路径,如 server{     listen 7001;     server ...

  8. nginx之访问静态文件

    如何配置nginx,访问服务器上的静态文件? 1.在目录/data/interface_test下创建静态文件queryAppData.json,内容如下: 如何访问该文件呢? 2.修改/usr/lo ...

  9. VUE打包好的文件部署让beego实现静态文件访问，如何用根目录来访问静态文件？

    最近的一个全栈项目,光伏云监控系统,后端使用beego框架,纯api,前端使用VUE2.0.项目地址:http://scada.ssechina.com:88/static 我把打包好的前端文件放到g ...

随机推荐

  1. 一些有用的github收藏（持续更新中...）

    1.facebook的c++开源库folly(Facebook open source library)介绍 https://github.com/facebook/folly 2.pprint 一个 ...

  2. 全面系统Python3入门+进阶-1-3 我为什么喜欢Python

    结束

  3. 123457123456#0#-----com.tym.myNewShiZi45--前拼后广--识字tym

    com.tym.myNewShiZi45--前拼后广--识字tym

  4. LeetCode_404. Sum of Left Leaves

    404. Sum of Left Leaves Easy Find the sum of all left leaves in a given binary tree. Example: 3 / \ ...

  5. docker安装fastdfs碰到storage的IP地址映射宿主地址问题

    一.概述 最近公司准备全面实施docker部署,解决每次项目实施安装部署环境工作量大问题,mysql5.7.oracle12c很顺利,在安装fastdfs时碰到storage的IP地址映射问题.服务器 ...

  6. Difference between Process and thread?

    What are the differences between a process and a thread? How are they similar? How can 2 threads com ...

  7. Python3 IO编程之文件读写

    读写文件是最常见的IO操作.python内置了读写文件的函数,用法和C是兼容的. 读写文件前,我们先必须了解一个,在磁盘上读写文件的功能都是由操作系统提供的,现代操作系统不允许普通的程序终结操作磁盘, ...

  8. Data - 数据思维 - 中篇

    6 - 模型与框架 利用现有的成熟的理论.模型与框架,结合实际业务情况,搭建分析框架,尽量确保数据分析维度的完整性,结果的有效性及正确性. 营销理论模型:4P.用户使用行为.STP理论.SWOT等. ...

  9. 龙六网络科技有限公司（Dragon six Network Technology Co., Ltd.）

    龙六网络科技有限公司(Dragon six Network Technology Co., Ltd.)

  10. 雨幕——RainCurtian

    今天19年10月14日,也不算是个什么特别的日子.不多能让我的这一天变得特殊的,或许就是在今天我开通了我的第一个博客吧.细想过来每一天都是那么的相似,不过是因为有了某些事情,才变得特殊起来,比如新生命 ...