nodejs 构建本地web测试服务器 以及 解决访问静态资源的问题!有完整源码!
来源:互联网 发布:知乎lolfaker 编辑:程序博客网 时间:2024/06/16 18:28
直接打开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/
来访问项目文件夹内的文件了。
注:总的文件目录如下:
源码下载地址:https://github.com/arvin0/nodejs-example/tree/master/web-static-server-example
二、解决访问静态资源
主要使用两个模块
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 构建本地web测试服务器 以及 解决访问静态资源的问题!有完整源码!
- nodejs 构建本地web测试服务器 以及 解决访问静态资源的问题!有完整源码!
- java web 访问本地的静态资源(图片)
- nodejs访问本地静态资源(进入index.html)
- IBM服务器以及本地PC机安装suse linux,oracle测试,遇到的问题有:
- 如何构建一个完整的WEB服务器
- SpringMVC的静态资源,访问图片服务器
- Spring MVC Restful构建中静态资源访问问题
- web 配置可访问的静态资源
- JSP img元素无法显示本地图片的问题(二)_根源:spring访问静态资源
- Nodejs页面访问加载静态资源
- 解决apache服务器本地可以访问,同局域网内他人不能访问的问题(转)
- 解决apache服务器本地可以访问,同局域网内他人不能访问的问题(转)
- springMVC对静态资源访问的问题
- 关于springMVC 访问静态资源的问题
- 关于静态资源访问的路径问题
- SpringMVC下的静态资源访问问题
- web.xml文件中缺省映射路径"/"问题以及客户端访问web资源的匹配规则
- HDU 3401 Trade(单调队列优化DP)【模板】
- 2017.08.07回顾
- 【BashuOJ1145】虚-组合数+求逆元
- 命令行编译运行从c,c++,java
- 导入导出Excel文件
- nodejs 构建本地web测试服务器 以及 解决访问静态资源的问题!有完整源码!
- React学习总结—生命周期
- codeforces838A Binary Blocks
- unity3D学习之音频基础原理-audio菜鸟笔记3
- SpringBoot整合Ehcache
- BZOJ 2038: [2009国家集训队]小Z的袜子(hose) 莫队算法
- 转载:推荐大学生看的一些书
- Linux解压命令
- 【C语言】队列演示(队列的几个函数)