时间:2021-05-26
直接打开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);// 修改模板文件的后缀名为htmlapp.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 foldervar serve = serveStatic('public', {'index': ['index.html', 'index.htm']})// Create servervar server = http.createServer(function onRequest (req, res) { serve(req, res, finalhandler(req, res))})// Listenserver.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 ,就能找到对应的说明了。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
Web的后台语言。客户端、Web服务器、应用服务器三种同时存在,客户端发出请求,Web服务器接收请求,如果是html、css静态资源的话,Web服务器可以自行处
本地数据库连接服务器数据库报1045,如何解决?这个意思是说:用户“root”@本地主机的访问被拒绝解决方案:1.找到MySQL安装路径下的my.ini文件,用
有时候需要访问服务器上的一些静态资源,比如挂载其他设备上的图片到本地的目录,而本地的目录不在nginx根目录下,这个时候就需要简单的做一下目录映射来解决,比如想
1跨域的理解跨域是指:浏览器A从服务器B获取的静态资源,包括Html、Css、Js,然后在Js中通过Ajax访问C服务器的静态资源或请求。即:浏览器A从B服务器
如何解决阿里云ECSWindows服务器C盘权限被删除导致无法访问登录服务器后发现C盘没有权限访问,遇到此问题需要给C盘添加权限。如下图所示:右键单击C盘--属