文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

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

2022-06-04 17:35

关注

直接打开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/ 来访问项目文件夹内的文件了。

注:总的文件目录如下:

查看图片

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程网。

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-服务器
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