Question

我有这些JS文件在使用WAMP Server的本地主机服务器上运行得很好。但是，当我将这些文件放入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。

[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

由于状态代码为200，我认为game.js已加载但由于某些原因，game.js中的代码未执行。当我试图在index.html中放入一些简单的javascript代码时，它运行得很好。但是当我加载game.js时它只是没有做任何事情。

有什么想法吗？谢谢你们！

Answer 1

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

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

中使用

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

1 个答案: