【django项目--创建菜单界面】

来源：伴沃教育

一、整理项目结构

将在生成的urls.py,还有系统的models.py,views.py,替换成文件夹，额外生成static文件夹。防止后期文件太长不好维护

cd ~/acapp/xxx
rm rm urls.py
rm models.py 
rm views.py
mkdir urls
mkdir views
mkdir models
mkdir static

附项目系统设计

附项目文件结构

~/acapp/game$ touch urls/__init__.py
~/acapp/game$ touch models/__init__.py
~/acapp/game$ touch views/__init__.py

接着将在~/acapp/acapp/urls的对应行注释

二、修改全局配置

1.设置时区

在访问网站时发现时间和本地时间不一致

~/acapp/acapp$ vim settings.py

找到TIME_ZONE，将引号内容改为中国境内

2.将自己的app加到settings里面

在settings.py里找到INSTALLED_APPS写成下图这样

3.设置静态文件

仍然是在settings.py里操作

(1)配置static的image模块

lrh:~/acapp/game$ cd static/
lrh:~/acapp/game/static$ ls
lrh:~/acapp/game/static$ mkdir css js image
lrh:~/acapp/game/static$ cd image/
lrh:~/acapp/game/static/image$ mkdir menu playground settings
lrh:~/acapp/game/static/image$ ls

lrh:~/acapp/game/static/image/menu$ wget --output-document=background.gif https://cdn.acwing.com/media/article/image/2023/03/17/1_067a3e9cc4-background.gif

lrh:~/acapp/game/static/image/menu$ ls
background.gif

然后打开网站的/static/image/menu/background.gif即可查看图片

(2)配置static的css模块

通常一个项目只需要一个css

~/acapp/game/static/css$ vim game.css

(3)配置static的js模块

~/acapp/game/static/js$ mkdir dist src//dist文件夹存储最终生成的js文件，src存储开发者操作的js文件

为了便于后来将src文件夹的js文件整合到dist文件夹里，可以编写一个shell脚本进行打包操作

~/acapp$ mkdir scripts/
~/acapp$ cd scripts/
~/acapp/scripts$ vim compress_game_js.sh

编写如下脚本:

记得加上可执行权限并运行

chmod +x compress_game_js.sh//添加可执行权限
./compress_game_js.sh//运行

4.配置html结构

~/acapp/game$ cd templates/
~/acapp/game/templates$ mkdir menu playground settings multiends
~/acapp/game/templates$ cd multiends/
~/acapp/game/templates/multiends$ vim web.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>

这里用了 Django 语法糖 {% load static %} 、 {% static ‘css/game.css’ %} 、 {% static ‘js/dist/game.js’ %} 加载静态文件
未来的界面都是在 js 中 AcGame 渲染的（这样就在前端渲染，不给服务器压力）

5.初始化js

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

因为是拿 shell 根据字典序打包的js文件，所以为了把 zbase.js 放在最后便在base.js 前面加个z
配置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() {
    }
}

6.写views

~/acapp/game/views$ mkdir menu playground settings
~/acapp/game/views$ touch menu/__init__.py playground/__init__.py settings/__init__.pyf
~/acapp/game/views$ vim index.py//创建一个文件存储总的函数

配置index.py文件

from django.shortcuts import render


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

7.写urls

~/acapp/game/urls$ mkdir menu playground settings
~/acapp/game/urls$ touch playground/__init__.py settings/__init__.py menu/__init__.py
~/acapp/game/urls$ vim index.py

配置index.py文件

为了将 menu.index 、 playground.index 与 settings.index 引入，我们需要在相应模块创建 index.py 。
都是这个样子：

from django.urls import path, include


urlpatterns = [
]

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

接着修改全局urls(acapp/acapp/urls.py)

三、js渲染函数

……前端知识太多了，跟不上，先去看看前端了

因篇幅问题不能全部显示，请点此查看更多更全内容

查看全文