nodejs 构建本地web测试服务器 以及 解决访问静态资源的问题!

直接打开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 // 修改模板文件的后缀名为html
12 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 // Listen
14 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-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 ,就能找到对应的说明了。

时间: 2024-12-15 00:33:07

nodejs 构建本地web测试服务器 以及 解决访问静态资源的问题!的相关文章

nodejs express 路由并显示html以及访问静态资源设置

var express = require('express'); var http = require('http'); var fs = require('fs'); var app = express(); var path = require('path'); app.use(express.static(path.join(__dirname, 'public'))); app.get('/login1', function(req, res, next) { res.writeHea

Spring Mvc Web 配置拦截规则与访问静态资源 (三)

拦截规则配置 1. *.do <!-- Processes application requests --> <servlet> <servlet-name>appServlet</servlet-name> <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class> <init-param> <param-name

SpringMVC访问静态资源的三种方式(转)

本文转自:http://www.iigrowing.cn/springmvc_fang_wen_jing_tai_zi_yuan_de_san_zhong_fang_shi.html 如何你的DispatcherServlet拦截 *.do这样的URL,就不存在访问不到静态资源的问题. 如果你的DispatcherServlet拦截“/”,拦截了所有的请求,同时对*.js,*.jpg的访问也就被拦截了. <!-- Processes application requests --> <s

【转载】SpringMVC访问静态资源

在SpringMVC中常用的就是Controller与View.但是我们常常会需要访问静态资源,如html,js,css,image等. 默认的访问的URL都会被DispatcherServlet所拦截,但是我们希望静态资源可以直接访问.该肿么办呢? 在配置文件:web.xml可以看到: <!-- Processes application requests --> <servlet> <servlet-name>appServlet</servlet-name&

SpringMVC访问静态资源

转自:SpringMVC访问静态资源 在SpringMVC中常用的就是Controller与View.但是我们常常会需要访问静态资源,如html,js,css,image等. 默认的访问的URL都会被DispatcherServlet所拦截,但是我们希望静态资源可以直接访问.该肿么办呢? 在配置文件:web.xml可以看到: <!-- Processes application requests --> <servlet> <servlet-name>appServle

Spring中拦截/和拦截/*的区别 - 不能访问到返回的JSP - 访问静态资源(jpg,js等)

一.我们都知道在基于Spring的Application中,需要在web.xml中增加下面类似的配置信息: Xml代码   <listener> <listener-class> org.springframework.web.context.ContextLoaderListener </listener-class> </listener> <!--   Spring MVC Servlet --> <servlet> <s

tomcat配置虚拟路径,供用户访问静态资源

tomcat配置虚拟路径,供用户访问静态资源 在实际开发中,后台需要提供给用户访问静态资源,而且该静态资源不是在tomcat中,即不是在web目录下,那么用户是不能访问的,这时,需要配置tomcat服务器的虚拟路径.可以这样理解这个虚拟路径,就是相当于把该路径映射成一个web工程,这样这些静态资源就相当于在web路径下了,用户也就可以访问了. 简单的配置如下:tomcat安装目录/conf/server.xml      在最后面可以看到Host标签,在该标签中增加一个Context标签如下即可

idea中JSP页面不能访问静态资源(图片,js,css)

必须配置SpringMvc对访问静态资源的支持,idea默认就是在main/webapp 下的文件路径,要在web-info同级的resource文件下放置,JSP中 ${pageContext.request.contextPath}的添加 <mvc:default-servlet-handler/>的作用 优雅REST风格的资源URL不希望带 .html 或 .do 等后缀.由于早期的Spring MVC不能很好地处理静态资源,所以在web.xml中配置DispatcherServlet的

用node.js express设置路径后 子路径下的页面访问静态资源路径出问题

在routes/news_mian.js 设置了访问news_main.html 的路径 '/',通知设置一个访问news-page.html的子路径'/newspage'子路径.但是在访问loaclhost:3000/news/newspage时静态资源路径前多了一个/news导致不能找到静态资源 app.js var express=require('express'); var app=express(); var path=require('path'); var http=requir