正文

网站开发（周五）：项目前端页面开发（实战）

CHN如是说  2022-02-16  305

关键词：

第一、前端基础简介

前端网页：根据此前项目需求分析可知，我们需要开发网站首页、文章分类页、搜索页、正文页、标签页，而一个最基本网页模版有三部分，网页顶部导航条、网页中部主体、网页底部，其中顶部和底部布局固定，中部展示内容每张网页不同。

网页代码:我们知道，一个网页基本代码的顶部和底部相同，主要中部主体在变化。

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>mysite2019</title>
</head>
<body>
<div>顶部</div>

<div>中部</div>

<div>底部</div>

</div>
</body>
</html>

模板继承：我们把所有网页相同的代码单独提取出来放在 base.html页面里，然后在代码不同的位置，也就是主体那里用模板标签{% block content %} {% endblock %}替换。

templates/base.html 　　#父模板

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>mystie2019</title>
</head>
<body>
<div>顶部</div>

{% block content %}

{% endblock %}

<div>底部</div>

</div>
</body>
</html>

网站首页：在实现首页模板的时候，我们通过下面的代码实现，组合成一个完整的首页。{% extends "base.html" %} 的意思是继承 base.html页面的代码，且这个代码一定要放页面的第一行。两个页面里都有代码{% block xxx %}{% endblock %} ，代码{% block xxx %}{% endblock %} 里的xxx可以自由命名，这个代码意思是告诉模板引擎：这个位置我要预留给别人放东西的。一般是父模板基础代码被引用到子模板中，结合子模板的主体内容，形成一个完整网页，有效解决代码冗余、代码重复修改。

templates/index.html  #子模板

{% extends "base.html" %} 
{% block content %}
<div>中部</div>
{% endblock %}

网页样式：{% block %} 标签非常有用，一般来说，基础模板中的 {% block %} 标签越多越好，用起来也会更灵活。例如，子模板要多引用一个CSS样式文件，这个样式只需要应用在当前页面。我们可以在base.html模板里多加一个{% block css %} {% endblock %}标签,然后在子模板页面里加以引用，如此一来，这个CSS就只在当前页面生效。

{% block  css %}

#CSS样式文件路径
<link href='{% static "css/style.css" %}' type='text/css' />

{% endblock %}

第二、网页需求分析

结合此前的项目需求分析，我们需要实现五个页面的展现。网站首页、文章分类列表页、搜索列表页、标签列表页、文章内容展示页，这里，我们增加一个单页面（网站声明）。其中，文章分类列表页、搜索列表页、标签列表页这三个页面展示结构都一样，我们只需要一个模板页面即可。所以说我们真正需要实现的只有4个页面，这四个页面分别对应前端模板里的首页(index.html)、列表页（list.html）、内容页(show.html)、单页(page.html)。

1、我们把前端设计师做好的静态模板static移动到mysite2019根目录里，然后把index.html、list.html、show.html、page.html四个页面复制到项目下templates目录里（之前做测试时templates目录里的index.html删除掉）。

2、通过观察，我们发现四个页面的头部和尾部相同，只有中间主体部分不同，通过继承，我们把相同部分的代码放到base.html。

templates/base.html      #父模板

{% load staticfiles %}
<!DOCTYPE HTML>
<html>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="x-dns-prefetch-control" content="on"/>
    <meta http-equiv="X-UA-Compatible" content="IE=11,IE=10,IE=9,IE=8">
    <meta name="viewport"
    content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
    <meta name="apple-mobile-web-app-title" content="Hydra,Hacker学院">
    <title>Hacker学院</title>

<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'/>
    <meta name='robots' content='index,follow'/>
    <meta name="keywords" content="网络安全、网络攻防、网络渗透">
    <meta name="description" content="追踪黑客前沿咨询,速递最新、最猛、最价值的黑客科技资讯！">
