Django:使用框架的外部JS无法加载 [英] Django: External JS using framework doesn't load
问题描述
我有这些JS文件，它们可以在使用WAMP Server的本地主机服务器上正常运行.但是，当我将这些文件放入Django中的模板时，则不会加载任何内容.
I have these JS files that runs just fine on local host server using WAMP Server. However when I put these files into my templates in Django then nothing loads.
index.html模板
{% load staticfiles %}
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Phaser - Making your first game, part 1</title>
<script type="text/javascript" src="{% static 'game/js/game.js' %}"></script>
</head>
<body>
这是game.js(使用Phaser.io框架)
var game = new Phaser.Game(1000, 800, Phaser.AUTO, '', { preload: preload, create: create, update: update });
function preload() {
game.load.image('e','asset/ship.png');
game.load.image('b','asset/bullet.png');
game.input.keyboard.addKeyCapture([Phaser.Keyboard.SPACEBAR]);
}
var eSprite;
var bullet;
var cursors;
var key;
function create() {
eSprite = game.add.sprite(100,100,'e');
bullet = game.add.sprite(100,100,'b');
bullet.visible = false;
// eSprite.scale.setTo(.17,.17);
game.physics.arcade.enable(eSprite);
cursors = game.input.keyboard.createCursorKeys();
// eSprite.body.bounce.y = 0.2;
eSprite.body.gravity.y = 0;
eSprite.body.gravity.x = 0;
eSprite.body.collideWorldBounds = true;
eSprite.anchor.setTo(0.5, 0.5);
// key = game.input.keyboard.addkey(Phaser.Keyboard.spacebar);
// key.onDown.fire();
// add(this.shipBullet.fire,this.bullet);
}
var xGlidePos = 0;
var xGlideNeg = 0;
var yGlidePos = 0;
var yGlideNeg = 0;
function update() {
if (cursors.left.isDown)
{
if(!cursors.up.isDown&&!cursors.down.isDown)
{
eSprite.angle = 45;
}
xGlidePos = 0;
// Move to the left
eSprite.body.velocity.x = -70-xGlideNeg;
xGlideNeg+=20;
}
else if (cursors.right.isDown)
{
if(!cursors.up.isDown&&!cursors.down.isDown)
{
eSprite.angle = 225;
}
xGlideNeg = 0;
// Move to the right
eSprite.body.velocity.x = 70+xGlidePos;
xGlidePos+=20;
}
else
{
xGlidePos = 0;
xGlideNeg = 0;
eSprite.body.velocity.x = 0;
}
if(cursors.up.isDown)
{
if(!cursors.left.isDown&&!cursors.right.isDown)
{
eSprite.angle = 135;
}
yGlidePos = 0;
eSprite.body.velocity.y=-70-yGlideNeg;
yGlideNeg+=20;
}
else if(cursors.down.isDown)
{
if(!cursors.left.isDown&&!cursors.right.isDown)
{
eSprite.angle = -45;
}
yGlideNeg = 0;
eSprite.body.velocity.y=70+yGlidePos;
yGlidePos+=20;
}
else
{
eSprite.body.velocity.y = 0;
yGlidePos = 0;
yGlideNeg = 0;
}
if(cursors.up.isDown&&cursors.right.isDown)
{
eSprite.angle = 180;
}
else if(cursors.right.isDown&&cursors.down.isDown)
{
eSprite.angle = 270;
}
else if(cursors.down.isDown&&cursors.left.isDown)
{
eSprite.angle = 0;
}
else if(cursors.left.isDown&&cursors.up.isDown)
{
eSprite.angle = 90;
}
}
function shipBullet(shipAngle, shipLocation)
{
this.angle = shipAngle;
this.shipLocation = shipLocation;
}
shipBullet.prototype.fire = function()
{
this.visible = true;
};
当我加载页面时:
系统检查未发现问题(0静音).2016年2月15日-14:19:21 Django版本1.9.2，使用设置"static_test.settings"在 http://127.0.0.1:8000/中启动开发服务器退出服务器使用CTRL-BREAK.
System check identified no issues (0 silenced). February 15, 2016 - 14:19:21 Django version 1.9.2, using settings 'static_test.settings' Starting development server at http://127.0.0.1:8000/ Quit the server with CTRL-BREAK.
[2016年2月15日14:19:26]200883
[15/Feb/2016 14:19:26] "GET /game/ HTTP/1.1" 200 883
[15/Feb/2016 14:19:27]获取/static/game/js/game.js HTTP/1.1"200 3439
[15/Feb/2016 14:19:27] "GET /static/game/js/game.js HTTP/1.1" 200 3439
由于状态代码为200，所以我认为game.js已加载，但由于某些原因，game.js中的代码未执行.当我尝试在index.html中放入一些简单的javascript代码时，它运行得很好.但是当我加载game.js时，它什么也没做.
Since the status code is 200, I think game.js is loaded but for some reasons the code in game.js didn't execute. When I tried to put some simple javascript code in index.html, it runs just fine. But when I loaded game.js it just doesn't do anything.
有什么想法吗?谢谢大家！
Any ideas? Thank guys!
推荐答案
https://docs.djangoproject.com/zh-CN/1.9/howto/static-files/如果要在模板中使用 {％static％} ，请确保已正确设置Django以提供静态文件，例如，您没有禁用调试功能( DEBUG = False )在 settings.py 中.另一种方法是例如通过nginx为它们提供服务，或者在 manage.py 选项中添加-insecure .
https://docs.djangoproject.com/en/1.9/howto/static-files/
If you want to use {% static %} in template, make sure you've setup Django correctly to serve static files, ex you don't have disabled debug (DEBUG=False) in settings.py. The other way is to serve them through nginx for example or adding --insecure to manage.py options.
要在JavaScript文件中使用 {％static％} ，请参考:
To use {% static %} in javascript file refer to: Django {% static 'path' %} in javascript file
since it can only be used within .html template files and not .js
这篇关于Django:使用框架的外部JS无法加载的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
