nodejs构建本地web测试服务器 如何解决访问静态资源问题

 更新时间:2017年07月14日 09:57:37   作者:arvin0  
这篇文章主要为大家详细介绍了nodejs构建本地web测试服务器,教大家如何解决访问静态资源问题,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

直接打开html文件,是以file:///方式打开的,这种方式很多时候会遇到跨域的问题,因此我们一般会搭建一个简易的本地服务器,来运行测试页面。

一、构建静态服务器

1、使用express模块

建立个js文件,命名server,内容代码如下:

var express = require('express');
var app = express();
var path = require('path');

//指定静态资源访问目录
app.use(express.static(require('path').join(__dirname, 'public')));
// app.use(express.static(require('path').join(__dirname, 'views'))); 如果有文件夹存放资源,出现报错的话,那就多use几次就可以了
// 设定views变量,意为视图存放的目录
app.set('views', (__dirname + "/public"));
// app.set('views', __dirname);
// 修改模板文件的后缀名为html
app.set( 'view engine', 'html' );
// 运行ejs模块
app.engine( '.html', require( 'ejs' ).__express );

app.get("/", function(req, res) {
  res.render('index');
});

var server = app.listen(1336, "127.0.0.1",function(){
  var host = server.address().address;
  var port = server.address().port;
  console.log("Server running at http://%s:%s", host, port)
});

文件结构如下:

运行的话只要执行:node server.js 就可以了

然后在浏览器输入http://127.0.0.1:1336/ 来访问项目文件夹内的文件了

2、使用connect模块

建立个js文件,命名 server2 ,内容代码如下:

 var connect = require("connect");
 var serveStatic = require("serve-static");

 var app = connect();
 // app.use(serveStatic("C:\\xxx\\xxx\\xxx\\项目文件夹"));
 app.use(serveStatic("public"));

 app.listen(1337);
 console.log('Server running at http://127.0.0.1:1337/');

运行的话只要执行:node server2.js 就可以了,

然后在浏览器输入http://127.0.0.1:1337/ 来访问项目文件夹内的文件了。(如果是index.html文件可以省略不写,默认加载的就是这个文件);

3、使用http模块

建立个js文件,命名 server3 ,内容代码如下:

var finalhandler = require('finalhandler')
var http = require('http')
var serveStatic = require('serve-static')

// Serve up public/ftp folder
var serve = serveStatic('public', {'index': ['index.html', 'index.htm']})

// Create server
var server = http.createServer(function onRequest (req, res) {
  serve(req, res, finalhandler(req, res))
})

// Listen
server.listen(1338);
console.log('Server running at http://127.0.0.1:1338/');

运行的话只要执行:node server3.js 就可以了,

然后在浏览器输入http://127.0.0.1:1338/ 来访问项目文件夹内的文件了。

注:总的文件目录如下:

源码下载地址:https://github.com/arvin0/nodejs-example/tree/master/web-static-test-server

二、解决访问静态资源

主要使用两个模块

1.通用的 serve-static 模块

详细文档:https://github.com/expressjs/serve-static

2.express专属的  app.use(express.static(require('path').join(__dirname, 'public')));  方法

详细文档:http://expressjs.com/en/4x/api.html ,然后ctrl+F搜索 express.static ,就能找到对应的说明了。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

相关文章

  • 使用Typescript和ES模块发布Node模块的方法

    使用Typescript和ES模块发布Node模块的方法

    这篇文章主要介绍了使用Typescript和ES模块发布Node模块的方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-05-05
  • Node.js fs模块(文件模块)创建、删除目录(文件)读取写入文件流的方法

    Node.js fs模块(文件模块)创建、删除目录(文件)读取写入文件流的方法

    这篇文章主要介绍了Node.js fs模块(文件模块)创建、删除目录(文件)读取写入文件流的方法,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-09-09
  • npm镜像源更改后不生效(附淘宝镜像源)

    npm镜像源更改后不生效(附淘宝镜像源)

    淘宝的NPM镜像源registry.npm.taobao.org已经过期,导致npm install时出现证书过期错误,更换镜像源至registry.npmmirror.com后,如果仍出现错误,可能是项目中的package-lock.json或.npmrc文件锁定了旧的镜像源,本文就来介绍一下解决方法,感兴趣的可以了解一下
    2024-10-10
  • 使用Koa实现一个获取视频播放地址的接口

    使用Koa实现一个获取视频播放地址的接口

    在本节课中,我们将学习如何使用 Koa 实现一个获取视频播放地址的接口,我们将创建一个控制器,通过视频 ID 获取播放地址,并设置相应的路由,最后,我们将使用 Postman 进行测试,感兴趣的朋友可以参考下
    2024-05-05
  • 用Node.JS打造一个恶劣天气实时预警系统

    用Node.JS打造一个恶劣天气实时预警系统

    本文将从实战的角度出发,利用NodeJS以及聚合数据的第三方免费接口打造一个完整的天气实时预警项目系统,具有一定的参考价值,感兴趣的可以了解一下
    2021-12-12
  • Node.js读取文件内容示例

    Node.js读取文件内容示例

    本篇文章主要介绍了Node.js读取文件内容,Node.js读取文件内容包括同步和异步两种方式。有兴趣的可以了解一下。
    2017-03-03
  • Nodejs如何搭建Web服务器

    Nodejs如何搭建Web服务器

    这篇文章主要介绍了Nodejs如何搭建Web服务器,本文教大家使用 Nodejs搭建一个简单的Web服务器,感兴趣的小伙伴们可以参考一下
    2016-03-03
  • nodejs+express最简易的连接数据库的方法

    nodejs+express最简易的连接数据库的方法

    这篇文章主要介绍了nodejs+express 最简易的连接数据库,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-12-12
  • 基于Node的Axure文件在线预览的实现代码

    基于Node的Axure文件在线预览的实现代码

    这篇文章主要介绍了基于Node的Axure文件在线预览的实现代码,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-08-08
  • 关于node使用multer进行文件的上传与下载

    关于node使用multer进行文件的上传与下载

    这篇文章主要介绍了关于node使用multer进行文件的上传与下载,Multer是一个Node.js中间件,用于处理表单数据中的multipart/form-data类型,需要的朋友可以参考下
    2023-04-04

最新评论