nodejs构建本地web测试服务器 如何解决访问静态资
网络编程 2021-07-04 18:32www.168986.cn编程入门
这篇文章主要为大家详细介绍了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/ 来访问项目文件夹内的文件了。
注总的文件目录如下
源码下载地址
二、解决访问静态资源
主要使用两个模块
1.通用的 serve-static 模块
详细文档
2.express专属的 app.use(express.static(require('path').join(__dirname, 'public'))); 方法
详细文档 ,然后ctrl+F搜索 express.static ,就能找到对应的说明了。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持狼蚁SEO。
编程语言
- 如何快速学会编程 如何快速学会ug编程
- 免费学编程的app 推荐12个免费学编程的好网站
- 电脑怎么编程:电脑怎么编程网咯游戏菜单图标
- 如何写代码新手教学 如何写代码新手教学手机
- 基础编程入门教程视频 基础编程入门教程视频华
- 编程演示:编程演示浦丰投针过程
- 乐高编程加盟 乐高积木编程加盟
- 跟我学plc编程 plc编程自学入门视频教程
- ug编程成航林总 ug编程实战视频
- 孩子学编程的好处和坏处
- 初学者学编程该从哪里开始 新手学编程从哪里入
- 慢走丝编程 慢走丝编程难学吗
- 国内十强少儿编程机构 中国少儿编程机构十强有
- 成人计算机速成培训班 成人计算机速成培训班办
- 孩子学编程网上课程哪家好 儿童学编程比较好的
- 代码编程教学入门软件 代码编程教程