（三）Django 在线平台(详情页配置+动态显示后端数据+分页+筛选+排序功能)

最新推荐文章于 2024-02-19 14:33:08 发布
VIP文章 最新推荐文章于 2024-02-19 14:33:08 发布
阅读量4k 收藏 26
点赞数 1
分类专栏： Django
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_41827390/article/details/80632499
版权

前端页面地址 https://github.com/Lxstrive/DjangoHtml

1.把org-list.html拷贝到项目templates中

2.很多页面都有共同部分，所以可以创建一个母版base.html 用来继承（减少代码量）


3.把org-list.html代码剪切进母版base.html中 用模板语句block包裹可变动模块 母板创建完成

<!DOCTYPE html>
<html>
{% load staticfiles %}
<head>
	<meta charset="UTF-8">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1" >
	<title>{% block title %}课程机构列表 - X.xx在线网{% endblock %}</title>
	<link rel="stylesheet" type="text/css" href="{% static 'css/reset.css' %}">
	<link rel="stylesheet" type="text/css" href="{% static 'css/animate.css' %}">
	<link rel="stylesheet" type="text/css" href="{% static 'css/style.css' %}">
    {% block custom_css %}{% endblock %}
    <script src="{% static 'js/jquery.min.js' %}" type="text/javascript"></script>
    <script src="{% static 'js/jquery-migrate-1.2.1.min.js' %}" type="text/javascript"></script>
    {% block custom_js %}{% endblock %}

</head>
<body>
<section class="headerwrap ">
    <header>
		<div  class=" header">
 			<div class="top">
				<div class="wp">
					<div class="fl"><p>服务电话：<b>33333333</b></p></div>
					<!--登录后跳转-->


                        <a style="color:white" class="fr registerbtn" href="register.html">注册</a>
                        <a style="color:white" class="fr loginbtn" href="login.html">登录</a>



				</div>
			</div>

            <div class="middle">
                <div class="wp">
                    <a href="index.html"><img class="fl" src="../images/logo.jpg"/></a>
                    <div class="searchbox fr">
                        <div class="selectContainer fl">
                            <span class="selectOption" id="jsSelectOption" data-value="course">
                                公开课
                            </span>
                            <ul class="selectMenu" id="jsSelectMenu">
                                <li data-value="course">公开课</li>
                                <li data-value="org">课程机构</li>
                                <li data-value="teacher">授课老师</li>
                            </ul>
                        </div>
                        <input id="search_keywords" class="fl" type="text" value="" placeholder="请输入搜索内容"/>
                        <img class="search_btn fr" id="jsSearchBtn" src="../images/search_btn.png"/>
                    </div>
                </div>
            </div>


			<nav>
				<div class="nav">
					<div class="wp">
						<ul>
							<li ><a href="index.html">首页</a></li>
							<li >
								<a href="course-list.html">
									公开课<img class="hot" src="../images/nav_hot.png">
								</a>
							</li>
							<li >
								<a href="teachers-list.html">授课教师</a>
							</li>
							<li class="active" ><a href="org-list.html">授课机构</a></li>
						</ul>
					</div>
				</div>
			</nav>

			</div>
    </header>
