django第二节课

作者： 作者的头像   冷冷月光 ,  2022-07-26 01:11:12 ,  所有人可见 ,  阅读 179

0


整个代码流程梳理

首先根据IP地址访问 8.142.97.22:8000

首先进入 acapp/urls.py文件中

urlpatterns = [
     path('',include('game.urls.index')),
    path('admin/', admin.site.urls),
]

因为后面无字符，符合第一个条件因而进入./game/urls/index.py中

urlpatterns = [
    path("", index, name="index"),
    path("menu/", include("game.urls.menu.index")),
    path("playground/", include("game.urls.playground.index")),
    path("settings/", include("game.urls.settings.index")),
]

因为后面仍然没有字符，所以调用index函数

from game.views.index import index

调用的是 game/views/index函数

def index(request):
    return render(request, "multiends/web.html")

因为接受了request，所以渲染出一个web.html返回

{% load static %} //预先引入，因为后面要用到static关键字

<head>
    <link rel="stylesheet" href="https://cdn.acwing.com/static/jquery-ui-dist/jquery-ui.min.css">
    <script src="https://cdn.acwing.com/static/jquery/js/jquery-3.3.1.min.js"></script>
    <link rel="stylesheet" href="{% static 'css/game.css' %}"> //这边是
    <script src="{% static 'js/dist/game.js' %}"></script>
</head>

这边的都为jquery里的动态渲染

game.js包含

class AcGameMenu 
class AcGamePlayground
class AcGame
其中AcGame是靠id初始化的，也就是浏览器传入的id

<body style="margin: 0">
    <div id="ac_game_12345678"></div>
    <script>
        $(document).ready(function(){
            let ac_game =new AcGame("ac_game_12345678");
        });
    </script>
</body>

这边即开始调用ac_game_12345678

然后生成AcGame类对象

class AcGame {
    constructor(id) {
        this.id = id;
        this.$ac_game = $('#' + id);
        this.menu = new AcGameMenu(this);
        this.playground = new AcGamePlayground(this);
        this.start();
    }
    start() {
    }
}

在构造函数中，首先生成menu对象，然后生成AcAcGamePlayground对象

class AcGameMenu {
    constructor(root) {
        this.root = root;
        this.$menu = $(`
<div class="ac-game-menu">
    <div class="ac-game-menu-field">
        <div class="ac-game-menu-field-item ac-game-menu-field-item-single-mode">
            单人模式
        </div>
        <br>
        <div class="ac-game-menu-field-item ac-game-menu-field-item-multi-mode">
            多人模式
        </div>
        <br>
        <div class="ac-game-menu-field-item ac-game-menu-field-item-settings">
            设置
        </div>
    </div>
</div>
`);
        this.root.$ac_game.append(this.$menu);
        this.$single_mode = this.$menu.find('.ac-game-menu-field-item-single-mode');
        this.$multi_mode = this.$menu.find('.ac-game-menu-field-item-multi-mode');
        this.$settings = this.$menu.find('.ac-game-menu-field-item-settings');

        this.start();
    }

    start() {
        this.add_listening_events();
    }

    add_listening_events() {
        let outer = this;
        this.$single_mode.click(function(){
            outer.hide();
            outer.root.playground.show();
        });
        this.$multi_mode.click(function(){
            console.log("click multi mode");
        });
        this.$settings.click(function(){
            console.log("click settings");
        });
    }

    show() {  // 显示menu界面
        this.$menu.show();
    }

    hide() {  // 关闭menu界面
        this.$menu.hide();
    }
}

class AcGamePlayground {
    constructor(root) {
        this.root = root;
        this.$playground = $(`<div>游戏界面</div>`);

        this.hide();
        this.root.$ac_game.append(this.$playground);

        this.start();
    }

    start() {
    }

    show() {  // 打开playground界面
        this.$playground.show();
    }

    hide() {  // 关闭playground界面
        this.$playground.hide();
    }
}

其中 playground对象刚一加载出来是隐藏掉的，其后我们调用menu对象的时候，我们可以hide()它，再打开playground对象

0 评论

1024
x