最终目录结构

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. Qt编写自定义控件66-光晕时钟

    一.前言 在上一篇文章写了个高仿WIN10系统的光晕日历,这次来绘制一个光晕的时钟,也是在某些网页上看到的效果,时分秒分别以进度条的形式来绘制,而且这个进度条带有光晕效果,中间的日期时间文字也是光晕效 ...

  2. Laya发布微信小游戏项目

    版本2.1.1.1 创建项目时,勾选微信/百度小游戏bin目录快速调试 发布项目时,选择发布平台为微信小游戏 用微信开发者工具打开release/wxgame,这就是微信小游戏项目了,很方便

  3. 数据结构与抽象 Java语言描述 第4版 pdf （内含标签）

    数据结构与抽象 Java语言描述 第4版 目录 前言引言组织数据序言设计类P.1封装P.2说明方法P.2.1注释P.2.2前置条件和后置条件P.2.3断言P.3Java接口P.3.1写一个接口P.3. ...

  4. maven 引入的jar有出现两种图标

    两种同样都引入到maven项目中,但是第二种在打包的过程中会显示找不到jar,无法调用!

  5. Pythonrandom模块（获取随机数）常用方法和使用例子

    Python random模块(获取随机数)常用方法和使用例子 这篇文章主要介绍了Python random模块(获取随机数)常用方法和使用例子,需要的朋友可以参考下 random.random ra ...

  6. @PathVariable设置为空的问题（required=false）

    参考了:http://www.imooc.com/qadetail/268268 最近学习springMVC的时候,学到@PathVariable后,发现@PathVariable有个required ...

  7. ibatis 参数 指定类型

    文档: http://ibatis.apache.org/docs/dotnet/datamapper/ch03s04.html <update id="UpdateAccountVi ...

  8. idea设置项目【非springboot项目】热部署

    1.首先打开Edit Configurations 或者 2.添加的项目一定是war: exploded,而不是war 3.server这边,On 'Update' action选Redeploy,O ...

  9. maybatis调用函数和过程的区别

    //定义存储过程create or replace procedure pag_add(p1 varchar2,p2 varchar2,p3 out varchar2) as begin p3:=p1 ...

  10. windows下大数据开发环境搭建（4）——Spark环境搭建

    一.所需环境 · Java 8 · Python 2.6+ · Scala · Hadoop 2.7+ 二.Spark下载与解压 http://spark.apache.org/downloads.h ...