最终目录结构

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. EasyRTMP结合海康HCNetSDK获取海康摄像机H.264实时流并转化成为RTMP直播推流（附源码）

    最近一家深耕于南方电网的科技公司同事找到我们,咨询关于调用海康HCNetSDK取流,并进行互联网转化的方案,经过反复的沟通以及自身在EasyDSS和EasyNVR方面的经验,我们推荐了海康HCNetS ...

  2. idea使用快捷键ALT+/的时候，本来想在new后面创建对象，结果又出来一个new

    我们知道eclipse的自动提示补齐new 后面的对象的快捷键是ALT+/,当我使用idea的时候,把idea的快捷键换成了eclipse的风格. 然而当我按下ALT+/的时候,就给我自动输入了一个n ...

  3. JS正则验证6位数字组成，验证纯中文组成

    常见的简单规则还有6位数字组成的密码,如果想要6位数字以上,第二个参数可以不设置.验证是否是纯中文,可以用Unicode字符区间,在网上找到了验证中文的表达式,然后查了查看Unicode编码的表格,这 ...

  4. 触屏Tap模拟事件

    触屏的click因为有双击判断所以有200ms的延迟,zepto里的touch.js兼容不好所以tap也没法直接用. gibhub上有个fastclick太大了. 自己用touched写个简单的模拟t ...

  5. Docker快速入门——Docker-Compose

    一.Docker-Compose简介 1.Docker-Compose简介 Docker-Compose项目是Docker官方的开源项目,负责实现对Docker容器集群的快速编排.Docker-Com ...

  6. EMQ配置通过nginx反向代理wss和ws

    参考:https://www.cnblogs.com/succour/p/6305574.html EMQ官方文档:https://docs.emqx.io/broker/v3/cn/ 一,系统环境及 ...

  7. 单元测试-测试技术(Unit Test)

    1.1白盒测试和单元测试的区别的论述: 1) 单元测试和白盒测试是不同的,虽然单元测试和白盒测试都是关注功能,虽然他们都需要代码支持,但是级别不同, 白盒测试关注的是类中一个方法的功能是更小的单位,但 ...

  8. ipad 如何 Airplay 到 Windows 上？

    最近刚好有用到这个,觉得还不错,就推荐给大家.虽然个人并不喜欢苹果这一套,但是工作里难免掺杂一些会用到的ipad , mac . 纯粹技术分享. 1. 5KPlayer : https://www.5 ...

  9. iOS-Xib获取view尺寸的问题

    用xib创建的视图,我们一般要在控制器中获取对应的view尺寸,但经常我们没法获取到,或者获取的不准 如果通过xib加载出来的view尺寸是不正确的, 在xib中这个view不管你怎么设置都是治标不治 ...

  10. js 验证手机号

    <script> var reg = /^1([38][0-9]|4[579]|5[0-3,5-9]|6[6]|7[0135678]|9[89])\d{8}$/; function ver ...