• Django: 2. 创建菜单界面

    更好的阅读体验 \color{red}{更好的阅读体验} 更好的阅读体验

    文章目录

    2.1 项目设计

    2.1.1 项目系统设计

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

    对于复杂的界面设计，我们在每个界面下递归细分功能模块，直到实现最基本的功能模块。模块化设计便于项目创建、更新和维护。

    project/  #项目系统设计
|-- menu  #菜单界面
|-- playground  #游戏界面
|   |-- maps  #地图
|   |-- players  #人物
|   |   |-- atcions  #人物动作
|   |   |-- movements  #人物移动
|   |   `-- talents  #人物属性
|   `-- time  #时间
`-- settings  #设置界面

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10

    2.1.2 项目文件结构

    对于一个 Django 项目，有如下框架：

    django_project/  
|-- django_project  #整个Django项目的配置
|   |-- __init__.py  #初始化文件
|   |-- __pycache__
|   |   |-- __init__.cpython-38.pyc
|   |   `-- settings.cpython-38.pyc
|   |-- asgi.py  #异步通信服务启动文件
|   |-- settings.py  #项目的全局配置文件
|   |-- urls.py  #项目的全局路由设置
|   `-- wsgi.py  #web网关服务启动文件
|-- manage.py  #命令行工具
`-- project  #子应用
    |-- __init__.py
    |-- admin.py
    |-- apps.py
    |-- consumers  #管理 websocket 函数
    |-- migrations
    |   `-- __init__.py
    |-- models  #管理数据库数据
    |-- static  #管理静态文件
    |   |-- audio  #声音
    |   |-- css  #对象格式
    |   |-- image  #图片
    |   `-- js  #对象逻辑（脚本）
    |-- templates  #管理html
    |-- tests.py
    |-- urls  #管理路由
    `-- views  #管理http函数

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28

    我们在 python 中调用 import urls.xxx 时，需要索引文件 __init__.py。为了便于维护 urls.py、views.py、models.py，我们将其转为文件夹的方式存储，并在这三个文件夹目录下都添加 __init__.py 文件。

    对于 templates，urls，views 等的文件夹，最好都建立文件夹menu，playground，settings 文件夹，用于细分模块设计。

    对于 css 一般不需要细分。

    对于 js 需要分为 dist 和 src 两个文件，dist 是最终打包好的 .js 文件，src 用于存储开发时的各种模块化的 .js 文件供。

    我们可以在 acappp/ 下创建一个文件夹 scripts，用来存储各种脚本，将 src 打包为 dist，创建打包 src 的脚本 compress_game_js.sh 如下

    #!/bin/bash

JS_PATH=~/workspace/ac_app/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

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7

    记得加上可执行权限：

    chmod +x compress_game_js.sh

    • 1

    2.1.3 项目全局配置

    添加子应用：

    打开/game/apps.py，找到 class GameConfig，然后在全局的 settings.py里找到INSTALLED_APPS，在里面加入 ：

    'game.apps.GameConfig',

    • 1

    以便将创建的 game 加入进去。

    静态文件地址设置：

    打开 settings.py，找到 STATIC_URL = '/static/' ，在该条目上方加入：

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

    • 1
    • 2

    此外按照上述方式再加入：

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

    • 1
    • 2
    • 一般来说，static存开发的文件，media存用户的文件。

    同时要记得import os，os.path()是将路径合并在一起。通过该操作可以使我们的静态文件会放到这个目录下。

    import os
from pathlib import Path  

    • 1
    • 2

    2. 2 菜单界面结构创建

    2.2.1 html 文件结构

    首先进入 /game/templates/，创建三个文件夹 menu，playground，settings 文件夹，便于模块化设计。为了支持多种终端上运行，再创建一个文件夹 multiends 存储 html 文件。

    先实现网页端，创建 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>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25

    js 在客户端渲染，而 views 和 urls 在后端处理，由此实现前后端分离，能够减轻服务器的压力，并能适应多终端的开发需求。

    2.2.2 js 对象文件结构

    在 html 文件的 内的