使用Node.js登录后不能调用JS和图像文件
Can not call JS and image files after login using Node.js
我有一个问题，在我的应用程序已经使用node .js.我有一个登录页面，当用户登录并重定向到下一页的java脚本和图像文件不能调用。我在下面解释我的代码文件。
用户登录后的文件如下:
video.html:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Video</title>
<style>
.btn {
display: inline-block;
padding: 6px 12px;
margin-bottom: 0;
font-size: 14px;
font-weight: normal;
line-height: 1.42857143;
text-align: center;
white-space: nowrap;
vertical-align: middle;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
background-image: none;
border: 1px solid transparent;
border-radius: 4px;
padding: 10px 16px;
}
.btn-lg {
font-size: 18px;
line-height: 1.33;
border-radius: 6px;
}
.btn-primary {
color: #fff;
background-color: #428bca;
border-color: #357ebd;
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active,
.open .dropdown-toggle.btn-primary {
color: #fff;
background-color: #3276b1;
border-color: #285e8e;
}
/***********************
GRADIENT BUTTONS
************************/
.btn-primary.gradient {
background: -moz-linear-gradient(top, #33a6cc 50%, #0099cc 50%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(50%,#33a6cc), color-stop(50%,#0099cc)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #33a6cc 50%,#0099cc 50%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #33a6cc 50%,#0099cc 50%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #33a6cc 50%,#0099cc 50%); /* IE10+ */
background: linear-gradient(to bottom, #33a6cc 50%,#0099cc 50%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#33a6cc', endColorstr='#0099cc',GradientType=0 ); /* IE6-9 */
}
.btn-primary.gradient:hover, .btn-primary.gradient:focus, .btn-primary.gradient:active, .btn-primary.gradient.active, .open > .dropdown-toggle.btn-primary {
background: -moz-linear-gradient(top, #66b2cc 50%, #33a6cc 50%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(50%,#66b2cc), color-stop(50%,#33a6cc)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #66b2cc 50%,#33a6cc 50%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #66b2cc 50%,#33a6cc 50%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #66b2cc 50%,#33a6cc 50%); /* IE10+ */
background: linear-gradient(to bottom, #66b2cc 50%,#33a6cc 50%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#66b2cc', endColorstr='#33a6cc',GradientType=0 ); /* IE6-9 */
}
.btn-primary.gradient:active, .btn-primary.gradient.active {
background: -moz-linear-gradient(top, #267c99 50%, #007299 50%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(50%,#267c99), color-stop(50%,#007299)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #267c99 50%,#007299 50%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #267c99 50%,#007299 50%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #267c99 50%,#007299 50%); /* IE10+ */
background: linear-gradient(to bottom, #267c99 50%,#007299 50%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#267c99', endColorstr='#007299',GradientType=0 ); /* IE6-9 */
}
/***********************
CUSTON BTN VALUES
************************/
.btn {
padding: 14px 24px;
border: 0 none;
font-weight: 700;
letter-spacing: 1px;
text-transform: uppercase;
}
.btn:focus, .btn:active:focus, .btn.active:focus {
outline: 0 none;
}
.btn-primary {
background: #0099cc;
color: #ffffff;
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active, .btn-primary.active, .open > .dropdown-toggle.btn-primary {
background: #33a6cc;
}
.btn-primary:active, .btn-primary.active {
background: #007299;
box-shadow: none;
}
</style>
</head>
<body>
<h1>Video broadcasting</h1>
<video style="width:640px;height:360px;" poster="image/video-poster-frame.jpg" id="video">
<source src="video/mov_bbb.mp4" type='video/mp4;codecs="avc1.42E01E, mp4a.40.2"' />
<source src="devstories.webm" type='video/webm;codecs="vp8, vorbis"' />
</video>
<button type="button" class="btn btn-primary btn-lg gradient" id="play_btn" style="display:none">Play/Pause</button>
<textarea id="id_url" rows="1" cols="2"></textarea>
<script src="js/jquery-2.1.4.min.js" type="text/javascript"></script>
<script src="js/socket.io.js" type="text/javascript"></script>
<script src="js/app.js" type="text/javascript"></script>
<script>
window.onload=function(){
if(getQuery('usertype')){
$('#play_btn').css('display','block');
}
videoBroadCasting(getQuery('id'));
}
function getQuery(key){
var temp = location.search.match(new RegExp(key + "=(.*?)($|'&)", "i"));
if(!temp) return;
return temp[1];
}
</script>
</body>
</html>
我的服务器文件如下。
server.js:
var port=8888;
var express=require('express');
var morgan = require('morgan');
var http=require('http');
var bodyParser= require('body-parser');
var methodOverride = require('method-override');
var mongo = require('mongojs');
var database='Oditek';
var collections=['video'];
var app= express();
var server=http.createServer(app);
var io=require('socket.io')(server);
var db = mongo.connect("127.0.0.1:27017/"+database, collections);
app.use(express.static(__dirname + '/public')); // set the static files location /public/img will be /img for users
app.use(morgan('dev')); // log every request to the console
app.use(bodyParser.urlencoded({ extended: false })) // parse application/x-www-form-urlencoded
app.use(bodyParser.json()) // parse application/json
app.use(methodOverride()); // simulate DELETE and PUT
db.on('ready', function () {
console.log('database connected')
});
app.get('/',function(req,res){
res.sendfile('view/login.html');
});
app.post('/login',function(req,res){
var username=req.body.username;
var password=req.body.userpassword;
if(username && password){
db.video.findOne({
username:username,
password:password
},function(err,doc){
if(doc){
console.log('login',doc);
res.send(doc);
}
if(err){
console.log('login12',err);
res.send("could not login");
}
});
}
});
app.get('/video',function(req,res){
res.sendfile('view/video.html');
});
server.listen(port);
console.log('server is listening on the port'+port);
我所有的Javascript和图像文件都在公共文件夹内。我在维护下面的文件结构:
public->js->all .js files.public->image->all images.public->css->all .css files.
请帮我解决这个问题
替换下面的行
<script src="js/jquery-2.1.4.min.js" type="text/javascript"></script> with
<script src="/js/jquery-2.1.4.min.js" type="text/javascript"></script>
第二个脚本链接解决了这个问题。
相关文章：
- 更改标记.js图像/链接表达式
- 在safari和chrome中，js图像加载产生了奇怪的结果
- 节点 js 流星 js 图像文件上传图像损坏
- 使用像素检测后无法拖动Kinetic.JS图像
- Ajax/Js图像上传器:创建重复的预览图像
- 加载一个js图像
- 平滑幻灯片.js图像预加载
- Js 图像滑块，中间垂直对齐
- 如何将文本框弹出窗口(Jquery 工具提示或类似工具）添加到画布中的 Fabric JS 图像
- 将图像上传到节点.js图像“未定义
- 自定义 JS 图像查看器在每次按下“下一步”键后加载速度较慢
- 三.js图像纹理调整大小消息
- JS图像转换不起作用
- 关于为Raphaë添加淡入淡出效果的问题;l.js图像元素
- Fabric.js图像上的圆形边界框
- 鼠标点击JS图像替换
- JS图像上传失败OSX Localhost
- 搜索js图像裁剪插件，无需jquery
- Angular JS图像数组编码麻烦
- JS:图像翻转
