django关于在前端中添加搜索功能的方法

django关于在前端中添加搜索功能的方法

  • 首先需要在url.py中定义路由:
re_path(r'^search_pdaq/', pdaq_search)
  • 定义好路由之后,在对应app中的 views.py 编写逻辑代码:
def pdaq_search(request, ):
    if request.method == 'GET':
        pdaq_ip = request.GET.get('pdaq_ip', '')
        try:
            pdaq_isinstant = Message.objects.get(IP地址__icontains=pdaq_ip)
            # print('******************', pdaq_isinstant)
            # if pdaq_isinstant:
            context = {
                'pdaq_isinstant': pdaq_isinstant,
            }
            return render(request, 'detail.html', context=context)
        except Exception as search_error:
            print(search_error)

** 这里重点说一下,这其中pdaq_ip = request.GET.get('pdaq_ip', '') 这句代码中的参数名称和你前端 HTML 文档中 input 标签中的 name 属性相关,当你name属性中定义了什么名字,则在该语句中传入什么参数 **

  • 到这步后端需要写的东西基本都已经完成,下一步则需要在 HTML 中编写相关的东西
  • 首先是先在首页中编写搜索框,直接上代码:
<form role="search" method="get" id="searchform" action="search_pdaq/">
	<input type="search" name="pdaq_ip" placeholder="搜索" value="{{ pdaq_ip }}">
<button type="submit"><span class="ion-ios-search-strong">搜索</span></button>
</form>
  • 这里定义好以后,你在前端搜索框中的东西,就会根据 action 属性中填写的 url 将请求传递到后端,上面的 get 方法,则可以获取到你在表单中填入的数据,至此已经查询到你需要得到的数据了
  • 接下来,你需要新建一个 HTML 文件,然后将查询到的数据,通过 render 方法,将数据返回到客户端,显示给用户
  • 0
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
1.项目代码均经过功能验证ok,确保稳定可靠运行。欢迎下载体验!下载完使用问题请私信沟通。 2.主要针对各个计算机相关专业,包括计算机科学、信息安全、数据科学与大数据技术、人工智能、通信、物联网等领域的在校学生、专业教师、企业员工。 3.项目具有丰富的拓展空间,不仅可作为入门进阶,也可直接作为毕设、课程设计、大作业、初期项目立项演示等用途。 4.当然也鼓励大家基于此进行二次开发。在使用过程,如有问题或建议,请及时沟通。 5.期待你能在项目找到乐趣和灵感,也欢迎你的分享和反馈! 【资源说明】 基于Django后端+Vue前端+阿里云数据库实现完整的书店系统源码+详细部署说明.zip 项目简介: 实现一个提供网上购书功能的网站。 网站支持书商在上面开商店,购买者可以通过网站购买。 买家和卖家都可以注册自己的账号。 一个卖家可以开一个或多个网上商店 买家可以为自已的账户充值,在任意商店购买图书。 支持下单->付款->发货->收货 流程。 支持将喜欢的书本加入购物车 支持修改个人信息、修改密码、修改头像 支持修改店铺信息、删除店铺 支持添加书本、下架书本、上架书本、修改书本价格 支持买家查看所有订单,店铺查看所有店铺订单 支持买家取消订单,订单15分钟内未付款自动失效 支持全局搜索书本,搜索书店 支持店铺内搜索书本 支持首页推荐(最热店铺、最热书本、最近上新书本) 支持店内推荐(本店最热书本、最近上新书本) 项目采用Python Django框架编写后端所有代码(包含测试用例),总共实现38个接口,140+测试用例(均通过),项目代码总覆盖率90%+(其接口覆盖率70%+),并包含Vue前端实现,前后端均纯原创!是一个完全可以上线使用的项目! 需求分析: (详情见需求分析.docx) API定义: (详情见API_doc文件夹) 前端设计: 1、 前端框架 ·框架:Vue ·脚手架:Vue-cli 2、 编程语言 ·javascript ·HTML ·css 3、 第三方插件 ·jquery ·bootstrap 4、 实现Vue组件(components) ·App.vue ·register.vue:用户注册 ·login.vue:用户登录 ·addstore.vue:新建店铺 ·balance.vue:查看余额/余额充值 ·book.vue:书本详情页 ·bookresult.vue:书本查询结果 ·buystore.vue:店铺详情页 ·information.vue:个人信息 ·mycart.vue:我的购物车 ·myorder.vue:我的订单 ·mystore.vue:我的店铺 ·order.vue:生成订单 ·orderinfo.vue:订单详情页 ·password.vue:修改密码 ·store.vue:店铺主页 ·storeorderinfo.vue:店铺订单详情页 ·storeorders.vue:店铺订单 ·storeresult.vue:店铺查询结果 ·TagsInput.vue:标签组件(book.vue的子组件) ·tmp.vue:间跳转页 ·unregister.vue:注销用户 数据库设计: 项目需要有买家和卖家的区别,但是实际上他们可以由同一个表存储,所以开始时设计数据库就有两种结构,一为(User to User 设计),另一为(Seller to Buyer 设计),为方便前端设计以及后端架构,采用User to User设计。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值