Django-Day2-创建菜单界面

历史记录

清除记录

猜你想搜

AcWing热点
App
登录/注册

Django-Day2-创建菜单界面

作者：

Corgi_Cc , 2024-08-15 10:41:42 , 所有人可见 , 阅读 3

Day2 菜单界面

项目文件结构

templates目录：管理html文件
static目录：管理静态文件，比如：css,js,image,audio…
urls目录：管理路由，即链接与函数的对应关系
views目录：管理http函数
models目录：管理数据库数据
consumers目录：管理websocket函数
其中urls,views,models需要创建_init_.py

配置全局setting

1.创建的game下的apps.py需要手动加入配置文件。(数据库需要)
在全局settings里的INSTALLED_APPS添加 'game.apps.GameConfig'

#pycharm中不需要
2.配置静态文件路径：首先导入 import os，然后在最后加入
    STATIC_ROOT = os.path.join(BASE_DIR,'static')
    MEDIA_ROOT = os.path.join(BASE_DIR,'media')
    MEDIA_URL = '/media/'

js文件夹

1.创建dist和src文件夹
2.创建zbash.js
创建AcGame类

class AcGame {
    constructor(id) {

    }
}

3.将src目录下的资源整合到dist
来到根目录，创建目录：mkdir scripts
vim compress_game_js.sh

#!/bin/bash

JS_PATH="../game/static/js/"
JS_PATH_DIST="${JS_PATH}dist/"
JS_PATH_SRC="${JS_PATH}src/"

# 确保目标目录存在
mkdir -p "${JS_PATH_DIST}"

# 查找所有 .js 文件并合并
find "${JS_PATH_SRC}" -type f -name '*.js' | sort | xargs cat > "${JS_PATH_DIST}game.js"

打开gitbash
3.添加权限 chmod +x compress_game_js.sh
4.执行脚本 ./compress_game_js.sh

templates

创建web.html文件

{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="icon" href="{% static 'image/icon.svg' %}">
    <title>web端</title>
    <script src="https://code.jquery.com/jquery-3.7.1.js"></script>
    <link rel="stylesheet" href="{% static 'css/game.css' %}">
    <script src="{% static 'js/dist/game.js' %}"></script>
</head>
<body>
    <div id="ac_game_12345678"></div>
    <script>
        $(document).ready(function (){
            let ac_game = new AcGame();
            console.log("成功了..")
        });
    </script>
</body>
</html>

views

1.创建index.py

from django.shortcuts import render


def index(request):
    return render(request, 'multiends/web.html')
# 第一个参数一定是request， 后面从templates后开始写

urls

1.创建模块的index.py 如menu，playground，settings

from django.urls import path

urlpatterns = [

]

2.创建index.py，并配置路由

from django.urls import path, include
from game.views.index import index

# path从game开始写
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'))
]

3.修改全局urls

from django.contrib import admin
from django.urls import path, include

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

填充背景

1.web.html调用AcGame构造函数

class AcGame {
    constructor(id) {
        this.id = id;
        this.$ac_game = $('#' + id); 获取div的id
        this.menu = new AcGameMenu(this);
    }
}

2.调用AcGameMenu构造函数

class AcGameMenu {
    constructor(root) {
        this.root = root; #root是父元素
        this.$menu = $(`
            <div class="ac-game-menu"></div>
        `);
        #在父div下添加类名为ac-game-menu的div
        this.root.$ac_game.append(this.$menu); 
    }
}

3.设置.ac-game-menu的css
注意: 要设置html,body的高度，因为父元素高度为0，子元素的height无论设置成多少，也一定是0

html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}

#ac_game_12345678 {
    height: 100vh;
}

.ac-game-menu {
    width: 100%;
    height: 100%;
    background-image: url("../image/menu/background.gif");
    background-repeat: no-repeat;
    background-size: 100%, 100%;
}

菜单按钮

1.在AcGameMenu的ac-game-menu下创建div

 <div class="ac-game-menu">
        <div class="ac-game-menu-field">
            <div class="ac-game-menu-field-item ac-game-menu-field-item-single">
                单人模式    
            </div>
            <br>
            <div class="ac-game-menu-field-item ac-game-menu-field-item-multi">
                多人模式    
            </div>
            <br>
            <div class="ac-game-menu-field-item ac-game-menu-field-item-settings">
                设置    
            </div>

        </div>
</div>

2.通过find查找类

this.root.$ac_game.append(this.$menu);
this.$single =this.$menu.find('.ac-game-menu-field-item-single');
this.$multi =this.$menu.find('.ac-game-menu-field-item-multi');
this.$settings = this.$menu.find('.ac-game-menu-field-item-settings');

3.修改css

.ac-game-menu-field {
    width: 20vw;
    position: relative;
    top: 40vh;
    left: 19vw;
}

.ac-game-menu-field-item {
    height: 7vh;
    width: 18vw;
    color: white;
    font-size: 6vh;
    font-style: italic;
    padding: 2vh;
    text-align: center;
    background-color: rgba(39, 21, 28, 0.6);
    border-radius: 10px;
    letter-spacing: 0.5vw; #字间距
    cursor: pointer; #小手
}

.ac-game-menu-field-item:hover {
    transform: scale(1.2); #鼠标悬浮变大1.2倍
    transition: 100ms;  #延迟100ms
}

点击按钮

1.在构造函数调用start函数

this.start();

2.在start函数添加click监听事件

start() {
    this.add_listening_events();
}

3.为按钮添加点击事件

add_listening_events(){
#js中,function中的this指的是自己,想用AcGameMenu需要先定义：
        let outer = this; 
        this.$single_mode.click(function () {
            console.log("click single mode");
        });

        this.$multi_mode.click(function (){
            console.log("click multi mode");
        });

        this.$settings.click(function (){
            console.log("click settings");
        });
    }

切换页面

1.在AcGameMenu创建show，hide函数

show(){ //展示this.$menu的div
    this.$menu.show();
}

hide() { //隐藏this.$menu的div
    this.$menu.hide();
}

2.创建AcGamePlayground类，创建构造函数，并隐藏

class AcGamePlayground {
    constructor(root) {
        this.root = root;
        this.$playground = $(`<div>游戏界面</div>`);
        this.hide(); //先隐藏后加入，自然是加了个空
        this.root.$ac_game.append(this.$playground);
    }

    start() {

    }

    show() {  //展示this.$playground的div
        this.$playground.show();
    }

    hide() { //隐藏this.$playground的div
        this.$playground.hide();
    }
}

3.在AcGame创建AcGamePlayground对象

this.playground = new AcGamePlayground(this);

4.当点击时，关闭当前页面展示游戏页面

add_listening_events(){
        let outer = this;
        this.$single_mode.click(function () {
            outer.hide(); //关闭当前页
            //outer.root就是AcGame对象，里面有playground,
            //调用playground.show()方法，展示this.$playground的div
            outer.root.playground.show(); //outer.root
        });

0 评论

App 内打开