</head>
<body class="home blog site-layout-2">
<!-- 顶部 -->
<header class="fix-wrap" id="fix-wrap">
    <div class="fix-main clearfix pr" id="fix-main" _hover-ignore="1"><a href="/" class="index-logo">
        <img src="{% static "picture/logo2.png" %}" alt="Hacker学院"></a>
        <nav class="nav fl">
            <ul id="fix-list" class="fix-list clearfix">
                <li id="menu-item-24086" class="menu-item"><a href="/">首页</a></li>
                {% for category in allcategory %}
                    <li id="menu-item-117720" class="menu-item">
                        <a href="{% url 'index' %}list-{{ category.id }}.html">{{ category.name }}</a></li>
                {% endfor %}
                <li id="menu-item-24086" class="menu-item"><a href="/about/">网站声明</a></li>
            </ul>
        </nav>
        <form method="get" class="index-search  hidden-xs" action="/s/">
            <input class="text" name="search" type="text" placeholder="输入关键字" value="">
            <button class="submit" type="submit"><i class="fa fa-search"></i></button>
        </form>
    </div>
</header>

{% block content %}

{% endblock %}

<!-- 底部 -->
<footer class="footer">
    <div class="copyright"> © 2010- 2019 · All Rights Reserved
        · <a href="https://www.cnblogs.com/linlei1234/">博客园</a>
        · <a href="http://www.miibeian.gov.cn" target="_blank">粤ICP备27022490号</a> 版权所有 © 博客园
    </div>
</footer>
<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>

</body>
</html>

3、index.html、list.html、show.html、page.html四个页面，删除顶部和底部相同代码，剩下中部主体代码，再在四个子模板基础上继承父模板，形成完整页面。

templates/index.html、list.html、show.html、page.html

{% extends "base.html" %}

{% block content %} 
#中部主体代码
{% endblock %}

4、其中list.html和show.html这两个页面的右侧部分和index.html右侧除“热门文章排行"部分之外，样式布局都一样，我们将其提取，放到right.html页面里，原来的位置我们用下面的代码{% include 'right.html' %}替代，代表在此位置引入right.html代码。

{% load staticfiles %}    #引入样式文件
<section class="widget post-right-item">
    <h4 class="post-right-title">热门推荐</h4>
    <ul class="post-hot clearfix">
        {% for k in remen %}
            <li>
                <div class="img">
                    <a href="{% url 'index' %}show-{{ k.id }}.html" title="{{ k.title }}">
                        <img src="{% url 'index' %}media/{{ k.img }}" srcset="{% url 'index' %}media/{{ k.img }}" alt="{{ k.title }}"
                             class="wp-post-image" width="120" height="80"/>
                    </a>
                </div>
                <div class="text">
                    <a href="{% url 'index' %}show-{{ k.id }}.html" title="{{ k.title }}"
                       target="_blank">{{ k.title }}</a>
                </div>
            </li>
        {% endfor %}
    </ul>
</section>

</section>
<section class="widget post-right-item"><h4 class="post-right-title">所有标签</h4>
    <div class="tags">
        {% for tag in tags %}
            <a href="{% url 'index' %}tag/{{ tag.name }}">{{ tag.name }}</a>
        {% endfor %}
    </div>
</section>
</section><!-- /关注我们 -->
<div class="post-right-item">
    <h4 class="post-right-title">关注我们</h4>
    <div class="wid-about">
        <p>博主微信，欢迎交流！</p>
        <img src="{% static "picture/weixin.jpg" %}" alt="微信二维码" width="160" height="160">
    </div>
    <div class="wid-about">
        <p><strong>联系方式:</strong></p>
        <p>Phone: 15622333821</p>
        <p>Email：982240803@qq.com</p>
    </div>
</div>

5、修改base.html页面，引入样式文件，形成最终模板（点击下载）。

第三、修改配置文件

1、在mysite2019/urls.py，给六个页面都设置一个URL，并添加别名。

