django_创建菜单界面

于 2022-07-24 16:18:23 发布
阅读量905 收藏
点赞数
文章标签： django python 后端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/weixin_52465909/article/details/125943565
版权

文章目录

创建菜单界面

项目系统设计

menu：菜单页面
playground：游戏界面
settings：设置界面

项目文件结构

templates目录：管理html文件
urls目录：管理路由，即链接与函数的对应关系
views目录：管理http函数
models目录：管理数据库数据
static目录：管理静态文件，比如：
css：对象的格式，比如位置、长宽、颜色、背景、字体大小等
js：对象的逻辑，比如对象的创建与销毁、事件函数、移动、变色等
image：图片
audio：声音
…
consumers目录：管理websocket函数

素材地址

背景图片
下载方式：wget --output-document=自定义图片名称 图片地址
jquery库：

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

创建文件项目

rm urls.py views.py models.py 删除文件，以便创建文件夹
mkdir tempaltes 管理目录
mkdir urls 存储链接
mkdir views 管理函数
mkdir models 管理数据库
mkdir static 管理静态文件

每个文件夹下都要创建__init__.py 文件

touch __int__.py  创建索引文件防止无法import(目前仅在 urls views models文件夹下创建)

配置settings.py

acapp/settings.py 中修改时区 108行

TIME_ZONE = 'Asia/Shanghai'

在这里插入图片描述
在apps.py的GameConfig函数加入到settings.py中

INSTALLED_APPS = [
    'game.apps.GameConfig',
    ]

指定静态文件最终的存储路径(一般static存储开发者，media存储用户)

STATIC_ROOT = os.path.join(BASE_DIR, 'static')
STATIC_URL = '/static/'

MEDIA_ROOT = os.path.join(BASE_DIR, 'media')
MEDIA_URL = '/media/'

配置项目架构

在static文件夹中创建css,js,image文件夹。
其中image文件夹用于存放菜单，游戏界面，设置的背景图片，使用wget命令下载背景图片：

cd static
mkdir css js image

cd image
mkdir menu playground settings 菜单 背景 设置(在大部分文件夹都进行创建以便项目修改)
cd menu
wget --output-document=自定义图片名称 图片地址

在这里插入图片描述
可以通过 http://8.130.51.245:8000/static/image/menu/image1.jpeg 访问

创建css文件js文件

cd css
touch game.css
cd js
mkdir dist src

在acapp里创建scripts文件夹,
vim compress_game_js.sh 创建一个整合的脚本
该脚本用于将src的js文件整合为一个文件存放在dist文件夹

#! /bin/bash

JS_PATH=/home/acs/acapp/game/static/js/
JS_PATH_DIST=${JS_PATH}dist/
JS_PATH_SRC=${JS_PATH}src/

find $JS_PATH_SRC -type f -name '*.js' | sort | xargs cat > ${JS_PATH_DIST}game.js

添加权限

chmod +x compress_game_js.sh

配置tempaltes管理html

在tempaltes中创建menu，palyground，settngs。multiends四个文件夹，在multiends中编写web.html

mkdir menu playground settings
mkdir multiends 
cd multiends 
vim web.html

在 templates下创建 web.html，因为用到了jQuery库，所以需要在 标签中加入以下语句：
web.html

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

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

未来的界面都是在 js 中 AcGame 渲染的（这样就在前端渲染，不给服务器压力）

然后就可以使用$()对标签的id，class进行选择并进行各种逻辑的实现
由于是前后端分离，我们只需要在html中编写一小段 js代码，把用户的 id传入，并创建对应的 AcGame类，在 AcGame类中再加入 AcGameMenu和 AcGamePlayground，利用 append函数实现，页面跳转直接通过调用 show()和 hide()的 api接口来实现，所以跳转后想要返回只能通过刷新网页来实现

配置js

在js/src内创建 menu playground settings 三个文件夹

./compress_game_js.sh (进行一次打包)

zbase.js

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

        this.start();
    }

    start() {
    }
}

配置views

在views文件夹内创建menu playground settings 三个文件夹，并在每个文件夹内创建__init__.py
index.py：用于返回html文件
render是指渲染html文件

from django.shortcuts import render
def index(request):
    return render(request, "multiends/web.html")

配置urls

同上配置3个文件夹并写__init__.py
在urls下创建index.py用于include其他文件夹下的urls
index.py

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


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.py

from django.urls import path
urlpatterns = [
]

在这里插入图片描述
还需修改全局urls

cd ~/acapp/acapp 修改全局的urls.py
vim urls.py
修改为 path('', include('game.urls.index')),

编辑菜单界面

配置menu的js

此时根据页面源码，是先创建了一个AcGame对象，然后我们需要在AcGame对象的构造函数中创建AcGameMenu对象，之后再到AcGmesMenu对象的构造函数中去实现页面的内容。

进入static/js/src，写总的js，vim zbase.js：

class AcGame {
    constructor(id) {
        this.id = id;
        this.$ac_game = $('#' + id);   //将对象的id赋给ac_game
        this.menu = new AcGameMenu(this);  //创建菜单对象，调用其构造函数
    }
}

menu的js文件

class AcGameMenu{
    constructor(root){   //构造函数，传入acgame对象
        this.root=root;
        this.$menu=$(`
<div class="ac-game-menu">
</div>
`);
        this.root.$ac_game.append(this.$menu);
         
    }
}

game.css

.ac-game-menu {
    width: 100%;
    height: 100%;
    background-image: url("/static/image/menu/background.jpg");
    background-size: 100% 100%;
    user-select: none;
}

在这里插入图片描述
显示背景图

添加按钮

进入static/js/src/menu vim zbase.js

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

更新game.css

.ac-game-menu {
    width: 100%;
    height: 100%;
    background-image: url("/static/image/menu/background.jpg");
    background-size: 100% 100%;
    user-select: none;
}

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

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

.ac-game-menu-field-item:hover {    /*悬浮效果*/
    transform: scale(1.2);
    transition: 100ms;
}

添加按钮

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函数
    }

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

在static/js/src/playground 编写zbase.js:

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

在scr/zbase.js 内添加playground

class AcGame {
    constructor(id) {
        this.id = id;
        this.$ac_game = $('#' + id);
        this.menu = new AcGameMenu(this);
        this.playground = new AcGamePlayground(this);
		//console.log("create ac game");
        this.start();
    }

    start() {
    }
}

在这里插入图片描述
单人模式如下：
在这里插入图片描述

评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值