Django：使用框架的外部 JS 不加载答案

【问题标题】：Django: External JS using framework doesn't loadDjango：使用框架的外部 JS 不加载
【发布时间】：2016-02-15 21:29:53
【问题描述】：

我有这些使用 WAMP 服务器在本地主机服务器上运行良好的 JS 文件。但是，当我将这些文件放入 Django 中的模板时，什么都没有加载。

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。

[2016 年 2 月 15 日 14:19:26]“GET /game/HTTP/1.1”200 883

[2016 年 2 月 15 日 14:19:27]“GET /static/game/js/game.js HTTP/1.1”200 3439

由于状态码是 200，我认为 game.js 已加载，但由于某些原因，game.js 中的代码没有执行。当我尝试在 index.html 中放置一些简单的 javascript 代码时，它运行得很好。但是当我加载 game.js 时，它什么也没做。

有什么想法吗？谢谢大家！

【问题讨论】：

当您在浏览器中打开 javascript 控制台时，您是否看到任何错误？
preload 和 create 函数应该由 Phaser 自动调用，还是必须自己调用？
伙计们，我想通了。我忘了包括 Phaser 库。另一个问题是，现在它运行了，但它没有加载资产（ship.png 和 bullet.png）并说它找不到。我应该把这些资产放在哪里？
您可能需要指定图片的完整 url 路径，即 /static/game/asset/ship.png 或您存储它的任何位置。
@JohnGordon 太棒了！！有用！！非常感谢

标签： javascript python django phaser-framework django-staticfiles

【解决方案1】：

https://docs.djangoproject.com/en/1.9/howto/static-files/ 如果您想在模板中使用 {% static %}，请确保您已正确设置 Django 以提供静态文件，例如您没有在 settings.py 中禁用调试 (DEBUG=False)。另一种方法是通过 nginx 为它们提供服务，或者将 --insecure 添加到 manage.py 选项。

要在 javascript 文件中使用 {% static %}，请参阅：Django {% static 'path' %} in javascript file 因为它只能在 .html 模板文件中使用，而不能在 .js 中使用

【讨论】：