Django网络应用实践（3）-button按钮点击事件+超链接跳转及分页+路由管理

目录

一、button按钮点击事件

二、超链接跳转

1、超链接跳转

2、分页

（1）、前端代码

（2）、后端代码

三、路由管理

1、一级路由

2、二级路由

---

一、button按钮点击事件

        想要实现点击button按钮后触发某个事件，这就得使用js的知识，将按钮与具体的某个事件绑定，当点击该按钮时触发这一事件。

        具体代码如下：

html的代码中，需要对button中id的参数进行明确，id明确之后才能绑定事件。

op1等是后台传来的参数，用来对点击后的按钮进行高亮提醒。

 <div class="container">
            <button type="button" id="button1"  class="{{ op1 }} btn btn-info">原始数据</button>
            <button type="button" id="button2"  class="{{ op2 }} btn btn-info">分析数据</button>
            <button type="button" id="button3"  class="{{ op3 }} btn btn-info">点赞Top10</button>
            <button type="button" id="button4"  class="{{ op4 }} btn btn-info">评分Top10</button>
    </div>

         js的代码中，需要明确的是点击该按钮后所调用的路由，此时的路由不是一个具体的页面，而是在后台中具体处理某一事件的一个自定义函数

$('#button1').click(function () {
        location.href = '/ly/data'
    })
    $('#button2').click(function () {
        location.href = '/ly/fen_data'
    })
    $('#button3').click(function () {
        location.href = '/ly/dian_data'
    })
    $('#button4').click(function () {
        location.href = '/ly/score_data'
    })

二、超链接跳转

1、超链接跳转

<a href="/ly/lishi">

        与button跳转一样，这里跳转的还是一个执行某个功能的一个自定义函数，这个函数会负责将静态页面渲染出来。

2、分页

（1）、前端代码

<div class="temp">
        <ul class="pagination">
            <li><a href="/ly/data/?page=1">首页</a></li>
            {% if messages.has_previous %}
                <li><a href="/ly/data/?page={{ messages.previous_page_number }}">上一页</a></li>
            {% endif %}

            {% for num in messages.paginator.page_range %}
                <li><a href="/ly/data/?page={{ num }}">{{ num }}</a></li>
            {% endfor %}

            {% if messages.has_next %}
                <li><a href="/ly/data/?page={{ messages.next_page_number }}">下一页</a></li>
            {% endif %}
            <li><a href="/ly/data/?page={{ messages.paginator.num_pages }}">尾页</a></li>
        </ul>
    </div>

（2）、后端代码

def data(res):
    messages = table1.objects.all()  # 获取全部数据
    limit = 20
    paginator = Paginator(messages, limit)  # 按每页10条分页
    page = res.GET.get('page', '1')  # 默认跳转到第一页
    result = paginator.page(page)
    return render(res, 'data.html', {'messages': result,'op1':'active'})

三、路由管理

        路由管理最好是分级管理，不要将所有的路由写在一个文件中。

1、一级路由

        我的一级路由写在创建项目后自动生成的urls.py 中

from django.contrib import admin
from django.urls import path,include
from app1.views import sear_index

urlpatterns = [
    path('admin/', admin.site.urls),
    path('ly/',include('app1.urls')),
    path('',sear_index)
]

2、二级路由

        我的二级路由写在app目录中的urls.py中，这个文件需要自己创建

        view是视图文件，我将所有的路由所使用的自定义函数全部写在这个文件之中。

        re_path是带有正则表达式作用的，可以使用正则表达式的一些写法来识别对应的一些路由。

from django.urls import path, re_path
from app1 import views

urlpatterns = [
    path('sear', views.sear),
    path('index', views.index),
    path('data', views.data),
    path('del_', views.del_),
    path('ly/sear', views.sear),
    re_path(r'^data', views.data),
    re_path(r'^fen_data', views.data_fen),
    path('dian_data', views.data_dian),
    path('score_data', views.data_score),
    path('lishi', views.lishi),
    path('seek', views.seek),
    re_path(r'^lishi', views.lishi),
    path('sousuo', views.sousuo),
]