django获取div id_django搜索功能

实现步骤:

1.创建项目;

2.创建app;

3.创建数据库;

4.创建路径;

5.写视图文件;

6.写html文件;

1.创建项目

有两种,一种是在cmd端输入

django-admin startproject 项目名字

另一种是在pycharm里直接创造项目,这个之前介绍了。

ee009a56eda5c0f4a0d3948d41c43a96.png

这样就创建好了,接下来创建app

2.创建app

直接在终端输入

python manage.py startapp app名字

创建完之后要在setting.py文件设置中更改配置。找到INSTALLED_APPS变量,在里面加入app名称。

20c77dff86299fb5dd3e17ee05e85477.png

3.创建数据库

在model.py文件写入自己想创建的数据类型,这里采用到ORM模式,不会的自己查一下。我的数据如下:

from django.db import models# Create your models here.class my_scearch(models.Model):    title=models.CharField(verbose_name="title",max_length=50)    remarks=models.TextField(verbose_name="remarks",max_length="100")    def __str__(self):        return self.title

1392f475b52fa767e0debcc4e3e90eec.png

4.创建路径

路径当然要找我们的路径文件url.py。在里面首先导入视图函数,进行写入路经,如下:

urlpatterns = [    path('admin/', admin.site.urls),    path('',views.index_scearch,name="index_scearch"),    path('addnum/',views.add_index,name="add_index"),    path('scearch/',views.search,name='scearch')]

在这里第一个路径是数据分页展示,第二个是增加数据,第三个是搜索功能,如果想要学搜索功能的,直到搜索功能看。

5409f3d31a26b0d60d90a9b4c0cecd37.png

5.视图文件

写视图文件当然找view.py文件,因为路径写了三个不同的路径,视图函数也写入了三个功能的,分别是数据分页展示、添加数据、搜索功能。

1.首先看下第一个功能:数据分页展示

from django.shortcuts import render,redirect,reversefrom myscearch import modelsfrom django.core.paginator import PageNotAnInteger,Paginator,EmptyPagedef index_scearch(request):    allnum = models.my_scearch.objects.all()    pagetion=Paginator(allnum,5)    pagelist=request.GET.get('page')    try:        context=pagetion.page(pagelist)    except PageNotAnInteger:        context=pagetion.page(1)    except EmptyPage:        context=pagetion.page(pagetion.num_pages)    contexts={        "allnum":allnum,        "context":context,    }    return render(request,"base.html",context=contexts)

e985e332041ba827ca9d50cb2c30654a.png

首先导入数据库,将数据库数据导入出来,还有就是分页模块

在函数里将数据从数据库导入出来付给变量allnum = models.my_scearch.objects.all(),还有就是用分页模块,将数据库放入放入模块中,5就是数据5个为一页, pagetion=Paginator(allnum,5),付给变量,然后获取html的page页码,其余就是将数据页面提取出来。

2.增加数据

from django.shortcuts import render,redirect,reversedef add_index(request):    if request.method=="POST":        title=request.POST.get("title")        remarks=request.POST.get("remarks")        models.my_scearch.objects.create(title=title,remarks=remarks)        return redirect(reverse("index_scearch"))    else:        return render(request,"add.html")

e7cb6401e8bf2c00120546a905b214d3.png

首先就是判断增加提交方式是否为post,如果是post,将提交的数据获取到,然后加导数据库中,返回主页,如果不是post返回增加页面。

3.搜索数据展示

from django.contrib import messagesfrom django.db.models import Qdef search(request):    q=request.GET.get('q')    if not q:        error_msg='请输入关键词'                messages.add_message(request,messages.ERROR,error_msg,extra_tags='danger')        return redirect('index_scearch')    post_list=models.my_scearch.objects.filter(Q(title__icontains=q))    pagetion=Paginator(post_list,5)    pagelist = request.GET.get('pages')    try:        context = pagetion.page(pagelist)    except PageNotAnInteger:        context = pagetion.page(1)    except EmptyPage:        context = pagetion.page(pagetion.num_pages)    contexts = {        "post_list":post_list,        "context": context,    }    return render(request,'show.html',context=contexts)

