html css js实现快递单打印_blog- 实现模块页面的准备

最新推荐文章于 2021-06-27 05:39:28 发布

weixin_39890814

最新推荐文章于 2021-06-27 05:39:28 发布

阅读量380

点赞数

文章标签： html css js实现快递单打印

实现模板页面准备

拿到前端写的Html

这里只是举个栗子
我这里只是一个简单的模板
假设我们拿到的前端模板。或者自己在网上扒了一份代码

链接:https://pan.baidu.com/s/1NkOcNdPCKU03L-Zk3u88Mw&shfl=sharepset 密码:5azj

静态HTML分析（分析如何干活）

拿静态模板页面之后，结合我们之前的项目需求分析知道，我们需要实现六个页面的展现。

网站首页、文章分类列表页、搜索列表页、标签列表页、文章内容展示页、单页面（联系我们）。

其中，文章分类列表页、搜索列表页、标签列表页这三个页面展示结构都一样我们只需要一个模板页面即可。

我们只需要实现四个页面即可，这四个页面分别对应前端给我们模板里的

首页(index.html)
列表页（list.html）
内容页(show.html)
单页(page.html)。

了解我们需要做的工作之后，我们开始做好准备工作。

开始干活

我们把静态模板static目录里的所有文件夹和文件复制到项目目录下的static目录里，然后把index.html、list.html、show.html、page.html四个页面复制到项目下templates目录里（之前做测试时templates目录里的index.html删除掉）。
这四个页面，通过观察我们发现，头部和尾部是相同的，只有中间主体部分不相同，所以我们把这些相同的页面代码提取出来，新建一个文件base.html，把代码放到base.html里，头部代码和尾部代码中间部分用下面代码替代：

{% block content %}
{% endblock %}

index.html、list.html、show.html、page.html四个页面，我们把头部和尾部相同的代码删除掉，然后把剩下的代码放到下面代码标志对中间：

{% block content %} 
#把头部和尾部相同的代码删除之后把剩余放到这里面来
{% endblock %}

每个页面的第一行加上代码

{% extends "base.html" %}  # 继承 base.html页面的代码。

其中list.html和show.html这两个页面的右侧部分和index.html右侧除“热门文章排行"部分之外，都一样，所以我们也把这部分单独提取出来，放到right.html页面里，原来我们用下代码替代：

{% include 'right.html' %}

这个代码的意思是把right.html包含进来。

修改base.html页面，首先我们先在base.html页面第一行加上如下代码：

{% load staticfiles %}

告诉模板引擎，我们要加载引入静态资源。

然后把头部的CSS样式文件修改成下面的样子：

templates/base.html

<link rel='stylesheet' id='bootstrap-css' href='{% static "css/bootstrap.min.css" %}' type='text/css' media='all'/>
<link rel='stylesheet' id='fontawesome-css' href='{% static "css/font-awesome.min.css" %}' type='text/css' media='all'/>
<link rel='stylesheet' id='stylesheet-css' href='{% static "css/style.css" %}' type='text/css' media='all'/>
<link rel='stylesheet' id='raxus-css' href='{% static "css/raxus.css" %}' type='text/css' media='all'/>
<link rel='stylesheet' id='open-social-style-css' href='{% static "css/os.css" %}' type='text/css' media='all'/>

网站LOGO图片：

templates/base.html

<img src="static/picture/new_logo.png" alt="云计算,Python!"></a>

尾部的JS文件：

templates/base.html

<script src="{% static "js/bundle.js" %}"></script>
<script type="text/javascript" src="{% static "js/view-history.js" %}"></script>
<script type='text/javascript' src="{% static "js/push.js" %}"></script>
<script type='text/javascript' src='{% static "js/jquery.min.js" %}'></script>
<script type='text/javascript' src='{% static "js/bootstrap.min.js" %}'></script>
<script type='text/javascript' src='{% static "js/raxus-slider.min.js" %}'></script>
<script type='text/javascript' src='{% static "js/loader.js" %}'></script>
<script type='text/javascript' src='{% static "js/bj-lazy-load.min.js" %}'></script>
<script type='text/javascript' src='{% static "js/os.js" %}'></script>

修改完成结果

URL 干的活

因为我们要实现6个页面的展现，网站首页、文章分类列表页、搜索列表页、标签列表页、文章内容展示页、单页面（联系我们）。所以我们需要在 urls.py里，给每个页面都设置一个URL，并给每个URL添加一个别名：

myblog/urls.py

from blog import views
#导入blogAPP下的views

urlpatterns = [
    path('admin/', admin.site.urls),#管理后台
    path('', views.index, name='index'),#网站首页
    path('list-<int:lid>.html', views.list, name='list'),#列表页
    path('show-<int:sid>.html', views.show, name='show'),#内容页
    path('tag/<tag>', views.tag, name='tags'),#标签列表页
    path('s/', views.search, name='search'),#搜索列表页
    path('about/', views.about, name='about'),#联系我们单页
    path('ueditor/', include('DjangoUeditor.urls')),
    re_path('^media/(?P<path>.*)$', serve, {'document_root': settings.MEDIA_ROOT}),
]

里面其中列表页和内容页分别传入一个整形参数lid和sid。

然后在blog/views.py文件里，写六个视图函数，与myblog/urls.py文件里的六个url一一对应，视图函数里的先用pass替代（之前体验的视图函数index删除掉）:

blog/views.py

#首页
def index(request):
    pass

#列表页
def list(request,lid):
    pass

#内容页
def show(request,sid):
    pass

#标签页
def tag(request, tag):
    pass

# 搜索页
def search(request):
    pass
# 关于我们
def about(request):
    pass