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 相关文章推荐
nodejs npm install全局安装和本地安装的区别
Jun 05 NodeJs
nodejs实现获取某宝商品分类
May 28 NodeJs
浅析nodejs实现Websocket的数据接收与发送
Nov 19 NodeJs
Nodejs如何复制文件
Mar 09 NodeJs
NodeJS连接MongoDB数据库时报错的快速解决方法
May 13 NodeJs
docker中编译nodejs并使用nginx启动
Jun 23 NodeJs
NodeJS实现图片上传代码(Express)
Jun 30 NodeJs
nodejs 搭建简易服务器的图文教程(推荐)
Jul 18 NodeJs
Nodejs中使用phantom将html转为pdf或图片格式的方法
Sep 18 NodeJs
nodejs简单实现TCP服务器端和客户端的聊天功能示例
Jan 04 NodeJs
nodejs(officegen)+vue(axios)在客户端导出word文档的方法
Jul 31 NodeJs
Nodejs实现的操作MongoDB数据库功能完整示例
Feb 02 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
ftp类(myftp.php)
2006/10/09 PHP
PHPMYADMIN 简明安装教程 推荐
2010/03/07 PHP
Yii配置与使用memcached缓存的方法
2016/07/13 PHP
让网页跳转到指定位置的jquery代码非书签
2013/09/06 Javascript
使用原生js写的一个简单slider
2014/04/29 Javascript
js实现仿QQ秀换装效果的方法
2015/03/04 Javascript
jquery设置表单元素为不可用的简单代码
2016/07/04 Javascript
基于vue的验证码组件的示例代码
2019/01/22 Javascript
使用JavaScript解析URL的方法示例
2019/03/01 Javascript
手把手教你 CKEDITOR 4 扩展插件制作
2019/06/18 Javascript
jquery树形插件zTree高级使用详解
2019/08/16 jQuery
让mocha支持ES6模块的方法实现
2020/01/14 Javascript
python中的reduce内建函数使用方法指南
2014/08/31 Python
Python序列之list和tuple常用方法以及注意事项
2015/01/09 Python
Swift 3.0在集合类数据结构上的一些新变化总结
2016/07/11 Python
python基础练习之几个简单的游戏
2017/11/10 Python
Python下使用Scrapy爬取网页内容的实例
2018/05/21 Python
python将回车作为输入内容的实例
2018/06/23 Python
Django admin model 汉化显示文字的实现方法
2019/08/12 Python
python编写简单端口扫描器
2019/09/04 Python
Python新手学习标准库模块命名
2020/05/29 Python
Python读取Excel数据并生成图表过程解析
2020/06/18 Python
如何在mac版pycharm选择python版本
2020/07/21 Python
CSS3对背景图片的裁剪及尺寸和位置的设定方法
2016/03/07 HTML / CSS
德国高性价比网上药店:medpex
2017/07/09 全球购物
一百多行代码实现react拖拽hooks
2021/03/23 Javascript
关于美容院的活动方案
2014/08/14 职场文书
旅行社优秀创业计划书
2014/08/16 职场文书
领导班子奢靡之风查摆问题及整改措施
2014/09/27 职场文书
个人求职信格式范文
2015/03/20 职场文书
2016年心理学教育培训学习心得体会
2016/01/12 职场文书
pytest进阶教程之fixture函数详解
2021/03/29 Python
matplotlib如何设置坐标轴刻度的个数及标签的方法总结
2021/06/11 Python
解决Swagger2返回map复杂结构不能解析的问题
2021/07/02 Java/Android
从零开始在Centos7上部署SpringBoot项目
2022/04/07 Servers
排查并解决MySQL生产库内存使用率高的报警
2022/04/11 MySQL