开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> Python知识库 -> Django框架（二）创建菜单页面 -> 正文阅读

[Python知识库]Django框架（二）创建菜单页面

Django框架（二）创建菜单页面

1.整体设计

项目系统设计

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

项目文件结构

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

HTML,CSS,JS的关系：

HTML 定义了网页的内容
CSS 描述了网页的布局
JavaScript 控制了网页的行为

2.创建项目基本文件夹

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文件夹下创建)

3.配置settings.py

在acapp/setting.py中修改时区

TIME_ZONE = 'Asia/Shanghai'

将app.py的GameConfig函数加入到setting.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/'

4.配置项目架构

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

cd static
mkdir css js image

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

此时可以通过http://123.56.20.9:8000/static/image/menu/background.jpg来访问下载在本地的背景图片了

创建css文件夹与js文件夹：

cd css
vim game.css

cd js
mkdir dist src  最终生成(使用)的js文件 js原文件(开发者操作的js文件)

回到acapp目录下
mkdir 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 加权限

5.配置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库，所以需要在标签中加入以下语句：

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

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接口来实现，所以跳转后想要返回只能通过刷新网页来实现

6.配置js

进入static/js，以相同的逻辑建立两个文件夹，src用于存放所有的js文件，dist用于存放执行打包脚本后，生成的整合后的js文件

src中仍然是按照menu,playground,settings建立三个文件夹

cd ~acapp/game/static/js/src 
mkdir menu playground settings
vim zbase.js 

./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() {
    }
}

constructor为构造函数

7.配置views

cd ~/acapp/game/views
mkdir menu playground settings

touch __int__.py (三个文件夹都进行创建)

vim index.py    在views下创建(只在web端被调用)

index.py：用于返回html文件
render是指渲染html文件

from django.shortcuts import render

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

8.配置urls

在urls文件夹下仍然进行创建三个menu,playground,settings子文件夹的操作，并在urls文件夹下编写总的index.py用于include其他文件夹下的urls

cd ~/acapp/game/urls
mkdir menu playground settings

touch __int__.py (三个文件夹都进行创建)

vim index.py 在urls下创建(include 其它文件夹的内容)

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")),
]

为了将 menu.index 、 playground.index 与 settings.index 引入，我们需要在相应模块创建 index.py
menu,playground,settings中的index.py:

from django.urls import path


urlpatterns = [
]

urls文件夹结构：
在这里插入图片描述
之后需要修改全局的urls

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

到此为止，前期配置准备工作完成。

9.编写菜单页面

9.1 配置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);  //创建菜单对象，调用其构造函数

    }

}

进入static/js/src/menu，写menu的js，vim zbase.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;
}

在这里插入图片描述
遇到这种情况在代码没问题的情况下，是需要刷新浏览器缓存，即可成功显示页面：ctrl+F5或者ctrl+shift+r

此时页面已经可以成功显示背景图片了
在这里插入图片描述

9.2 添加按钮

进入static/js/src/menu，编写 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: white;
    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: 10px;
    letter-spacing: 0.5vw;
    cursor: pointer;
}

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

效果：
在这里插入图片描述

9.3添加按钮动作

进入static/js/src/menu，编写 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');

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

进入static/js/src，更改总的js,添加playground

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

        this.start();
    }

    start() {
    }
}