Django: External JS using framework doesn't load

问题

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 template

{% 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>

And this is game.js (using Phaser.io framework)

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;
    };

When I load the page:

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.

[15/Feb/2016 14:19:26] "GET /game/ HTTP/1.1" 200 883

[15/Feb/2016 14:19:27] "GET /static/game/js/game.js HTTP/1.1" 200 3439

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!

回答1:

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.

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

来源：https://stackoverflow.com/questions/35419442/django-external-js-using-framework-doesnt-load

标签

javascript

python

django

phaser-framework

django-staticfiles