• djang2.1教育平台02


    在次申明,之所以重做这个资料是因为原幕课教程漏洞太多,新手根本没有办法正常照些学习,我凭着老男孩python 课程基础,重做这个教程 ,更改版本为当前最新版本,为了方法以后的人学习,并不是照着原文照 抄,

    ,每一步案例都是亲自测行,能正常运行后在搬在这儿的,

    先从分页说起:

    进入虚拟目录  workon XXXX

    安装分页组件: 

    pip install django-pure-pagination 


    配置环境
    INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'users',
    'courses',
    'organization',
    'operation',
    'xadmin',
    'crispy_forms',
    'reversion',
    'captcha',
    'pure_pagination',// 这一项是分页


    在此之前,先看一下官文示例:
    # views.py
    from django.shortcuts import render_to_response
    
    from pure_pagination import Paginator, EmptyPage, PageNotAnInteger
    
    
    def index(request):
        # 尝试获取页数参数
        try:
            page = request.GET.get('page', 1)
        except PageNotAnInteger:
            page = 1
        # objects是取到的数据
        objects = ['john', 'edward', 'josh', 'frank']
    
        # 对取到的数据进行分页
        p = Paginator(objects, request=request)
        # 此时前台显示的就是我们此前获取的第几页的数据
        people = p.page(page)
    
        return render_to_response('index.html', {
            'people': people,
        }
    View Code
    总结,核心配置共总三步,第一步,得到数据,第二步 加入函数,第三步,转换成变量交给前端:
    以本文为例子,完整代码:
    # views.py
    from django.shortcuts import render_to_response
    
    from pure_pagination import Paginator, EmptyPage, PageNotAnInteger
    
    class OrgView(View):
        def get(self, request):
            # 查找所有的城市信息
            all_citys = CityDict.objects.all()
            # 查找所有的课程机构信息
            all_orgs = CourseOrg.objects.all()
            # 统计课程机构的数量
            org_nums = all_orgs.count()
            # 对课程机构进行分页,尝试获取前端get请求传递过来的page参数
            # 如果是不合法的配置参数则默认返回第一页
            try:
                page = request.GET.get('page', 1)
            except PageNotAnInteger:
                page = 1
            # 这里指从all_org中取五个出来,每页显示6个,这个字段必填
            p = Paginator(all_orgs, 6, request=request)
    
            orgs = p.page(page)
    
            return render(request, "org-list.html", {
                "all_citys": all_citys,
                "all_orgs": orgs,
                "org_nums": org_nums,
            })
    View Code
    然后前端就可以使用它自动放生的很多变量,需要注意这不是qert类型 不能用传统遍历,现在可以使用它生成的变量来操作分页上一页,当前页,,,
    <div class="pagination">
        {% if page_obj.has_previous %}
            <a href="?{{ page_obj.previous_page_number.querystring }}" class="prev">&lsaquo;&lsaquo; {% trans "previous" %}</a>
        {% else %}
            <span class="disabled prev">&lsaquo;&lsaquo; {% trans "previous" %}</span>
        {% endif %}
        {% for page in page_obj.pages %}
            {% if page %}
                {% ifequal page page_obj.number %}
                    <span class="current page">{{ page }}</span>
                {% else %}
                    <a href="?{{ page.querystring }}" class="page">{{ page }}</a>
                {% endifequal %}
            {% else %}
                ...
            {% endif %}
        {% endfor %}
        {% if page_obj.has_next %}
            <a href="?{{ page_obj.next_page_number.querystring }}" class="next">{% trans "next" %} &rsaquo;&rsaquo;</a>
        {% else %}
            <span class="disabled next">{% trans "next" %} &rsaquo;&rsaquo;</span>
        {% endif %}
    </div>
    View Code

     技术点二   静态路由关联模板

    数据库的图片地址路由:
    比如数据库存的是 org/07-06 这是一个相对地址,我们如何设置一个新的地址来配置默认为入一个XXXX的文件 使访问时 www://1270.0.0:8000/xxx/org/07/06就能访问到,首先要配一个新的url地址来区配

    from django.views.static import serve
    from senian.settings import MEDIA_ROOT
    re_path('media/(?P<path>.*)',serve, {"document_root": MEDIA_ROOT}),

    然后在配置文件配好路由静态:文件最后加上:

    MEDIA_URL='/media/'
    MEDIA_ROOT = os.path.join(BASE_DIR,'media')

    还在是模板加入渲染配置:

    TEMPLATES = [
    {
    'BACKEND': 'django.template.backends.django.DjangoTemplates',
    'DIRS': [os.path.join(BASE_DIR, 'templates')]
    ,
    'APP_DIRS': True,
    'OPTIONS': {
    'context_processors': [
    'django.template.context_processors.debug',
    'django.template.context_processors.request',
    'django.contrib.auth.context_processors.auth',
    'django.contrib.messages.context_processors.messages',
    'django.template.context_processors.media',
    'django.template.context_processors.media',

    ],
    },
    },
    ]

    如此也来,前端便可以使用示例:
    {% for course_org in all_orgs.object_list %}

    <dl class="des difdes">
    <dt>
    <a href="org-detail-homepage.html">
    <img width="200" height="120" class="scrollLoading" data-url="{{ MEDIA_URL }}{{ course_org.image }}"/>
    </a>
    </dt>
    <dd>
    注解:为什么data-url 这个属性,基实这是一个js 需要属性,这儿图片ajax 生成的,。。。。


    技术点三 内容筛选和关联查询
    前端中使用
    ?city={{ city.id }}  向服务器传入参数

    <div class="cont">
    <a href="?ct="><span class="active2">全部</span></a>
    {% for city in all_citys %}
    <a href="?city={{ city.id }}"><span class="">{{ city.name }}</span></a>

    {% endfor %}
    服务器接收后:
    先得到id ,查询 返回时带上 id

    all_orgs = CourseOrg.objects.all()
    if city_id:
    all_orgs = all_orgs.filter(city_id=int(city_id))

    筛好了,但是选中正在筛选好的样子没有出来,我们需要把当前ID 和 参数那个对比一下,如果是当前页,将样式设为选 中状态,所以得先向前端传入选 中Id

    中间略过很多代码、、、
    return render(request, "org-list.html", {
    "all_citys": all_citys,
    "all_orgs": orgs,
    "xall_orgs":all_orgs,
    "org_nums": org_nums,
    'city_id':city_id,
    })
    前端代码如下:请细看:

    <h2>所在地区</h2>
    <div class="more">更多</div>
    <div class="cont">
                       <a href="?ct="><span class="{% ifequal city_id '' %}active2"{% endifequal %}>全部</span></a>
                        {% for city in all_citys %}
    <a href="?city={{ city.id }}"><span class="{% ifequal city_id city.id|stringformat:"i" %}active2{% endifequal %}">{{ city.name }}</span></a>

    {% endfor %}


    技术点四 路由分发:

    url 太多的时候需要分在另一个app 处理,可以在主url 配置 分发“
    path("org/", include('organization.urls',namespace="org")),

    然后在次app下配置:红色部份为重点

    from django.urls import path, include,re_path
    from .views import OrgView

    urlpatterns = [
    path("list/", OrgView.as_view(),name = "org_list"),



    ]
    app_name = "organization"

    前端引用网址为:
    <li class="active" ><a href="{% url 'org:org_list' %}">授课机构</a></li>






















  • 相关阅读:
    EC中的QEvent
    Host是如何与EC通信的
    Python随笔之元组
    Vuex的基本使用
    运行新项目时先在项目目录下运行下面代码,安装依赖node_modules
    前端代码编辑时要注意大小写
    vue3.0的setup函数的使用
    angular写的一个导航栏
    Java数组的工具类
    eclipse格式化代码快捷键失效
  • 原文地址:https://www.cnblogs.com/fgxwan/p/9859342.html
Copyright © 2020-2023  润新知