2、在blog/views.py，写六个视图函数，与mysite2019/urls.py文件里的六个url一一对应。

from django.shortcuts import render
from blog.models import Category,Banner, Article, Tag, Link
from django.core.paginator import Paginator, EmptyPage, PageNotAnInteger

#优化代码，减少冗余
def global_variable(request):
    allcategory = Category.objects.all()
    remen = Article.objects.filter(tui__id=2)[:6]
    tags = Tag.objects.all()
    return locals()

#首页
def index(request):
    banner = Banner.objects.filter(is_active=True)[0:4]
    tui = Article.objects.filter(tui__id=1)[:3]
    allarticle = Article.objects.all().order_by('-id')[0:6]
    hot = Article.objects.all().order_by('views')[:10]
    link = Link.objects.all()
    return render(request, 'index.html', locals())

#列表页
def list(request,lid):
    list = Article.objects.filter(category_id=lid)
    cname = Category.objects.get(id=lid)
    page = request.GET.get('page')
    paginator = Paginator(list, 5)
    try:
        list = paginator.page(page)#获取当前页码的记录
    except PageNotAnInteger:
        list = paginator.page(1)#如果用户输入的页码不是整数时,显示第1页的内容
    except EmptyPage:
        list = paginator.page(paginator.num_pages)#如果用户输入的页数不在系统的页码列表中时,显示最后一页的内容
    return render(request, 'list.html', locals())


#内容页
def show(request,sid):
    show = Article.objects.get(id=sid)
    hot = Article.objects.all().order_by('?')[:10]
    previous_blog = Article.objects.filter(created_time__gt=show.created_time,category=show.category.id).first()
    netx_blog = Article.objects.filter(created_time__lt=show.created_time,category=show.category.id).last()
    show.views = show.views + 1
    show.save()
    return render(request, 'show.html', locals())

#标签页
def tag(request, tag):
    list = Article.objects.filter(tags__name=tag)
    tname = Tag.objects.get(name=tag)
    page = request.GET.get('page')
    paginator = Paginator(list, 5)
    try:
        list = paginator.page(page)  # 获取当前页码的记录
    except PageNotAnInteger:
        list = paginator.page(1)  # 如果用户输入的页码不是整数时,显示第1页的内容
    except EmptyPage:
        list = paginator.page(paginator.num_pages)  # 如果用户输入的页数不在系统的页码列表中时,显示最后一页的内容
    return render(request, 'tags.html', locals())

# 搜索页
def search(request):
    ss=request.GET.get('search')
    list = Article.objects.filter(title__contains=ss)
    page = request.GET.get('page')
    paginator = Paginator(list, 10)
    try:
        list = paginator.page(page)  # 获取当前页码的记录
    except PageNotAnInteger:
        list = paginator.page(1)  # 如果用户输入的页码不是整数时,显示第1页的内容
    except EmptyPage:
        list = paginator.page(paginator.num_pages)  # 如果用户输入的页数不在系统的页码列表中时,显示最后一页的内容
    return render(request, 'search.html', locals())


# 关于我们
def about(request):
    return render(request, 'page.html',locals())

3、打开mysite2019/settings.py，找到TEMPLATES，在里面添加索引代码。

至此，网站前端后台均创建完毕！

接下来，对网站进行运行测试。

网站开发（周六）：项目本地调试（实战）

...台添加数据。4、前端刷新，页面正常展示。至此，本地网站开发全部完成！接下来，将项目部署到虚拟环境中的Ubuntu上。查看详情

鸿蒙开发|呼吸训练实战项目

文章目录鸿蒙开发|呼吸训练实战项目（二）实现训练页面与主页面之间相互跳转运行效果实现思路代码详解验证应用和每个页面的生命周期时间运行效果在主界面中显示logo和两个选择器实现思路代码详解鸿蒙开发|呼吸... 查看详情

anjular+bootstrap前端开发案例实战

