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


Posted in NodeJs onJuly 14, 2017

直接打开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)
});

文件结构如下:

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

运行的话只要执行: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/ 来访问项目文件夹内的文件了。

注:总的文件目录如下:

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

源码下载地址: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 ,就能找到对应的说明了。

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

NodeJs 相关文章推荐
基于 Docker 开发 NodeJS 应用
Jul 30 NodeJs
nodejs开发环境配置与使用
Nov 17 NodeJs
nodejs 提示‘xxx’ 不是内部或外部命令解决方法
Nov 20 NodeJs
nodejs微信公众号支付开发
Sep 19 NodeJs
Nodejs 搭建简单的Web服务器详解及实例
Nov 30 NodeJs
Nodejs读取文件时相对路径的正确写法(使用fs模块)
Apr 27 NodeJs
详解Windows下安装Nodejs步骤
May 18 NodeJs
NodeJS父进程与子进程资源共享原理与实现方法
Mar 16 NodeJs
详解nodejs解压版安装和配置(带有搭建前端项目脚手架)
Dec 06 NodeJs
nodejs通过钉钉群机器人推送消息的实现代码
May 05 NodeJs
nodejs读取图片返回给浏览器显示
Jul 25 NodeJs
基于nodejs+express4.X实现文件下载的实例代码
Jul 13 #NodeJs
详解nodejs的express如何自动生成项目框架
Jul 12 #NodeJs
nodejs中sleep功能实现暂停几秒的方法
Jul 12 #NodeJs
nodejs中解决异步嵌套循环和循环嵌套异步的问题
Jul 12 #NodeJs
深入学习nodejs中的async模块的使用方法
Jul 12 #NodeJs
nodejs后台集成ueditor富文本编辑器的实例
Jul 11 #NodeJs
nodejs开发微信小程序实现密码加密
Jul 11 #NodeJs
You might like
德生S2000电路分析
2021/03/02 无线电
Apache, PHP在Windows 9x/NT下的安装与配置 (二)
2006/10/09 PHP
php win下Socket方式发邮件类
2009/08/21 PHP
php数据库连接时容易出错的特殊符号问题
2010/09/01 PHP
详解PHP内置访问资源的超时时间 time_out file_get_contents read_file
2013/06/03 PHP
PHP的PDO操作简单示例
2016/03/30 PHP
Laravel 5.5基于内置的Auth模块实现前后台登陆详解
2017/12/21 PHP
爱恋千雪-US-AscII加密解密工具(网页加密)下载
2007/06/06 Javascript
extjs fckeditor集成代码
2009/05/10 Javascript
myFocus slide3D v1.1.0 使用方法与下载
2011/01/12 Javascript
js获取图片大小的函数代码
2011/09/20 Javascript
JQuery事件e参数的方法preventDefault()取消默认行为
2013/09/26 Javascript
iframe如何动态创建及释放其所占内存
2014/09/03 Javascript
详解javascript函数的参数
2015/11/10 Javascript
轻松掌握JavaScript策略模式
2016/08/25 Javascript
jQuery实现倒计时重新发送短信验证码功能示例
2017/01/12 Javascript
jQuery控制元素隐藏和显示
2017/03/03 Javascript
vue过渡和animate.css结合使用详解
2017/06/14 Javascript
Vue下滚动到页面底部无限加载数据的示例代码
2018/04/22 Javascript
vue中filters 传入两个参数 / 使用两个filters的实现方法
2019/07/15 Javascript
js 使用ajax设置和获取自定义header信息的方法小结
2020/03/12 Javascript
JavaScript禁止右击保存图片,禁止拖拽图片的实现代码
2020/04/28 Javascript
vue 页面回退mounted函数不执行的解决方案
2020/07/26 Javascript
Vue仿Bibibili首页的问题
2021/01/21 Vue.js
代码块高亮可复制显示js插件highlight.js+clipboard.js整合
2021/02/15 Javascript
[04:03][TI9趣味短片] 小鸽子茶话会
2019/08/20 DOTA
举例讲解Python的lambda语句声明匿名函数的用法
2016/07/01 Python
好用的Python编辑器WingIDE的使用经验总结
2016/08/31 Python
Scrapy框架爬取Boss直聘网Python职位信息的源码
2019/02/22 Python
pandas读取csv文件提示不存在的解决方法及原因分析
2020/04/21 Python
pytorch 计算Parameter和FLOP的操作
2021/03/04 Python
澳大利亚宠物食品和用品商店:PETstock
2020/01/02 全球购物
农林经济管理专业自荐信
2014/09/01 职场文书
党支部审查意见
2015/06/02 职场文书
火锅店的开业营销方案范本!
2019/07/05 职场文书
python前后端自定义分页器
2022/04/13 Python