</section>
<!--crumbs start-->
{% block custom_bread %}
    <section>
        <div class="wp">
            <ul  class="crumbs">
                <li><a href="index.html">首页</a>></li>
                <li>课程机构</li>
            </ul>
        </div>
    </section>
{% endblock %}
{% block content %}
<section>
	<div class="wp butler_list_box list">
	<div class='left'>
		<div class="listoptions">
			<ul>
				<li>
					<h2>机构类别</h2>
					<div class="cont">
                        <a href="?city="><span class="active2">全部</span></a>

                            <a href="?ct=pxjg&city="><span class="">培训机构</span></a>

                            <a href="?ct=gx&city="><span class="">高校</span></a>

                            <a href="?ct=gr&city="><span class="">个人</span></a>

					</div>
				</li>
				<li>
					<h2>所在地区</h2>
					<div class="more">更多</div>
					<div class="cont">
                        <a href="?ct="><span class="active2">全部</span></a>

                                <a href="?city=1&ct="><span class="">北京市</span></a>

                                <a href="?city=2&ct="><span class="">上海市</span></a>

                                <a href="?city=3&ct="><span class="">广州市</span></a>

                                <a href="?city=4&ct="><span class="">深圳市</span></a>

                                <a href="?city=5&ct="><span class="">天津市</span></a>

					</div>
				</li>
			</ul>
		</div>
		<div class="all">共<span class="key">15</span>家</div>
		<div class="butler_list company list">
		<div class="layout">
			<div class="head">
				<ul class="tab_header">
					<li class="active"><a href="?ct=&city=">全部</a> </li>
					<li class=""><a href="?sort=students&ct=&city=">学习人数 ↓</a></li>
					<li class=""><a href="?sort=courses&ct=&city=">课程数 ↓</a></li>
				</ul>
			</div>

                <dl class="des difdes">
                    <dt>
                        <a href="org-detail-homepage.html">
                            <img width="200" height="120" class="scrollLoading" data-url="../media/org/2016/11/imooc.png"/>
                        </a>
                    </dt>
                    <dd>
                        <div class="clearfix">
                             <a href="org-detail-homepage.html">
                                 <h1>慕课网</h1>
                                 <div class="pic fl">

                                         <img src="../images/authentication.png"/>

                                         <img src="../images/gold.png"/>

                                 </div>
                             </a>
                        </div>
                        <ul class="cont">
                            <li class="first"><p class="pic9">课程数：<span>1</span></p><p class="c7">学习人数：<span>1000</span></p></li>
                            <li class="c8" style="padding-left:18px;">北京市海淀区中关村北大街</li>
                            <li class="pic10" style="padding-left:18px;">经典课程：

                                    <a href="/diary/19/">c语言基础入门</a>

                                    <a href="/diary/16/">数据库基础</a>

                            </li>
                        </ul>
                    </dd>
                    <div class="buy start_groupbuy jsShowPerfect2" data-id="22"><br/>联系<br/>服务</div>
                </dl>

                <dl class="des difdes">
                    <dt>
                        <a href="org-detail-homepage.html">
                            <img width="200" height="120" class="scrollLoading" data-url="../media/org/2016/11/bjdx.jpg"/>
                        </a>
                    </dt>
                    <dd>
                        <div class="clearfix">
                             <a href="org-detail-homepage.html">
                                 <h1>北京大学</h1>
                                 <div class="pic fl">

                                         <img src="../images/authentication.png"/>

                                         <img src="../images/gold.png"/>

                                 </div>
                             </a>
                        </div>
                        <ul class="cont">
                            <li class="first"><p class="pic9">课程数：<span>1</span></p><p class="c7">学习人数：<span>1000</span></p></li>
                            <li class="c8" style="padding-left:18px;">北京市海淀区中关村北大街</li
