最终目录结构

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. 算法习题---5-7打印队列（UVa12100）

    一:题目 有一个打印机,有一些任务在排着队打印,每个任务都有优先级.打印时,每次取出队列第一个任务,如果它的优先级不是当前队列中最高的,就会被放到队尾,否则就打印出来.输出初始队列的第m个任务的打印时 ...

  2. 转 mysql 文件系统空间满了

    #######################sample [OIP - 互联网开放平台]在2019-07-28 21:30:11发生10.194.42.19 - - Linux上的监控项[磁盘空间] ...

  3. PAT 甲级 1145 Hashing - Average Search Time (25 分)（读不懂题，也没听说过平方探测法解决哈希冲突。。。感觉题目也有点问题）

    1145 Hashing - Average Search Time (25 分)   The task of this problem is simple: insert a sequence of ...

  4. 配置ssh免密，仍需要密码

    配置ssh免密码登录后,仍提示输入密码 解决方法: 首先我们就要去查看系统的日志文件 tail /var/log/secure -n 20   Authentication refused: bad ...

  5. AWS 身份及验证服务（四）

    IAM 概述 集中管理访问AWS资源的访问权限和用户身份认证 支持联合访问管理,支持LADP第三方服务 (Identity Provider) 是非区域相关的服务,全局有效 创建用户.组和角色以应用策 ...

  6. linux 软连接【转】

    https://www.cnblogs.com/kex1n/p/5193826.html这是linux中一个非常重要命令,请大家一定要熟悉.它的功能是为某一个文件在另外一个位置建立一个同不的链接,这个 ...

  7. java多线程实现多客户端socket通信

    一.服务端 package com.czhappy.hello.socket; import java.io.IOException; import java.net.InetAddress; imp ...

  8. linux CentOS7 安装字体库-转

    前言 报表中发现有中文乱码和中文字体不整齐(重叠)的情况,首先考虑的就是操作系统是否有中文字体,在CentOS 7中发现输入命令查看字体列表是提示命令无效: 如上图可以看出,不仅没有中文字体,连字体库 ...

  9. layer.prompt添加多个输入框

    原文链接:https://www.jianshu.com/p/65fea33e6750 我们都知道layer.prompt官网上的例子是一个弹出框,那么有没有可能出来多个呢,当然是可以的 1.首先增加 ...

  10. 学习笔记：oracle学习三：SQL语言基础之sql语言简介、用户模式

    目录 1.sql语言简介 1.1 sql语言特点 1.2 sql语言分类 1.3 sql语言的编写规则 2.用户模式 2.1 模式与模式对象 2.2 实例模式scott 本系列是作为学习笔记,用于记录 ...