-
ercharts一个页面能放几个_Django的页面模版提取(三)
2020-12-30 19:33:13Html代码打开这几份代码进行横行对比,可以发现里面好大一部分都是一样的 1 2 3 4 5 6 My Login Page — Bootstrap 4 Login Page Snippet 7 8 91011 12 每一个的头部都是这样的,作为一个懒惰的程序员,当然是要把...模版提取
在完成了花架子的搭建之后,现在需要看一下前端的Html代码了。
Html代码
打开这几份代码进行横行对比,可以发现里面好大一部分都是一样的
1 2 3 4 5 6 My Login Page — Bootstrap 4 Login Page Snippet 7 8 91011 12
每一个的头部都是这样的,作为一个懒惰的程序员,当然是要把他们拎出来了。
我们写一个base.html来当作模版。
以forgot.html为例,可以看出只有红框框选中的地方和其他几个文件不一样
forgot
那么我们的base.html可以写出这样
1{% load static %} 2 3 4 5 6 7 8 {% block title %} 9 登录10 {% endblock %}11 12 13 14151617
18 {% block main %}1920 {% endblock %}21
22232425262728
留出了{% block main %} {% endblock %}来摆放差异的内容
模块化后的forgot
新的forgot.html如图所示。
同理,完成其他几个html的模版提取。
页面渲染部分代码编写
编写代码可以通过url访问几个页面
首先是首页
有两种方式可以实现:
函数视图函数视图便于理解代码可读性与复用性都不佳类视图代码可读性好类视图相对于函数视图有更高的复用性所以选择使用类视图:
1from django.shortcuts import render2from django.views import View34class LoginView(View):5 def get(self, request):6 return render(request, 'login/index.html')
定义类视图的路由:
1from django.urls import path2from . import views34urlpatterns = [5 path('', views.LoginView.as_view(), name='login'),6]
同理,完成其他几个页面的类视图GET代码编写:
1from django.shortcuts import render 2from django.views import View 3 4 5class LoginView(View): 6 def get(self, request): 7 return render(request, 'login/index.html') 8 910class ForgotView(View):11 def get(self, request):12 return render(request, 'login/forgot.html')131415class RegisterView(View):16 def get(self, request):17 return render(request, 'login/register.html')181920class ResetView(View):21 def get(self, request):22 return render(request, 'login/reset.html')
路由配置
1from django.urls import path2from . import views34urlpatterns = [5 path('', views.LoginView.as_view(), name='login'),6 path('forgot/', views.ForgotView.as_view(), name='forgot'),7 path('register/', views.RegisterView.as_view(), name='register'),8 path('reset/', views.ResetView.as_view(), name='reset'),9]
页面跳转
下面修改index.html里面的a标签完成页面上直接跳转
image.png
改为
同理找到全部需要修改的a标签
运行后点击页面上仅有的几个按钮测试跳转是否正常。
再把里面的一些英文改成中文,到此这个抄来的前端页面,大半都变成我们自己的东西了。
本土化
以上就完成了页面模版的提取与简单的类视图。
后续再讲POST的实现。
由于代码的量已经增加的有点多,全部贴出来不太美观,所以上库进行版本管理量。
Git地址:https://github.com/zx490336534/Zxapitest.git
-
重定向几个移动端网页版页面至电脑版网页
2021-01-12 01:42:44在测试过程中偶然发现在手机浏览器打开相簿页会重定向至相应的 h5 版动态页,即从 <code>https://h.bilibili.com/*</code> 重定向至 <code>https://t.bilibili.com/h5/dynamic/detail/*。 或许能利用这个特性... -
Discuz!手机版版块页面主题列表中隔几个主题插入一个广告位的方法
2017-10-27 08:28:09打开模板(以触屏版为例) \template\default\touch\forum\forumdisplay.htm 将代码 [html] view plain copy 0}--> {eval continue;} 0 && !$displayorder_...打开模板(以触屏版为例)
\template\default\touch\forum\forumdisplay.htm
将代码
- <!--{loop $_G['forum_threadlist'] $key $thread}-->
- <!--{if !$_G['setting']['mobile']['mobiledisplayorder3'] && $thread['displayorder'] > 0}-->
- {eval continue;}
- <!--{/if}-->
- <!--{if $thread['displayorder'] > 0 && !$displayorder_thread}-->
- {eval $displayorder_thread = 1;}
- <!--{/if}-->
- <!--{if $thread['moved']}-->
- <!--{eval $thread[tid]=$thread[closed];}-->
- <!--{/if}-->
- <li>
- <!--{hook/forumdisplay_thread_mobile $key}-->
- <a href="forum.php?mod=viewthread&tid=$thread[tid]&extra=$extra" $thread[highlight] >
- {$thread[subject]}
- <span class="by">$thread[author]</span>
- </a>
- <span class="num">{$thread[replies]}</span>
- <!--{if in_array($thread['displayorder'], array(1, 2, 3, 4))}-->
- <span class="icon_top"><img src="{STATICURL}image/mobile/images/icon_top.png"></span>
- <!--{elseif $thread['digest'] > 0}-->
- <span class="icon_top"><img src="{STATICURL}image/mobile/images/icon_digest.png"></span>
- <!--{elseif $thread['attachment'] == 2 && $_G['setting']['mobile']['mobilesimpletype'] == 0}-->
- <span class="icon_tu"><img src="{STATICURL}image/mobile/images/icon_tu.png"></span>
- <!--{/if}-->
- </li>
- <!--{/if}-->
- {eval $index++;}
- <!--{/loop}-->
修改为- {eval $index=0;}
- <!--{loop $_G['forum_threadlist'] $key $thread}-->
- <!--{if !$_G['setting']['mobile']['mobiledisplayorder3'] && $thread['displayorder'] > 0}-->
- {eval continue;}
- <!--{/if}-->
- <!--{if $thread['displayorder'] > 0 && !$displayorder_thread}-->
- {eval $displayorder_thread = 1;}
- <!--{/if}-->
- <!--{if $thread['moved']}-->
- <!--{eval $thread[tid]=$thread[closed];}-->
- <!--{/if}-->
- <li>
- <!--{hook/forumdisplay_thread_mobile $key}-->
- <a href="forum.php?mod=viewthread&tid=$thread[tid]&extra=$extra" $thread[highlight] >
- {$thread[subject]}
- <span class="by">$thread[author]</span>
- </a>
- <span class="num">{$thread[replies]}</span>
- <!--{if in_array($thread['displayorder'], array(1, 2, 3, 4))}-->
- <span class="icon_top"><img src="{STATICURL}image/mobile/images/icon_top.png"></span>
- <!--{elseif $thread['digest'] > 0}-->
- <span class="icon_top"><img src="{STATICURL}image/mobile/images/icon_digest.png"></span>
- <!--{elseif $thread['attachment'] == 2 && $_G['setting']['mobile']['mobilesimpletype'] == 0}-->
- <span class="icon_tu"><img src="{STATICURL}image/mobile/images/icon_tu.png"></span>
- <!--{/if}-->
- </li>
- <!--{if in_array($index,array(2,6,9))}-->
- <li>
- <!--上面一行添加广告代码-->
- </li>
- <!--{/if}-->
- {eval $index++;}
- <!--{/loop}-->
in_array($index,array(2,6,9)表示在第3、第7、第10个主题后面插入一个广告位,广告代码在上面所示位置;
-
马贝商城 手机版静态页面的几个问题
2019-11-29 08:37:39一、手机版页面的头部的标签 <head lang="en"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title>马贝商城</title> <meta name="viewport" content="width=...一、手机版页面的头部的标签
<head lang="en"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title>马贝商城</title> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> <!--[if lt IE 9]> <script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script> <![endif]--> </head>
1.
<meta http-equiv=“X-UA-Compatible” content=“IE=edge,chrome=1”
http-equiv=“X-UA-Compatible” 是IE8的一个专有属性,是兼容模式的定义。用于指定IE8浏览器去模拟某个特定版本的IE浏览器的渲染方式以此来解决部分兼容问题,在网页中,其指定的模式的优先权高于服务器中(通过HTTP Header)所指定的模式。该标签必须写在网页中除了title元素和其他meta以外的所有其他元素之前。
Edge模式告诉IE以最高级模式渲染文档,也就是任何IE版本都以当前版本所支持的最高级标准模式渲染,避免版本升级造成的影响。
Chrome=1可以激活Chrome Frame ,如果安装了GCF,则使用GCF来渲染页面,如果未安装GCF则使用最高版本的IE内核来进行渲染。2.
<meta name=“viewport” content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"
meta viewport 标签目的是解决移动设备的viewport问题,ppk把移动设备上的viewport分为layout viewport 、 visual viewport 和 ideal viewport 三类:
分类 含义 layout viewport 宽度大于浏览器可视区域的宽度。可以通过document.documentElement.clientWidth 来获取。 visual viewport 可视区域的大小。宽度可以通过window.innerWidth 来获取。 ideal viewport 理想大小,该宽度等于移动设备的屏幕宽度。 要把当前的viewport宽度设为ideal viewport的宽度,既可以设置 width=device-width,也可以设置 initial-scale=1,但这两者各有一个小缺陷,就是iphone、ipad以及IE 会横竖屏不分,通通以竖屏的ideal viewport宽度为准。所以,最完美的写法应该是两者都写上去,这样 initial-scale=1 解决了 iphone、ipad的问题,width=device-width则解决了IE的问题。
width 和 initial-scale=1同时出现,并且不相等,浏览器会取它们两个中较大的那个值。(ps:在uc9浏览器中,当initial-scale=1时,无论width属性的值为多少,此时viewport的宽度永远都是ideal viewport的宽度)
在苹果的规范中,meta viewport 有6个content属性值:
属性名称 属性值 width 设置layout viewport 的宽度,为一个正整数,或字符串"device-width" height 同width initial-scale 设置初始缩放值,为一个数字,可以带小数 minimum-scale 允许用户的最小缩放值,可以带小数 maximum-scale 允许用户的最大缩放值,可以带小数 user-scalable 是否允许用户进行缩放,值为"no"或"yes", no 代表不允许,yes代表允许 总结:
第一、如果不设置meta viewport标签,那么移动设备上浏览器默认的宽度值为800px,980px,1024px等这些,总之是大于屏幕宽度的。这里的宽度所用的单位px都是指css中的px,它跟代表实际屏幕物理像素的px不是一回事。第二、每个移动设备浏览器中都有一个理想的宽度,这个理想的宽度是指css中的宽度,跟设备的物理宽度没有关系。我们可以用meta标签把viewport的宽度设为那个理想的宽度,如果不知道这个设备的理想宽度是多少,那么用device-width这个特殊值就行了,同时initial-scale=1也有把viewport的宽度设为理想宽度的作用。
3.
<script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"
解决ie9以下浏览器对html5新增标签的不识别,并导致CSS不起作用的问题。4.
<script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"
让不支持css3 Media Query的浏览器包括IE6-IE8等其他浏览器支持查询。二、表单元素中提示文本颜色的设置
1. input 提示文本的颜色
input::-webkit-input-placeholder{ color:#999; } input:-moz-placeholder{ color:#999; } input:-ms-input-placeholder{ color:#999; }
2. textarea 提示文本的颜色
textarea::-webkit-input-placeholder{ color:#999; } textarea:-moz-placeholder{ color:#999; } textarea:-ms-input-placeholder{ color:#999; }
三、verticle-align
verticle-align的用法1
verticle-align的用法2四、页面下方遮盖的内容区如何显现
当手机页面下方的内容被 footer遮盖没有显现出来时,如下图所示:
为了使内容区显现出来,可以通过设置最后一个元素的 margin-bottom 来实现。这样内容区就会被 margin-bottom 挤上来,全部显现出来。如下图所示:ul li:last-of-type { margin-bottom:4rem; }
-
几千页的PDF版电子书转Word总是失败怎么办?
2020-05-21 10:49:05下面分享一个就算几千页的文档也能轻松转换的工具,而且还是免费的哦。 不用下载也不用安装,直接搜索speedpdf即可找到并打开这款在线免费转换工具,这是一个国际版的软件,选择首页转换格式中的PDF to W有时为了方便修改,我们需要将PDF版的电子书转换成Word文档,可遇到页数超过1000页的文档转换时总是提示失败是怎么回事呢?要如何才能正常转换呢?
PDF转Word是我们最常用的转换格式,目前市面上的转换工具也很多,但一般都会有文件大小或页数限制,比如超过几十兆就无法提交转换,或超过几百页就转换不成功。下面分享一个就算几千页的文档也能轻松转换的工具,而且还是免费的哦。
不用下载也不用安装,直接搜索speedpdf即可找到并打开这款在线免费转换工具,这是一个国际版的软件,选择首页转换格式中的PDF to Word即可快速进入转换;
接着根据页面上传需要转换的PDF文档(只要小于200兆的文档都可直接上传转换),多个文档也可以直接一键批量上传处理;然后下方列表会显示已上传成功的文件,点击文档右侧的convert即可开始转换了;
由于页面比较多,一般转换耗时会比较久一点,这期间不要刷新或关闭网页(如已登录可忽略,重新打开网页后,在转换记录中可查看),转换完成后点击下载即可查看Word文档。
-
一个简单的页面如何实现页面自动刷新,配合webpack简单版
2021-02-25 14:38:08简单说几个要点,然后贴代码: 1.根目录下新建一个index.html页面 2.npm init初始化项目 3. 安装各种包 4. 新建一个webpack.config.js并配置 5. 如果你打包压缩文件,scr下的文件和index.html都一同压缩,生成dist... -
指定ie文档模式(解析页面的版本或ie版本)及几种指定方式的优先级
2017-09-29 19:34:57在页面开发时如何保证ie的兼容性,是令开发者很头痛的一个问题。在一些情况下,我们不指定ie解析页面的版本时会导致页面显示异常。例如,我们页面一些语法只支持ie8以上版本,此时如果用ie7解析就会出现异常,所以在一些... -
Acrobat里面直接截取部分页面(转存一页或者几页)为独立PDF
2019-06-10 08:41:34不需要使用foxit福熙reader。 在完整版acrobat里面,进入页面缩略图,右键–提取页面,出现如下对话框...(1)直接确定,可以得到从214页至219页的独立pdf。 (2)勾选“提取页面为单独文件”,则会有6个pdf。 ... -
怎样在手机上弄电子版文档_华为手机当扫描仪用?上百页纸质文档秒变电子版!一年省下好几万...
2021-01-01 20:52:36与其花几百上千买一部扫描仪,或者跑到复印店扫描,还不如用手上的华为手机。一、华为自带扫描仪你知道吗,华为其实是自带扫描仪这一强大功能的!可以快速把纸质文件变成电子版!只是不同的手机系统打开方式不一样~1... -
一个页面根据访问者的语言或国家来呈现不同的翻译版本
2019-09-24 07:08:49在开始前,需要解释几个重要的概念: 国际化(i18n):表明一个页面根据访问者的语言或国家来呈现不同的翻译版本。 本地化(l10n):向网站添加资源,以使它适应不同的地区和文化。比如网站的印度语版本。 区域... -
【转】pdf 中如何把几页缩小成一页打印
2015-02-04 11:15:00我用的是Foxit PDF Reader,可以这样设置:文件-打印-打印处理下的页面排列选择“在每张纸上放置多页”-选择每页版数即可。如果你用的是Adobe Reader,也可以自己找一下,看是否有这个设置。... -
JAXER留言板-一个html页面的ajax留言版
2008-01-26 22:21:00这几天一直在研究JAXER,结合jquery做了一个简单的留言板,只有一个html页面(除了jquery.js),当然是完全的ajax操作。 全部代码如下: 1 DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" ... -
页面传参终极版
2017-11-09 17:02:20页面传参数是一种比较常见的业务需求,根据实现原理及适用环境可以分为两大类。 在普通浏览器端常用的方法有如下几种: 1.利用URL传参 在页面跳转的时候通过设置window.location.href添加参数,在接收参数的... -
uniapp MUI 页面传参终极版
2019-11-22 13:46:01页面传参终极版 分类:MUI 页面传值 页面传参数是一种比较常见的业务需求,根据实现原理及适用环境可以分为两大类。 在普通浏览器端常用的方法有如下几种: 1.利用URL传参 在页面跳转的时候通过设置window.... -
如何将单页面转化成手机版_京网站制作公司对手机移动客户端页面优化的几点建议...
2020-12-04 07:47:30SEO手机端排名优化移动互联网已经成为互联网组成的非常重要的一个分支,以前对... 百度移动版网页页面质量评判标准是什么 一:怎样做好页面设计 (1),页面适配手机屏幕 (2)页面专门针对手机屏幕设计 1、页面随屏幕宽... -
android开发步步为营之45:横版与竖版页面效果
2014-09-24 15:44:29大家都知道智能手机的屏幕是可以竖着看,也可以横着看的,有时候如果页面过长,竖着看的效果放在横着看可能页面就会显示不全,那怎么办呢,我们可以res文件下另外新建一个文件夹layout-land,里面放竖着看的改良版,... -
MasterPage模版页
2006-12-18 23:38:00MasterPage会自动加载一个控件ContentPlaceHolder所有以MasterPage为模版的页面,都将显示在ContentPlaceHolder控件中它们所需的,仅仅就只是写上几下代码%@ Page Language="C#" MasterPageFile="~/main.master... -
google chrome的图标成一页纸了_Chrome 大版本更新来了,这是一次史诗级增强
2020-11-22 16:06:528 月 25 日,Chrome 85 正式向稳定版通道进行推送。本次更新以标签页功能增强为核心,同时也带来...具体到这次更新的 Chrome 85,Google 主要为我们带来了以下几个让标签页更好用的新功能:更清爽的标签分组此前 Ch... -
【7步制作Itext5页眉页脚pdf实现第几页共几页】
2013-10-08 15:45:00itext5页眉页脚工具类,实现page x of y 完美兼容各种格式大小文档A4/B5/B3,兼容各种文档格式自动计算页脚XY轴坐标鉴于没人做的这么细致,自己就写了一个itext5页眉页脚工具类,实现第几页/共几页,方便各位刚进入... -
js 动态添加html 页签 -完善版
2019-09-18 15:51:067月份写的那版多页签切换列表是基于 button 标签 ,而且当前操作的永远都是同一个页签,通过点击事件刷新数据显示的。图示如下: 这就产生了几个问题: 1. 页签和对应页面的关联不够明显 ; 2. 当前页面数据没... -
Head First C# 中文版 图文皆译 第二章 page61 前面几页是连线游戏,跳过
2008-10-26 13:15:00前面几页是连线游戏,跳过两个类可以处于同一个命名空间看看这个PetFiler2程序中的两个类文件。两个类文件内有三个类:Dog,Cat,和Fish。因为它们处于同一个命名空间,所以Dog.Bark()方法里可以调用Cat.Meow()... -
动态构建的多页面vue-cli模版
2018-05-27 15:00:24vue官方提供了几个vue cli的模版,但都单页面模版,然而在真实的业务场景下还是有多页面模版的需求,百度和google上都能搜索到不少单页面模版改多页面模版的文章,但是没有现成的模版可以直接用,而且多页面模版页面... -
JSF2.0的页面模版化
2009-08-15 10:28:30本篇介绍可以与Tapestry相媲美的页面模版化定义。 我们还是一起来看例子,我们就从echo.xhtml,/resources/...一、 创建一个模版 首先定义模版文件/templates/echoTemplate.xhtml,文件内容如下: echoT... -
Tomcat欢迎页面打不开,安装版踩坑
2020-03-22 14:47:10前几天把电脑玩坏了重装了一下系统,重新安装Tomcat的时候一个问题让我头疼了好几天,那就是我用.zip版配置完Tomcat欢迎页面打不开!!我以为是JDK和Tomcat的版本不匹配,因此把Tomcat7,8,9,10依次式了一遍。依据... -
MUI:页面传参终极版
2016-11-03 19:51:10页面传参数是一种比较常见的业务需求,根据实现原理及适用环境可以分为两大类。 在普通浏览器端常用的方法有如下几种: 1.利用URL传参 在页面跳转的时候通过设置window.location.href添加参数,在接收参数的页面... -
获取app的版本号(当我们更新一版就会又新特性的介绍页,通过版本号区别是否有新特性介绍页)
2016-08-07 00:09:06因为每次更新一版,版本号都会相应的增加。下方我做介绍(当然,也可以不用的,让服务端盖往回返一个字段来代表是否要显示新特性,有时候这种方法更好,因为有时候更新版本并不想做新特性的界面) // 偏好设置... -
页面置换算法(OPT、FIFO、LRU)实现--C++版本-页面置换算法(Optimal、FIFO、LRU)
2019-12-18 10:16:043、时间的流逝可用下面几种方法模拟:按键盘,每按一次可认为过一个时间单位; 4、将一批页的置换情况存入磁盘文件,以后可以读出并重放; 5、计算页面的缺页次数、缺页后的页面置换次数 6、支持算法:FIFO、LRU、...
-
【ssm项目源码】医院住院管理系统.zip
-
华为1+X——网络系统建设与运维(中级)
-
龙芯生态应用开发基础:C语言精要
-
vc制作运行后就自毁(删除自己)的程序.visual c++
-
gm(1,n)模型预测
-
2021-02-28
-
贪吃蛇游戏工程源代码.rar
-
深究字符编码的奥秘,与乱码说再见
-
Springboot 启动异常Unable to read meta-data for class
-
8. 字符串转换整数 (atoi)
-
NFS 实现高可用(DRBD + heartbeat)
-
在 Linux 上构建企业级 DNS 域名解析服务
-
安装Vue-CLI
-
SDL2+Opengles2.0使用,SDL_GL_SwapWindow()立即刷新问题
-
【爱码农】C#制作MDI文本编辑器
-
揭示阻抗为何表示成矢量与复数的面纱.docx
-
visual stidio 2013百度云
-
SQL 语句中 where 条件后 写上 1=1 是什么意思?
-
MySQL 高可用工具 DRBD 实战部署详解
-
基于python的dango框架购物商城毕业设计毕设源代码使用教程