在这里面我导入了两个模块,messages模块是将数据传递作业,Q是将数据过滤作用。首先获取q名字的值,将用户输入的值获取到,如果没有获取到的话就将数据返回请输入关键字,然后返回首页。如果获取到了就用Q(title__icontains=q)标题过滤一下。后面的就是将数据筛选的数据分页展示了一下。

956f8b4aa803a150b66bcf300ad79439.png

6.页面展示

当然页面展示也分了三个模块,首页展示、增加数据、搜索展示

1.首页展示

<html lang="en"><head>    <meta charset="UTF-8">    <title>首页展示title>    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js">script>    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js">script><style>   .div1{       float: right;   }style>head><body><div class="container">    <ul class="nav nav-pills">    <li class="active"><a href="{% url "add_index" %}">增加数据a>li>ul><div class="div1">    <form rel="search" method="get" action="{% url "scearch" %}" id="searchbar">        <input type="search" name="q" placeholder="搜索" required>        <button type="submit">搜索<span class="ion-ios-search-strong">span>button>    form>div>    <table class="table">        <thead>        <tr>            <th>主题th>            <th>介绍th>        tr>        {% for i in context.object_list %}            <tr class="table">            <td>{{ i.title }}td>            <td>{{ i.remarks }}td>            tr>        thead>        {% endfor %}    table> <div>    <ul class="pagination">        {% if  context.has_previous %}            <li class="page_liem"><a class="page_link" href="?page={{ context.previous_page_number }}">上一页a>li>        {% endif %}        {% if context.has_next %}             <li class="page_liem"><a class="page_link" href="?page={{ context.next_page_number}}">下一页a>li>        {% endif %}    ul>div>div>body>html>

在这里我用了bookstrap方法,使用了其中的container,pagination,table方法。这里的用form提交搜索功能,切记有个name=q,方便与提交不会错。下来就是将数据展示在页面上,将数据在先for循环出来,展示再也页面上。还有最后一个就是将数据分页展示出来。

2.增加数据

在数据增加时会有一个页面转跳出来,就是增加的在这个页面。

<html lang="en"><head>    <meta charset="UTF-8">    <title>增加数据title>    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js">script>    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js">script>head><body><div class="container">    <form method="post" action="{% url "add_index" %}">        <p>主题:<input type="text" name="title">p>        <p>想法:<input type="text" name="remarks">p>        <button type="submit">提交button>        {% csrf_token %}    form>div>body>html>

这个比较简单一点光一个提交增加的数据。

3.主要说的还是搜索

<html lang="en"><head>    <meta charset="UTF-8">    <title>搜索内容title>    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js">script>    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js">script><style>   .div1{       float: right;   }style>head><body><div class="container"><ul class="nav nav-pills">    <li class="active"><a href="{% url "index_scearch" %}">首页展示a>li>ul><div class="div1">    <form rel="search" method="get" action="{% url "scearch" %}" id="searchbar">        <input type="search" name="q" placeholder="搜索" required>        <button type="submit">搜索<span class="ion-ios-search-strong">span>button>    form>div>    <table class="table">        <thead>        <tr>            <th>主题th>            <th>介绍th>        tr>        {% for i in context.object_list %}            <tr class="table">            <td>{{ i.title }}td>            <td>{{ i.remarks }}td>            tr>        thead>        {% endfor %}    table> <div>    <ul class="pagination">        {% if  context.has_previous %}            <li class="page_liem"><a class="page_link" href="/scearch/?q=django&pages={{ context.previous_page_number }}">上一页a>li>        {% endif %}        {% if context.has_next %}             <li class="page_liem"><a class="page_link" href="/scearch/?q=django&pages={{context.next_page_number}}">下一页a>li>        {% endif %}    ul>div>div>body>html>

为了使搜索展示的页面继续搜索,就将搜索页面展示功能在展示了一遍。

看下效果

c5628f60e3a5efdb93f5ed42eeb97941.png

b55380dcf741299e0fd28750783001e0.png

08b47beab38b635a23e195eafc07a98e.png

a033264b49e5b4d0faba8ed0e786391e.png

还有不懂的评论下方。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值