如何做百度推广网站,广州哪里有做公司网站 什么价,网页制作公司印章,做网站一般用什么语言文章目录 前言代码仓库地址在线演示网址启动网站的时候出现错误渲染路径的一些说明文件结构网页显示一条错误路由顺序js打包出现问题的代码函数没有起作用关于进度开发细节显示不了图片梳理一下函数调用的流程修改一些宽度参数classjs 里面的一些细节让三个按钮可以点击设置按钮… 文章目录 前言代码仓库地址在线演示网址启动网站的时候出现错误渲染路径的一些说明文件结构网页显示一条错误路由顺序js打包出现问题的代码函数没有起作用关于进度开发细节显示不了图片梳理一下函数调用的流程修改一些宽度参数classjs 里面的一些细节让三个按钮可以点击设置按钮的样式在前端实现页面的切换结语 前言
为了赶进度没有写什么记录文档其实也快不了多少反而不写记录文档做的过程中遇到的一些问题自己解决之后以后回顾的时候容易忘记所以记录其实算是一个非常好的习惯进度重要扎实也比较重要
代码仓库地址
代码仓库
欢迎大家多多 star
在线演示网址
网址
目前是这个网址但是这个服务器是笔者租的服务器三个月之后就会到期到时候笔者可能需要把 docker 里面的文件打包传到新的服务器上面或者是继续租现在免费体验的这个服务器之后再更新
启动网站的时候出现错误
笔者输入这条命令试图启动网站昨天晚上其实就已经成功启动网站了只是今天改了点儿东西就启动不了了 python3 manage.py runserver 0.0.0.0:8000 昨天晚上算是实现了一些简单的网页展示还有跳转的按钮今天做的修改是把一些路由改了 URL 代表着是统一资源定位符Uniform Resource Locator。URL 无非就是一个给定的独特资源在 Web 上的地址。理论上说每个有效的 URL 都指向一个唯一的资源。这个资源可以是一个 HTML 页面一个 CSS 文档一幅图像等等。而在实际中也有一些例外最常见的情况就是一个 URL 指向了不存在的或是被移动过的资源。由于通过 URL 呈现的资源和 URL 本身由 Web 服务器处理因此 web 服务器的拥有者需要认真地维护资源以及与它关联的 URL SyntaxError: closing parenthesis ‘]’ does not match opening parenthesis ‘(’ on line 8 上面出现的这个问题是语法错误应该是敲代码的时候敲错了
index文件少写了一个小括号加上之后成功启动了网站 能够在终端看到这个访问记录
渲染 简单的解释前端写好html模板让后端直接填数据这就是后端渲染。 前端渲染是通过ajax请求接口返回的数据将数据渲染出来。 后端只写接口分工更明细 在软件开发中渲染通常指的是将数据或者某种描述转换为用户界面的可视化输出的过程 按照笔者的理解就是把代码或者字符串输出为图片文字等让没有学过计算机的用户能够简单直接的使用这个软件或者说是系统
该项目是前后端分离的项目前端渲染的好处就是可以降低服务器的压力
路径的一些说明
from django.urls import path,include
from game.views.index import indexurlpatterns[path(,index,nameindex),path(menu/,include(game.urls.menu.index)),path(playground/,include(game.urls.playground.index)),path(settings/,include(game.urls.settings.index),
]上面的代码是整个项目的 index 文件中括号里第一行是返回项目网址的链接因为什么都没加是一个空值我们查看现在的网站的源码如下
这个还不算是整个项目的 index 文件这个是 urls 里面的 index 文件按照笔者的理解这些 index 文件主要作用是提供一些可以跳转的路径因为逻辑的改变可以跳转到不同的页面 可以发现上面的代码和这个代码是一模一样的
{% load static %}
headlink relstylesheet hrefhttps://cdn.acwing.com/static/jquery-ui-dist/jquery-ui.min.cssscript srchttps://cdn.acwing.com/static/jquery/js/jquery-3.3.1.min.js/scriptlink relstylesheet href% static css/game.css %script src{% static js/dist/game.js %}/script
/headbody stylemargin:0div idac_game_12345678/divscript$(document).ready(function(ac_game_12345678){let ac_gameAcGame();});/script
/body这份代码是 Multiple_front_ends/web.html 表示的是多个前端文件夹下面的 web 前端文件
该项目的定位是一个后端等未来有机会的话希望能实现多个前端比如说网页端应用端小程序端等
文件结构 网页显示一条错误
GET http://39.105.183.81:8000/%%20static%20css/game.css%20% net::ERR_EMPTY_RESPONSE 我找到这个文件去对应的地方修改一下
修改了一下发现是因为文件里面没有什么具体的内容所以报错了没有什么影响
到目前为止就把前期的一些准备工作做好了
后面发现不是因为文件是空的报错而是因为一个语法格式写错了报错的后面有写
路由顺序
首先访问 fight 里面的 fight 文件夹里面的 urls 文件
fight URL ConfigurationThe urlpatterns list routes URLs to views. For more information please see:https://docs.djangoproject.com/en/3.2/topics/http/urls/
Examples:
Function views1. Add an import: from my_app import views2. Add a URL to urlpatterns: path(, views.home, namehome)
Class-based views1. Add an import: from other_app.views import Home2. Add a URL to urlpatterns: path(, Home.as_view(), namehome)
Including another URLconf1. Import the include() function: from django.urls import include, path2. Add a URL to urlpatterns: path(blog/, include(blog.urls))from django.contrib import admin
from django.urls import path,includeurlpatterns [path(,include(game.urls.index)),path(admin/, admin.site.urls),
]跳转到 game.urls.index 文件
from django.urls import path,include
from game.views.index import indexurlpatterns[path(,index,nameindex),path(menu/,include(game.urls.menu.index)),path(playground/,include(game.urls.playground.index)),path(settings/,include(game.urls.settings.index)),
]然后跳转到 views 里面的 index 文件
from django.shortcuts import renderdef index(request):return render(request,Multiple_front_ends/web.html)然后跳转到 Multiple_front_ends/web.html 文件这个文件里面的内容就是目前网页显示的源代码
js
这个文件夹下面有一些文件夹和文件
打包
每一次修改 js 文件之后都需要打包一下这个文件也就是执行一次scripts/compress_game_js.sh 文件
#! /bin/bashJS_PATH/home/acs/fight/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把 src 里面的所有 js 文件打包发送到 dist 的 game.js 文件里面
出现问题的代码 link relstylesheet href% static css/game.css %
这段代码貌似没啥问题
改成了这样就没有错误了 link relstylesheet href{% static css/game.css %}
原来是没有加大括号
函数没有起作用 目前在 zbase.js文件里面的输出没有正常在控制台显示
我们可以看到这个 web.html 显示的是这个输出
{% load static %}
headlink relstylesheet hrefhttps://cdn.acwing.com/static/jquery-ui-dist/jquery-ui.min.cssscript srchttps://cdn.acwing.com/static/jquery/js/jquery-3.3.1.min.js/scriptlink relstylesheet href% static css/game.css %script src{% static js/dist/game.js %}/script
/headbody stylemargin:0div idac_game_12345678/divscript$(document).ready(function(){let ac_gamenew AcGame(ac_game_12345678);});console.log(hello world);/script
/body是正常的是笔者看教程的时候把这个漏掉了应该是因为教程把这个代码里面的 hello world 删除了然后在 zbase.js 文件里面进行修改
删除之后并没有显示我们想要看到的内容我们把这个文件修改打包刷新之后没有像教程一样在控制台输出我们需要的内容
这是为什么呢
检查 game.js 文件发现是这个情况 和 zbase.js文件里面的内容是一样的只是没有显示在控制台
我们认为可能是调用这个函数的时候没有调用成功可能是函数名字没有写对
对比了一下代码都是相同的可能是因为空行的原因吗感觉基本不可能因为空行调用不了函数但还是试试 太离谱了呀我把空行删除之后就能正常显示了可能是因为这个控制台每次只能输出一行数据
关于进度
今天本来想学两个章节但是现在这一个章节都没有学完我今天不把这一个章节学完就不睡觉了之后每天至少学一个章节要把进度推一推
开发细节
因为打包的函数是按照文件名的字典序来打包的所以我们把文件名前面加上一个 z 可以保证这个文件会出现在最后面否则不是在最后面可能出现先调用再定义的问题会报错
显示不了图片
把背景图片加到 css 文件里面但是自己的网页还是空白的
我不知道问题出在哪里准备返回去重新听一遍教程
在 js 文件里面一般对象是 html 对象前面加上 $ 符号不是的话就不加
找到问题所在了有一行语法写的有点问题少了一个等号加上之后就可以正常显示图片了 梳理一下函数调用的流程
首先是主函数就是 web.html 文件然后调用了 zbase.js 的 AcGame 函数这个函数里面调用了 js/menu/zbase.js 文件里面的 AcGameMenu 函数这个函数里面创建了一个 div 存到了最开始的 web.html 里面等于说形成了一个闭环
我们可以查看一下源码
确实在这里创建好了但是确实比较难以找到
修改一些宽度参数
可以看到前面展示的图片不是一个完整的图片有一些别的图片我们把高度宽度都设置成百分之百就可以让图片占据整个屏幕 全屏显示效果更佳
class
因为一些专有名词自己其实记住没有什么意义知道是怎么使用的其实更加实在笔者初中的时候沉迷转魔方但是其实也是只会那个最初阶的魔方公式然后就跟着教程练会了之后自己其实也不知道怎么就能拼好形成了肌肉记忆了都但是要我教会别人我可能得再整理一下思路
class 写在 div 里面目前这个部分写在了 js 文件里面之后需要在 css 文件里面使用 .class_name{} 来调整这个板块的样式
一个 class 里面可以有多个描述的东西比如这样div classac-game-menu-field-item ac-game-menu-field-item-single
js 里面的一些细节
我写的时候一直比较模糊现在梳理一下这个文件里面的一些代码之后担心随着项目的推进这个问题一直没有解决
首先目前写了两个 js 文件一个是 game/static/js/src/zbase.js 这个文件另一个是 game/static/js/src/menu/zbase.js 这个文件
前面的是一个整体的 js 文件后面的是菜单部分的 js 文件
其实这两个文件最后都是放到 game/static/js/dist/game.js 里面执行的主要是把文件分开开发者在开发的时候更加方便是使用了一个打包的脚本文件把所有的 js 文件全部集成到 game.js 文件里面(scripts/compress_game_js.sh)
下面分析一下 game/static/js/src/zbase.js 该文件
class AcGame{constructor(id){this.idid;this.$ac_game$(#id);this.menunew AcGameMenu(this);}
}这种其实是一些模板函数构造函数然后把一些参数传进去
下面说一下这个文件 game/static/js/src/menu/zbase.js
class AcGameMenu{constructor(root){this.rootroot;this.$menu$(
div classac-game-menudiv classac-game-menu-fielddiv classac-game-menu-field-item ac-game-menu-field-item-single单人模式/divdiv classac-game-menu-field-item ac-game-menu-field-item-multi多人模式/divdiv classac-game-menu-field-item ac-game-field-item-settings设置/div/div
/div
);this.root.$ac_game.append(this.$menu);}
}构造函数调用了 root 也就是前面一个文件创建了一个菜单然后把这个菜单加到了 root 的后面创建菜单的时候用了 $ 表示这是一个 html 对象具体写 html 的时候用 把自己定义的 div 括起来里面是一些简单的 html 的 class 的写法
之前大二下的时候其实学过一部分 web 的知识所以这个不算太陌生但是自己之前感觉和没学区别不是很大没有转换为生产力呀
让三个按钮可以点击
this.$singelthis.$menu.find(.ac-game-menu-field-item-single);
this.$multithis.$menu.find(.ac-game-menu-field-item-multi);
this.$settingsthis.$menu.find(.ac-game-field-item-settings); 注意 class 前面需要加上 . 才能找到这个 class
设置按钮的样式 现在这里有三个按钮但是明显不是很美观非常简陋但是因为这个项目重点不在于前端所以最后可能前端也不是很美观
等笔者把前端知识也学了一点之后有时间会再完善一下现在先稍微完善一下
vh vw 表示设置百分比的高度和宽度比较方便 设置的 css 样式如下都比较简单直观
.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;background-color:rgba(39,21,28,0.6);text-align:center;border-radius:10px;letter-spacing:0.5vx;cursor:pointer;
}css鼠标悬停样式 实现鼠标悬停的动态效果的代码如下
.ac-game-menu-field-item:hover{transform:scale(1.2);transition:100ms;
}在前端实现页面的切换
在 menu 下面的 js 文件里面设置了一些函数但是在前端浏览器控制台看不到自己的函数输出不知道原因 按道理说自己点击了图标在控制台会显示点击了这个按钮
使用的代码如下
start(){this.add_listening_events();} add_listening_events(){let outerthis;this.$single_mode.click(function(){console.log(click single mode);});this.$multi_mode.click(function(){console.log(click multi mode);});this.$settings.click(function(){console.log(click settings);});}前面还有一个 start 函数的使用只有一行就没有粘贴过来了
自己找了一遍没有发现问题出在哪里现在回过头去看教程是怎么操作的这次看仔细一点 目前是有一个报错和一个警告还是有点无奈的
重新看了一遍教程和我写的是一样的但是为什么我的代码报错警告了控制台输出不了想要输出的内容呢
试了一下源代码仓库的文件也是显示不行应该不是我这边的问题了我继续跟着教程做就行
看来不行这一步卡住之后后面的也和教程不一样了
点击进入到一个新界面目前点击这个按钮进入不了新的界面
class AcGameMenu {constructor(root) {this.root root;this.$menu $(
div classac-game-menudiv classac-game-menu-fielddiv classac-game-menu-field-item ac-game-menu-field-item-single-mode单人模式/divbrdiv classac-game-menu-field-item ac-game-menu-field-item-multi-mode多人模式/divbrdiv classac-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();}
}
把 menu 里面的 js 文件写成上面这样可以跳转和在控制台正常显示输出但是还是有一些报错
把 playground 里面的 js 文件重新写了一遍现在没有报错了估计是因为一些肉眼看不见的标点符号之类的错误因为笔者有时候操作 tmux 和 vim 有一些误操作所以以后宁愿写的慢一点也不要把代码敲错debug 的时间远大于节省的这一点点打字的时间
结语
这个菜单就算结束了确实作为独立开发者自己的源码还是闭源比较好但是这个作为自己的学习项目的话开源影响也不是很大等自己以后独立开发的时候再闭源目前自己的 github 其实有含金量的东西可以认为是没有的哈哈哈
以后要是自己一个人一个月可以上线一款 app 想想还是非常激动的
