项目地址:https://git.acwing.com/DrinkWater/django_lesson/
网页地址:http://47.120.35.99:8000/
3. 创建菜单界面
项目系统设计
- menu:菜单页面
- playground:游戏界面
- settings:设置界面
项目文件结构
-
templates目录:管理html文件
-
urls目录:管理路由,即链接与函数的对应关系
-
views目录:管理http函数
-
models目录:管理数据库数据
-
static目录:管理静态文件,比如:
-
css:对象的格式,比如位置、长宽、颜色、背景、字体大小等
js:对象的逻辑,比如对象的创建与销毁、事件函数、移动、变色等
image:图片
audio:声音
…
- consumers目录:管理websocket函数
本节课用到的素材地址
-
下载方式:wget –output-document=自定义图片名称 图片地址
-
jquery库:
```html
[HTML_REMOVED]
[HTML_REMOVED][HTML_REMOVED]
```
将项目分解成一个一个可以实现的模块来做
分四个屏幕
步骤
进入acapp/game/,删除urls.py views.py models.py文件,建立相关目录mkdir urls views models,mkdir static
记得要注释掉上节课game/urls.py文件中的path("", include("game.urls"))
不然后面会报错
进入urls, models, views等目录创建__init__.py
索引文件便于import
进入acapp/acapp/settings.py
-
修改时区:修改
TIME_ZONE = 'Asia/Shanghai'
-
将创建的game/apps.py里面的config添加到
INSTALLED_APPS
里面:'game.apps.GameConfig'
-
设置静态地址:
import os
,翻到最下面写如下代码
STATIC_ROOT = os.path.join(BASE_DIR, 'static')
STATIC_URL = '/static/'
MEDIA_ROOT = os.path.join(BASE_DIR, 'media')
MEDIA_URL = '/media/'
在acapp/game/static下创建css, js,images三个文件夹
在game每个目录下都要创建项目系统设计中所有模块的目录方便管理
进入imgaes目录,mkdir menu playground settings ,cd menu/,下载图片到该目录下:wget --output-document=background.gif https://cdn.acwing.com/media/article/image/2023/03/17/1_067a3e9cc4-background.gif
删除掉附带的log文件
之后可以用公网IP:8000/static/image/menu/background.gif
来访问图片
进入css目录(一般一个就够了css):vim game.css
进入js目录:mkdir dist src,dist里面放最终使用的js文件,src放所有的js文件
在acapp/目录下创建scripts目录,放所有脚本,比如放一个把src的js文件压缩成一个js文件放入dist目录中,vim compress_game_js.sh
文件内容如下:
#! /bin/bash
JS_PATH=/home/django/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
,运行一下,dist目录下多一个game.js表示没问题
上传至云端:
git status
vim .gitignore
#里面写:`**/__pycache__`
git status
git add .
git status
git commit -m "create project structure"
git push
创建html文件
进入templates目录mkdir menu playground settings
,支持多终端:mkdir multiends
,进入/multiends/创建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_123"></div>
<script>
$(document).ready(function(){
let ac_game = new AcGame("ac_game_123");
})
</script>
</body>
在/static/js/src/目录下mkdir menu playground settings
,vim zbase.js
(z开头保证在所有dir后面,用来存放所有的class)
//zhase.js
class AcGame {
constructor(id) {
}
}
每次修改js文件一定要执行一下compress_game_js.sh打包文件
开始写views文件
进入/game/views/,mkdir menu playground settings
,分别进入每个文件夹touch __init__.py
,vim index.py
,(index.py只会在web端被调用,用来访问上述写的HTML文件【就是拼接字符串】)
from django.shortcuts import render
def index(request):
return render(request, "multiends/web.html")
开始写路由,进入/game/urls/文件夹
mkdir menu playground settings
,分别进入每个文件夹touch __init__.py
,vim index.py
,(index.py将当前路径下所有目录的路径include进来,可以仿照/acapp/acapp/urls.py
来写)
from django.urls import path,include
urlpatterns = []
分别进入menu playground settings
文件夹创建index.py文件,内容如下:
from django.urls import path
urlpatterns = []
回到/game/urls/文件夹vim index.py
,因为views/中的index.py是渲染首页的总函数,所以也可以丢进来,刷新后首页就是我们上面写的html了
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修改为:
urlpatterns = [
path("", include('game.urls.index'))
path("admin/", admin.site.urls),
]
上传一下云端:
git status
git add .
git status
git add ../acapp/urls.py
git commit -m "write html views js urls"
git push
urls访问结构:首先到acapp/acapp下的全局urls.py开始根据我们的网址进行匹配,如果是”“,就进入game.urls.index
game文件夹下的urls文件夹下的index.py文件,里面有urlpatterns,如果是”“,就执行game.views.index
文件夹下的index函数渲染web.html页面,如果是”menu/”,game.urls.menu.index
就进入game文件夹下的urls文件夹menu文件夹下的index.py继续查找路由
开始创建菜单界面:
每一个结构/模块都是一个class
在/static/js/src/menu/目录下vim zbase.js
class AcGameMenu {
constructor(root){//root 是ac_game这个对象
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>
`);//jquery中html对象+$,普通对象不加$
this.root.$ac_game.append(this.$menu);//将$menu写的div加入到html中的最外面的div(id=ac_game_123)里面
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() {
this.add_listening_events();
}
add_listening_events() {
let outer = this;
this.$single_mode.click(function(){
console.log("this is singlemod");
});
this.$multi_mode.click(function(){
console.log("this is multiemod");
});
this.$settings.click(function(){
console.log("this is settings");
});
}
show() {//显示menu界面
this.$menu.show();
}
hide() {//关闭menu界面
this.$menu.hide();
}
}
/static/css/game.css 地址为上级目录的images/menu里面的gif
.ac-game-menu {
width: 100%;
height: 100%;
background-image: url("../images/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 {
height: 7vh;
width: 18vw;
color: white;
font-size: 6vh;
font-style: italic;
padding: 2vh;
cursor: pointer;
text-align: center;
background-color: rgba(39,21,29,0.6);
border-radius: 10px;
letter-spacing: 0.5vw;
}
.ac-game-menu-field-item:hover {
transform: scale(1.2);
transition: 100ms;
}
/static/js/src/下的zbase.js
//zhase.js
class AcGame {
constructor(id) {
this.id = id;
this.$ac_game = $('#' + id);//将html页面中的div赋给ac_game属性
this.menu = new AcGameMenu(this);
}
}
创建游戏界面:
/js/src/playground/
,vim zbase.js
//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();
}
}
进入AcGame类:/static/js/src/下的zbase.js
//zhase.js
class AcGame {
constructor(id) {
this.id = id;
this.$ac_game = $('#' + id);//将html页面中的div赋给ac_game属性
this.menu = new AcGameMenu(this);
this.playground = new AcGamePlayground(this);
this.start();
}
start() {
}
}
实现菜单页面点击的具体逻辑:
class AcGameMenu {
constructor(root){//root 是ac_game这个对象
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>
`);//jquery中html对象+$,普通对象不加$
this.root.$ac_game.append(this.$menu);//将$menu写的div加入到html中的最外面的div(id=ac_game_123)里面
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() {
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(){
outer.hide();//关掉菜单页面
outer.root.playground.show();//显示游戏界面
});
this.$settings.click(function(){
outer.hide();//关掉菜单页面
outer.root.playground.show();//显示游戏界面
});
}
show() {//显示menu界面
this.$menu.show();
}
hide() {//关闭menu界面
this.$menu.hide();
}
}
上传云端:
git status
git add .
git status
git commit -m "write menu and playground scene"
git push
遇到的问题
问题:修改完urls相关文件后报错没有game.url这个包,但是urls.py代码中的url路径改成urls后还是一直报这个错并且没有后台刷新
解决方案:Ctrl+z关掉后台重启。
问题:全部完成后点击单人模式/多人模式/设置都没反应
解决方案:发现是前面find
类标签的时候忘了加.
this.$single_mode = this.$menu.find('.ac-game-menu-field-item-single-mode');