最低0.47元/天 解锁文章
Lx_strive
关注
  • 1
    点赞
  • 踩
  • 26
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
django自定义分页插件，bootstrap+python+django分页插件
11-25
django+python自定义分页插件，简单易用，只需要三行代码即可展示自定义分页，支持多个展示效果
Django框架-管理后台项目之分页实现
weixin_30920853的博客
10-07 302
一、自定义分页 分页功能在每个网站都是必要的，对于分页来说，其实就是根据用户的输入计算出应在数据库表中的起始位置。 1、设定煤业显示的数据条数 2、用户输入页码（第一页，第二页...） 3、根据设定的每页显示条数和当前页码，计算出需要取数据表的起始位置 4、在数据表中根据起始位置取值，页面上输出数据 前面那样会在页面中生成所有的页码，但实际需要是设定指定数量的页码，格式如［上一页...
Django----将后端数据展示在前端页面（展示用户列表及详情页）
maidu_xbd的博客
09-28 7989
需求描述： 如下图，将后台数据库中的用户列表数据展示出来，点击某用户后，进入信息详情页面 解决方案： 涉及知识点：模板语言 django除了可以渲染html语言，还支持模板语言： {% for user in user_list %} <li> <a href="detail/{{user.id}}"> {{user.username}}</a> </li> {% endfor %} 1、从模型类中获取数据后，构造j
django自定义后端过滤
最新发布
Ataoker的博客
02-19 1258
django自定义过滤类， 实现业务数据的过滤
Django3 前后端分离的分页方法（无需计算省略号）
weixin_37598641的博客
09-20 888
分页最麻烦的应该是计算省略号部分，并且很多人不明白到底前端分页还是后端分页，本人页尝试过很多方法，但整个过程和计算是真的太麻烦，看着脑壳疼，想着更疼 经过很多探索和尝试后，发现Django3.2版本新增一个get_elided_page_range()方法，这个就是后端为我们分页后并得到两边的省略号对象，官方文档如下 分页器 | Django 文档 | Django 具体用法： 后端 1.创建一个文件：Pagination.py，以后所有的分页...
python实现表格筛选怎么做_django列表筛选功能的实现代码
weixin_39816260的博客
11-30 695
views，中设置请求的类型class LawDetailView(View):def get(self, request, law_id):type = request.GET.get('type', '')law = Law.objects.get(id=law_id)return render(request, 'zcfg-detail.html', {'law': law,'type': ...
Django23——练习1（后台传递数据显示数据）
Blog of Lytracy
05-24 920
文章目录1、将素材放入Django项目中2、配置路由3、定义视图4、查看效果5、修改模板v16、修改视图7、修改模板v27、修改模板v37、使用static标签完善模板(index.html) 任务：下载素材，如下图所示： 将网页放到Django项目中运行，将下图红框中的文字和图片作为后台的数据，传递到页面进行显示。 1、将素材放入Django项目中 （1）新建应用exercise01用来完成网页的显示。 python manage.py startapp exercise01 将应用放到apps文件
django+echart数据动态显示的例子
01-21
– 前端定时读取后端数据，并显示到echart上。 第一种思路貌似走不通，主要考虑第二种方式。 第二种方式首先想到的是利用javascript直接读取数据库，并定时更新echart曲线。 后来了解js只是前端语言，没有访问数据库...
前端vue+后端django的一个分享交流平台源码.zip
05-08
前端vue+后端django的一个分享交流平台源码 前端vue+后端django的一个分享交流平台源码 前端vue+后端django的一个分享交流平台源码 前端vue+后端django的一个分享交流平台源码 前端vue+后端django的一个分享...
基于Django+Django -Rest-Framework+Python的在线考试系统后端（源码）.zip
01-06
1、基于Django+Django -Rest-Framework+Python的在线考试系统后端（源码）.zip 2、该资源包括项目的全部源码，下载可以直接使用！ 3、本项目适合作为计算机、数学、电子信息等专业的课程设计、期末大作业和毕设项目...
django后端分页
beter138的博客
07-04 1056
后端分页函数 from django.core.paginator import Paginator, EmptyPage import datetime from django.core import serializers import json def page_to(Qset, page, page_size, fields=()): # 创建分页对象 count = ...
爱家租房网站（完整）
08-27
爱家租房网站完结版，包括：注册（图片、短信验证码）、登陆、个人信息（上传头像、修改用户名）、我的房源（发布房源）、我的订单（支付、评论）、客户订单（接单、拒单）、房屋详情页、房屋搜索、房源预定、登出等。对应的博客地址：https://blog.csdn.net/geek_xiong/article/details/100108834
爱家租房网站（6）
08-13
爱家租房网站未完版，包括：图片验证码、短信验证码、注册、登陆、上传头像（文件）。参考博客地址：https://blog.csdn.net/geek_xiong/article/details/99433221
爱家租房网站（11）
08-19
爱家租房网站未完版，其中包括的功能有：图片、短信验证码，注册，登陆，个人中心，房屋管理，列表页等，对应的博客地址：https://blog.csdn.net/geek_xiong/article/details/99721702
【web系列七】高阶技巧之django+ajax实现python后端console输出在前端的动态显示
Nicholson的博客
04-01 2501
目录 环境 目的 需要解决的问题 问题解析 解决方案 实战 需要实现的功能 工程结构 具体实现 主页功能 周期性发送请求 获取数据并返回display 生成数据的功能函数 线程类和控制函数 最终效果 环境 django+ajax(juqery)+vue(可选) 不使用websocket长连接 目的 需要解决的问题 当我们需要在服务器上实现一些复杂逻辑功能时，可能会在一个函数（称为mission）中打印很多内容到pyth......
django分页(两种办法)
qq_37605109的博客
05-01 8699
django，分页
Django+Python数据库实现网页动态数据显示
多喝i热水的博客
09-20 2293
目录 1.后台数据返回 2.前端的接收 django自带的web服务器,自带了数据库sqllite3 把mysql之前导出的数据导入到了sqllite3中，总共7天的数据2个参数（时间time和预测值predict） 1.后台数据返回 上图是把数据打印出,数据的格式为 [ {'time':' ', 'predict' : }, ....... ] 1.返回列表类...
django+drf+swagger写一个后端框架demo
05-10
好的，下面是一个使用 Django、Django REST framework 和 Swagger 的后端框架 demo。 首先，需要安装 Django、Django REST framework 和 Swagger： ``` pip install Django pip install djangorestframework pip ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值