Django上课笔记——菜单模块的实现
Posted 卷王2048
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Django上课笔记——菜单模块的实现相关的知识，希望对你有一定的参考价值。
Django上课笔记(二)——菜单模块的实现
自动创建项目的脚本
在完成这次作业时，会感觉项目结构过于复杂，过程繁琐
所以，我写了一个脚本，一键创建项目结构
脚本1.0
这个版本帮大家完成了整个项目所有文件和文件夹的创建，以及所有配置过程，下载图片过程！
大家只需要在家目录下执行该脚本，就会新建一个acgame项目
脚本内容：
#! /bin/bash
#-----------------------------创建app----------------------
django-admin startproject acgame
cd acgame || exit
python3 manage.py startapp game
python3 manage.py migrate
#-----------------------------------------------------------
#----------------------创建项目结构---------------------------
echo "
**/__pycache__
*.swp
" >.gitignore
rm game/views.py game/models.py
mkdir game/static game/static/css game/static/image/ game/static/js game/static/image/menu game/static/js/dist game/static/js/src/ game/static/js/src/menu game/static/js/src/playground
touch game/static/css/game.css game/static/js/dist/game.js game/static/js/src/zbase.js game/static/js/src/menu/zbase.js game/static/js/src/playground/zbase.js
mkdir game/templates game/templates/multiends
touch game/templates/multiends/web.html
mkdir game/urls game/urls/menu game/urls/playground game/urls/settings
touch game/urls/__init__.py game/urls/index.py game/urls/menu/__init__.py game/urls/menu/index.py game/urls/playground/__init__.py game/urls/playground/index.py game/urls/settings/__init__.py game/urls/settings/index.py
mkdir game/models
touch game/models/__init__.py game/views/__init__.py
mkdir game/views game/views/menu game/views/playground game/views/settings
touch game/views/__init__.py game/views/index.py game/views/menu/__init__.py game/views/playground/__init__.py game/views/settings/__init__.py
mkdir ~/acgame/scripts
cd || exit
#-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
#--------------------------------------------------------修改配置文件------------------------------------------
#修改时区
sed -i 's|UTC|Asia/Shanghai|g' acgame/acgame/settings.py
#将game的config加到整个acgame的config中
sed -i '33a\\ '\\'game.apps.GameConfig\\'',' acgame/acgame/settings.py
#配置static path
#下面用到了os.path.join
sed -i '13a\\import os' acgame/acgame/settings.py
#os.join的作用，将两个路径合并
#静态文件地址，存开发者文件
sed -i '121a\\STATIC_ROOT = os.path.join(BASE_DIR, '\\'static\\'')' acgame/acgame/settings.py
#sed -i '122a\\STATIC_URL = '\\'\\/static\\/\\''' acgame/acgame/settings.py
#静态文件地址，存用户文件
sed -i '124a\\MEDIA_ROOT = os.path.join(BASE_DIR, '\\'media\\'')' acgame/acgame/settings.py
sed -i '125a\\MEDIA_URL = '\\'\\/media\\/\\''' acgame/acgame/settings.py
#-------------------------------------------------------------------------------------------------------
#下载图片
cd acgame/game/static/image/menu || exit
wget --output-document=background.gif https://gimg2.baidu.com/image_search/src=http%3A%2F%2Finews.gtimg.com%2Fnewsapp_match%2F0%2F11156556256%2F0.jpg&refer=http%3A%2F%2Finews.gtimg.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg
cd || exit
#------写入脚本-------
echo "#! /bin/bash
JS_PATH=~/acgame/game/static/js/
JS_PATH_DIST=\\${JS_PATH}dist/
JS_PATH_SRC=\\${JS_PATH}src/
#将JS_PATH_SRC 中的所有js文件中的内容，写入到JS_PATH_DIST下的game.js中
find \\$JS_PATH_SRC -type f -name '*.js' | sort | xargs cat > \\${JS_PATH_DIST}game.js
" > acgame/scripts/compress_game_js.sh
#----------------------------------------------以上是项目结构----------------------------------------------
脚本2.0：
一些同学课比较多，没有时间写作业。
这里也提供了一个一键完成作业的脚本，不仅实现了1.0的功能，还把代码都写好了！！
#! /bin/bash
#-----------------------------创建app----------------------
django-admin startproject acgame
cd acgame || exit
python3 manage.py startapp game
python3 manage.py migrate
#-----------------------------------------------------------
#----------------------创建项目结构---------------------------
echo "
**/__pycache__
*.swp
" >.gitignore
rm game/views.py game/models.py
mkdir game/static game/static/css game/static/image/ game/static/js game/static/image/menu game/static/js/dist game/static/js/src/ game/static/js/src/menu game/static/js/src/playground
touch game/static/css/game.css game/static/js/dist/game.js game/static/js/src/zbase.js game/static/js/src/menu/zbase.js game/static/js/src/playground/zbase.js
mkdir game/templates game/templates/multiends
touch game/templates/multiends/web.html
mkdir game/urls game/urls/menu game/urls/playground game/urls/settings
touch game/urls/__init__.py game/urls/index.py game/urls/menu/__init__.py game/urls/menu/index.py game/urls/playground/__init__.py game/urls/playground/index.py game/urls/settings/__init__.py game/urls/settings/index.py
mkdir game/models
touch game/models/__init__.py game/views/__init__.py
mkdir game/views game/views/menu game/views/playground game/views/settings
touch game/views/__init__.py game/views/index.py game/views/menu/__init__.py game/views/playground/__init__.py game/views/settings/__init__.py
mkdir ~/acgame/scripts
cd || exit
#-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
#--------------------------------------------------------修改配置文件------------------------------------------
#修改时区
sed -i 's|UTC|Asia/Shanghai|g' acgame/acgame/settings.py
#将game的config加到整个acgame的config中
sed -i '33a\\ '\\'game.apps.GameConfig\\'',' acgame/acgame/settings.py
#配置static path
#下面用到了os.path.join
sed -i '13a\\import os' acgame/acgame/settings.py
#os.join的作用，将两个路径合并
#静态文件地址，存开发者文件
sed -i '121a\\STATIC_ROOT = os.path.join(BASE_DIR, '\\'static\\'')' acgame/acgame/settings.py
#sed -i '122a\\STATIC_URL = '\\'\\/static\\/\\''' acgame/acgame/settings.py
#静态文件地址，存用户文件
sed -i '124a\\MEDIA_ROOT = os.path.join(BASE_DIR, '\\'media\\'')' acgame/acgame/settings.py
sed -i '125a\\MEDIA_URL = '\\'\\/media\\/\\''' acgame/acgame/settings.py
#-------------------------------------------------------------------------------------------------------
#下载图片
cd acgame/game/static/image/menu || exit
wget --output-document=background.gif https://gimg2.baidu.com/image_search/src=http%3A%2F%2Finews.gtimg.com%2Fnewsapp_match%2F0%2F11156556256%2F0.jpg&refer=http%3A%2F%2Finews.gtimg.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg
cd || exit
#------写入脚本-------
echo "#! /bin/bash
JS_PATH=~/acgame/game/static/js/
JS_PATH_DIST=\\${JS_PATH}dist/
JS_PATH_SRC=\\${JS_PATH}src/
#将JS_PATH_SRC 中的所有js文件中的内容，写入到JS_PATH_DIST下的game.js中
find \\$JS_PATH_SRC -type f -name '*.js' | sort | xargs cat > \\${JS_PATH_DIST}game.js
" > acgame/scripts/compress_game_js.sh
#----------------------------------------------以上是项目结构--------------------------------------------------
#写入web.html中的内容
#用cat命令写入，只有$ 需要转译
cat>~/acgame/game/templates/multiends/web.html<<EOF
{% 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>
EOF
#写入~/acgame/game/views/index.py内容
cat>~/acgame/game/views/index.py<<EOF
from django.shortcuts import render
def index(request):
return render(request, "multiends/web.html")
EOF
#写入game/urls/,子文件中所有的`index.py`
cat>~/acgame/game/urls/menu/index.py<<EOF
from django.urls import path
urlpatterns = [
]
EOF
cat>~/acgame/game/urls/playground/index.py<<EOF
from django.urls import path
urlpatterns = [
]
EOF
cat>~/acgame/game/urls/settings/index.py<<EOF
from django.urls import path
urlpatterns = [
]
EOF
#编写`game/urls`下的`index.py`.将所有该路径下的`url`，`include`进来
cat>~/acgame/game/urls/index.py<<EOF
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")),
]
EOF
#将game的总url加入到项目的总url
#替换某一行
sed -i '17s/.*/from django.urls import path,include/' ~/acgame/acgame/urls.py
#在某一行后追加一行
sed -i '19a\\ path("",include("game.urls.index")),' ~/acgame/acgame/urls.py
#实现`game/static/js/src`下的`zbase.js`
cat>~/acgame/game/static/js/src/zbase.js<<EOF
class AcGame {
constructor(id) {
this.id = id;
this.\\$ac_game = \\$('#' + id);
this.menu = new AcGameMenu(this);
this.playground = new AcGamePlayground(this);
this.start();
}
start() {
}
}
EOF
#实现`game/static/js/src/menu`下的`zbase.js`(未实现)
cat>~/acgame/game/static/js/src/menu/zbase.js<<EOF
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() {
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();
}
}
EOF
#编写`game/static/css`下的`game.css`
cat>~/acgame/game/static/css/game.css<<EOF
.ac-game-menu {
width: 100%;
height: 100%;
background-image: url("/static/image/menu/background.gif");
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;
}
EOF
cat>~/acgame/game/static/js/src/playground/zbase.js<<EOF
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();
}
}
EOF
chmod +x ~/acgame/scripts/compress_game_js.sh
bash ~/acgame/scripts/compress_game_js.sh
两个脚本都需要在执行后，手动添加ALLOWED_HOSTS
和自己把项目上传到远程git
结果展示：
脚本3.0
1.实现了自动帮用户添加ALLOWED_HOSTS
2.实现了本地git的维护
3.自动将项目跑在服务器8000端口
效果：执行一下脚本，就能在浏览器上看到项目
#! /bin/bash
#-----------------------------创建app----------------------
django-admin startproject acgame
cd acgame || exit
python3 manage.py startapp game
python3 manage.py migrate
#-----------------------------------------------------------
#----------------------创建项目结构---------------------------
echo "
**/__pycache__
*.swp
" >.gitignore
rm game/views.py game/models.py
mkdir game/static game/static/css game/static/image/ game/static/js game/static/image/menu game/static/js/dist game/static/js/src/ game/static/js/src/menu game/static/js/src/playground
touch game/static/css/game.css game/static/js/dist/game.js game/static/js/src/zbase.js game/static/js/src/menu/zbase.js game/static/js/src/playground/zbase.js
mkdir game/templates game/templates/multiends
touch game/templates/multiends/web.html
mkdir game/urls game/urls/menu game/urls/playground game/urls/settings
touch game/urls/__init__.py game/urls/index.py game/urls/menu/__init__.py game/urls/menu/index.py game/urls/playground/__init__.py game/urls/playground/index.py game/urls/settings/__init__.py game/urls/settings/index.py
mkdir game/models
touch game/models/__init__.py game/views/__init__.py
mkdir game/views game/views/menu game/views/playground game/views/settings
touch game/views/__init__.py game/views/index.py game/views/menu/__init__.py game/views/playground/__init__.py game/views/settings/__init__.py
mkdir ~/acgame/scripts
cd || exit
#-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
#--------------------------------------------------------修改配置文件------------------------------------------
echo "请输入您的公网ip(请一次输对)："
read YOUHOST
sed -i '29s/.*/ALLOWED_HOSTS = ['\\'$YOUHOST\\'']/' ~/acgame/acgame/settings.py
#修改时区
sed -i 's|UTC|Asia/Shanghai|g' acgame/acgame/settings.py
#将game的config加到整个acgame的config中
sed -i '33a\\ '\\'game.apps.GameConfig\\'',' acgame/acgame/settings.py
#配置static path
#下面用到了os.path.join
sed -i '13a\\import os' acgame/acgame/settings.py
#os.join的作用，将两个路径合并
#静态文件地址，存开发者文件
sed -i '121a\\STATIC_ROOT = os.path.join(BASE_DIR, '\\'static\\'')' acgame/acgame/settings.py
#sed -i '122a\\STATIC_URL = '\\'\\/static\\/\\''' acgame/acgame/settings.py
#静态文件地址，存用户文件
sed -i '124a\\MEDIA_ROOT = os.path.join(BASE_DIR, '\\'media\\'')' acgame/acgame/settings.py
sed -i '125a\\MEDIA_URL = '\\'\\/media\\/\\''' acgame/acgame/settings.py
#-------------------------------------------------------------------------------------------------------
#下载图片
cd acgame/game/static/image/menu || exit
wget --output-document=background.gif https://gimg2.baidu.com/image_search/src=http%3A%2F%2Finews.gtimg.com%2Fnewsapp_match%2F0%2F11156556256%2F0.jpg&refer=http%3A%2F%2Finews.gtimg.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg
cd || exit
#------写入脚本-------
echo "#! /bin/bash
JS_PATH=~/acgame/game/static/js/
JS_PATH_DIST=\\${JS_PATH}dist/
JS_PATH_SRC=\\${JS_PATH}src/
#将JS_PATH_SRC 中的所有js文件中的内容，写入到JS_PATH_DIST下的game.js中
find \\$JS_PATH_SRC -type f -name '*.js' | sort | xargs cat > \\${JS_PATH_DIST}game.js
" > acgame/scripts/compress_game_js.sh
#----------------------------------------------以上是项目结构--------------------------------------------------
#写入web.html中的内容
#用cat命令写入，只有$ 需要转译
cat>~/acgame/game/templates/multiends/web.html<<EOF
{% 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>
EOF
#写入~/acgame/game/views/index.py内容
cat>~/acgame/game/views/index.py<<EOF
from django.shortcuts import render
def index(request):
return render(request, "multiends/web.html")
EOF
#写入game/urls/,子文件中所有的`index.py`
cat>~/acgame/game/urls/menu/index.py<<EOF
from django.urls import path
urlpatterns = [
]
EOF
cat>~/acgame/game/urls/playground/index.py<<EOF
from django.urls import path
urlpatterns = [
]
EOF
cat>~/acgame/game/urls/settings/index.py<<EOF
from django.urls import path
urlpatterns = [
]
EOF
#编写`game/urls`下的`index.py`.将所有该路径下的`url`，`include`进来
cat>~/acgame/game/urls/index.py<<EOF
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")),
]
EOF
#将game的总url加入到项目的总url
#替换某一行
sed -i '17s/.*/from django.urls import path,include/' ~/acgame/acgame/urls.py
#在某一行后追加一行
sed -i '19a\\ path("",include("game.urls.index")),' ~/acgame/acgame/urls.py
#实现`game/static/js/src`下的`zbase.js`
cat>~/acgame/game/static/js/src/zbase.js<<EOF
class AcGame {
constructor(id) {
this.id = id;
this.\\$ac_game = \\$('#' + id);
this.menu = new AcGameMenu(this);
this.playground = new AcGamePlayground(this);
this.start();
}
start() {
}
}
EOF
#实现`game/static/js/src/menu`下的`zbase.js`(未实现)
cat>~/acgame/game/static/js/src/menu/zbase.js<<EOF
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() {
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();
}
}
EOF
#编写`game/static/css`下的`game.css`
cat>~/acgame/game/static/css/game.css<<EOF
.ac-game-menu {
width: 100%;
height: 100%;
background-image: url("/static/image/menu/background.gif");
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;
}
EOF
cat>~/acgame/game/static/js/src/playground/zbase.js<<EOF
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();
}
}
EOF
chmod +x ~/acgame/scripts/compress_game_js.sh
bash ~/acgame/scripts/compress_game_js.sh
cd ~/acgame || exit
git init
git add .
git commit -m "create acgame"
cd || exit
python3 ~/acgame/manage.py runserver 0.0.0.0:8000
结果展示：
项目的文件结构
项目系统设计
- menu：菜单页面
- playground：游戏界面
- settings：设置界面
项目文件结构
-
templates目录：管理html文件
-
urls目录：管理路由，即链接与函数的对应关系
views目录：管理http函数 -
models目录：管理数据库数据
-
static目录：管理静态文件，比如：
-
css：对象的格式，比如位置、长宽、颜色、背景、字体大小等
-
js：对象的逻辑，比如对象的创建与销毁、事件函数、移动、变色等
image：图片 -
audio：声音
-
consumers目录：管理websocket函数
完整项目结构
.
├── acgame
│ ├── __init__.py
│ ├── asgi.py
│ ├── settings.py
│ ├── urls.py
│ └── wsgi.py
├── db.sqlite3
├── game
│ ├── __init__.py
│ ├── __pycache__
│ ├── admin.py
│ ├── apps.py
│ ├── migrations
│ │ ├── __init__.py
│ ├── models
│ │ ├── __init__.py
│ ├── static
│ │ ├── css
│ │ │ └── game.css
│ │ ├── image
│ │ │ └── menu
│ │ │ └── background.gif
│ │ └── js
│ │ ├── dist
│ │ │ └── game.js
│ │ └── src
│ │ ├── menu
│ │ │ └── zbase.js
│ │ ├── playground
│ │ │ └── zbase.js
│ │ └── zbase.js
│ ├── templates
│ │ └── multiends
│ │ └── web.html
│ ├── tests.py
│ ├── urls
│ │ ├── __init__.py
│ │ ├── index.py
│ │ ├── menu
│ │ │ ├── __init__.py
│ │ │ └── index.py
│ │ ├── playground
│ │ │ ├── __init__.py
│ │ │ └── index.py
│ │ └── settings
│ │ ├── __init__.py
│ │ └── index.py
│ └── views
│ ├── __init__.py
│ ├── index.py
│ ├── menu
│ │ └── __init__.py
│ ├── playground
│ │ └── __init__.py
│ └── settings
│ └── __init__.py
├── manage.py
├── scripts
│ └── compress_game_js.sh
课堂进度
1.创建对应文件
2.在每个python文件夹下创建__init__.py
3.修改默认时区配置
4.修改static path配置
5.在acgame/scripts下编写合并 game/static/js/src下所有js文件的脚本acgame/scripts/compress_game_js.sh
6.编写web端总htmlgame/templates/multiends下的web.html
7.更改game/static/js/src下的zbase.js
8.编写game/views/index.py
9.编写game/urls下的index.py.并编写子文件中所有的index.py,将所有该路径下的url，include进来,再将game/views/index.pyinclude进来(因为views/index.py是游戏界面)
10.更改全局的urls，即acgame/urls.py
11.实现game/static/js/src下的zbase.js
.
12.实现game/static/js/src/menu下的zbase.js
13.编写game/static/css下的game.css
14.最后记得执行合并js的脚本
─ settings
│ │ ├── init.py
│ │ └── index.py
│ └── views
│ ├── init.py
│ ├── index.py
│ ├── menu
│ │ └── init.py
│ ├── playground
│ │ └── init.py
│ └── settings
│ └── init.py
├── manage.py
├── scripts
│ └── compress_game_js.sh
## 课堂进度
1.创建对应文件
2.在每个`python`文件夹下创建`__init__.py`
3.修改默认时区配置
4.修改`static path`配置
5.在`acgame/scripts`下编写合并 `game/static/js/src`下所有js文件的脚本`acgame/scripts/compress_game_js.sh`
6.编写web端总html`game/templates/multiends`下的`web.html`
7.更改`game/static/js/src`下的`zbase.js`
8.编写`game/views/index.py`
9.编写`game/urls`下的`index.py`.并编写子文件中所有的`index.py`,将所有该路径下的`url`，`include`进来,再将`game/views/index.py`include进来(因为`views/index.py`是游戏界面)
10.更改全局的urls，即`acgame/urls.py`
11.实现`game/static/js/src`下的`zbase.js`
.
12.实现`game/static/js/src/menu`下的`zbase.js`
13.编写`game/static/css`下的`game.css`
14.最后记得执行合并js的脚本
以上是关于Django上课笔记——菜单模块的实现的主要内容，如果未能解决你的问题，请参考以下文章