...rjs和Bootstrap，开发一个前端应用实例，通过这一次简单的项目实战，引领大家进入AngularJS前端开发的殿堂，并向大家介绍一下几个知识点：MVC基础，通过项目实例，让大家初步体会MVC设计模式的应用。构建我们第一个AngularJS应用... 查看详情

第一讲htmlcss实战

1.1HTML1.1.1研发团队分为前端开发、后端开发前端：前后台系统页面的展示，UI交互页面后端;无交互页面、主要是接口、数据库、服务器前端开发(UI设计)：写页面设计，页面的排版JavaScript(java描述语言)、PHP、htmlcss后端开发：复制... 查看详情

零基础学习前端开发要怎么开始

...件的运用、BootStrap源码分析。能够熟练使用less、sass完成项目开发，深入了解BootStrap。4、使用HTML、CSS、LESS、SASS等技术完成网页项目实战。通过项目掌握第一阶段html、css的内容、完成PC端页面设计和移动端页面设计。第二阶段：... 查看详情

前端开发必学的技术都有哪些？

vue实战开发三（博客页面总览）(代码片段)

文章目录前言项目结构首页编辑器个人空间总结前言经过差不多五天的时间对前端进行开发，现在总算是把基本的客户端的前端页面做得差不多了，关于后端页面的话，嫖一个后端模板就好了，主要还是客户端的... 查看详情

高性能极致用户体验前端开发实战

...的最佳实践，提供前端网页性能分析优化知识，结合实际项目经验分析可以采用的优化思路，并给出开发高性能极致体验网页的通用方法和技巧。课程官方博客：前端学堂在开始学习本课程之前，先提2个基本要求：了... 查看详情

web前端需要学啥？

项目开发实战思路

需求1.登录1.1确认用户是否已经登录;1.2如果已经登录,默认跳转到index页面,展示所有数据;1.3如果尚未登录,则需要跳转到login页面,输入用户名和密码实现1.登录1)注册拦截器　　(1)开发UserInterceptor实现HandlerInterceptor接口;　　　... 查看详情

学前端都学啥比较好？

web前端培训课程都学习啥内容？

...与PHP/JAVA开发项目、前端工程化与模块化应用项目、PC端网站开发项目、PC端管理信息系统前端开发项目4.第四阶段：移动端项目开发内容包含：Touch端项目、微信场景项目、应用Angular+Ionic开发WebApp项目、应用Vue.js开发WebApp项目、... 查看详情

vue实战（7）：完整开发登录页面（一）

...技术Avue实战（1）：准备与资料整理vue实战（2）：初始化项目、搭建底部导航路由vue实战（3）：底部导航显示、搭建各模块静态页面、添加登录页页面与路由vue实战（4）：postman测试数据、封装ajax、使用vuex管理状态vue实战（5）... 查看详情

web开发需要学习啥？

vuejs+es6开发移动端app实战项目笔记

一、什么是MVVM框架MV*包括MVC、MVP、MVVMMVVM框架由Model、View、ViewModel构成。Model指的是数据，在前端对应的是JavaScript对象。View指的是视图，在前端对应的是DOMViewModel观察Model和View的变化来做更新，实现了数据的双向绑定。前端MVVM... 查看详情

vuejs+es6开发移动端app实战项目笔记

2016最新新巴巴运动网项目实战开发

...16版新巴巴-价值1.1W├─day01│01课程介绍│02开发环境│02项目介绍│04项目技术介绍│05系统介绍│06后台页面介绍│07前台系统页面介绍│08项目架构│09项目搭建之前的准备│10创建父工程│11创建Maven的其它工程│12多个Tomcat设... 查看详情

微信小程序入门与实战常用组件api开发技巧项目实战

第1章什么是微信小程序？介绍小程序的特点与适用场景、对开发者的影响以及课程特色！七月老师小程序进阶课《纯正商业应用——微信小程序实战》与《微信小程序商城构建全栈应用》已上线，全面进阶小程序！第2章... 查看详情