博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
nodejs 构建本地web测试服务器 以及 解决访问静态资源的问题!有完整源码!
阅读量:4462 次
发布时间:2019-06-08

本文共 2237 字,大约阅读时间需要 7 分钟。

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

一、构建静态服务器

1、使用express模块

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

1 var express = require('express'); 2 var app = express(); 3 var path = require('path'); 4  5 //指定静态资源访问目录 6 app.use(express.static(require('path').join(__dirname, 'public'))); 7 // app.use(express.static(require('path').join(__dirname, 'views'))); 如果有文件夹存放资源,出现报错的话,那就多use几次就可以了 8 // 设定views变量,意为视图存放的目录 9 app.set('views', (__dirname + "/public"));10 // app.set('views', __dirname);11 // 修改模板文件的后缀名为html12 app.set( 'view engine', 'html' );13 // 运行ejs模块14 app.engine( '.html', require( 'ejs' ).__express );15 16 app.get("/", function(req, res) {17     res.render('index');18 });19 20 var server = app.listen(1336, "127.0.0.1",function(){21     var host = server.address().address;22     var port = server.address().port;23     console.log("Server running at http://%s:%s", host, port)24 });

文件结构如下:

运行的话只要执行: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 ,内容代码如下:

1 var finalhandler = require('finalhandler') 2 var http = require('http') 3 var serveStatic = require('serve-static') 4  5 // Serve up public/ftp folder 6 var serve = serveStatic('public', {'index': ['index.html', 'index.htm']}) 7  8 // Create server 9 var server = http.createServer(function onRequest (req, res) {10     serve(req, res, finalhandler(req, res))11 })12 13 // Listen14 server.listen(1338);15 console.log('Server running at http://127.0.0.1:1338/');

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

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

注:总的文件目录如下:

源码下载地址:

二、解决访问静态资源

主要使用两个模块

1.通用的 serve-static 模块

详细文档:

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

详细文档: ,然后ctrl+F搜索 express.static ,就能找到对应的说明了。

 

转载于:https://www.cnblogs.com/seanp/p/7522564.html

你可能感兴趣的文章
强烈推荐美文之《从此刻起,我要》
查看>>
敏捷开发流程
查看>>
leetcode 412. Fizz Buzz
查看>>
对Netflix Ribbon的Loadbalancer类源码设计合理性的一点质疑
查看>>
关于日历的算法
查看>>
[QT编程]QT实现的一个渐隐渐显窗体
查看>>
在Web工程中引入Jquery插件报错解决方案
查看>>
大学总结之影响我最深的十本书
查看>>
用myEclipse连接数据源生成动态数据报表
查看>>
[myeclipse]@override报错问题
查看>>
자주 쓰이는 정규표현식
查看>>
超简单的listview单选模式SingleMode(自定义listview item)
查看>>
vue-11-路由嵌套-参数传递-路由高亮
查看>>
HDU 1199 - Color the Ball 离散化
查看>>
[SCOI2005]骑士精神
查看>>
Hibernate原理解析-Hibernate中实体的状态
查看>>
六时车主 App 隐私政策
查看>>
C语言常见问题 如何用Visual Studio编写C语言程序测试
查看>>
Web用户的身份验证及WebApi权限验证流程的设计和实现
查看>>
hdu 2098 分拆素数和
查看>>