创建个人博客(在文章的列表页,根据文章标题和文章内容实现搜索)

1. 在视图文件增加搜索表单:

在文章列表页的视图文件中,增加一个搜索表单,包含一个文本搜索框和一个提交按钮

<%= form_tag articles_path, method: :get do %><%= text_field_tag :title, params[:title], placeholder: "搜索标题" %><%= text_field_tag :content, params[:content], placeholder: "搜索内容" %><%= submit_tag "搜索" %>
<% end %>

上述代码中,使用form_tag方法生成一个表单,将表单关联到articles_path路由,并使用GET方法提交数据。文本框的name属性分别为:title和:content,用于与后端控制器进行参数传递。placeholder属性设置了文本框的占位符,方便用户输入搜索关键字。

例如:

 2. 在控制器中处理搜索请求:

在控制器的index action里面增加处理文章列表的请求。在index方法中,可以更具搜索表单提交的参数来构建查询条件,并将查询结果返回到视图中显示

def index@articles = Article.all@articles = @articles.where("title like ?", "%#{params[:title]}%") if params[:title].present?@articles = @articles.where("content like ?", "%#{params[:content]}%") if params[:content].present?
end

上述代码中,首先获取所有文章,然后根据搜索表单提交的参数来构建查询条件。如果搜索表单中的:title参数不为空,就使用where方法添加一个标题查询条件;如果搜索表单中的:content参数不为空,就使用where方法添加一个内容查询条件。最后,将查询结果赋值给@articles实例变量,用于在视图中显示搜索结果。

例如:

 3. 在视图中显示搜索结果:

在文章列表页的视图文件中,可以使用@article实例变量来显示搜索结果

<% @articles.each do |article| %><div class="article"><h2><%= article.title %></h2><p><%= article.content %></p></div>
<% end %>

上述代码中,使用each方法遍历@articles实例变量中的所有文章,并将每篇文章的标题和内容显示在一个div元素中。

例如:

 注:我这边只显示标题和创建时间

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/19345.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

海康视频插件VideoWebPlugin在vue中的实现

一,将js文件放在public文件下 二,在index中全局引入 三.在视频页面写方法,创建实例,初始化,我写的是1*4屏的 <template><!--视频窗口展示--><div idplayWnd classNameplayWnd refplayWnd styleleft: 0; bottom: 0;height: 902px;width: 60vw></div>&…

Eureka 学习笔记2:EurekaClient

版本 awsVersion ‘1.11.277’ EurekaClient 接口实现了 LookupService 接口&#xff0c;拥有唯一的实现类 DiscoveryClient 类。 LookupService 接口提供以下功能&#xff1a; 获取注册表根据应用名称获取应用根据实例 id 获取实例信息 public interface LookupService<…

HTTP杂谈之Referer和Origin请求头再探

一 关于Referer和Origin的汇总 1) 知识是凌乱的,各位看官看个热闹即可2) 内容不断更新1、理解有盲区,需要及时纠正2、内容交叉有重复,需要适当删减3、扩展视野3) 以下内容都与Referer和Origin请求头有关联 nginx防盗链 HTTP杂谈之Referrer-Policy响应头 iframe标签referre…

物联网|可变参数的使用技巧|不一样的点灯实验|访问外设的寄存器|操作寄存器实现点灯|硬件编程的基本流程-学习笔记(11)

文章目录 可变参数的使用技巧第三阶段-初级实验Lesson5:不一样的点灯实验---学习I/O的输出 ☆点灯的电路图分析1 一起看看点灯的电路图Tip1:另一种点灯的电路Tip1:如何访问外设的寄存器2 STM32F407中操作GPIO的方法 通过直接操作寄存器实现点灯实验Tip1:硬件编程的基本流程 2代…

HTML5+CSS3小实例:带标题的3D多米诺人物卡片

实例:带标题的3D多米诺人物卡片 技术栈:HTML+CSS 效果: 源码: 【html】 <!DOCTYPE html> <html><head><meta http-equiv="content-type" content="text/html; charset=utf-8"><meta name="viewport" content…

【信号去噪】基于马氏距离和EDF统计(IEE-TSP)的基于小波的多元信号去噪方法研究(Matlab代码实现)

&#x1f4a5;&#x1f4a5;&#x1f49e;&#x1f49e;欢迎来到本博客❤️❤️&#x1f4a5;&#x1f4a5; &#x1f3c6;博主优势&#xff1a;&#x1f31e;&#x1f31e;&#x1f31e;博客内容尽量做到思维缜密&#xff0c;逻辑清晰&#xff0c;为了方便读者。 ⛳️座右铭&a…

Linux 终端生成二维码

1、安装qrencode [rootnode1 script]# yum -y install qrencode2、输出正常的 [rootnode1 aihuidi]# echo https://blog.csdn.net/weixin_43822878?t1|qrencode -o - -t utf83、输出彩色的 [rootnode1 aihuidi]# qrencode -t utf8 -s 1 https://blog.csdn.net/weixin_4382…

魔法上网端口号被占用通过端口号找到进程并且杀掉进程随笔

Windows11系统由于魔法上网被异常关闭导致再次启动的时候报出端口号被占用问题记录以前忘记的通过端口杀掉进程相关操作。 在命令行&#xff08;winr,输入cmd&#xff09;中输入: netstat -ano 可以看到本机正在使用的ip地址和端口号如图&#xff1a; 在命令行&#xff08;wi…

算法题--找规律(构建乘积数组、剪绳子、圆圈中最后剩下的数字)

目录 找规律 构建乘积数组 原题链接 解析 核心思想 答案 剪绳子 原题链接 解析 核心思想 答案 圆圈中最后剩下的数字 原题链接 解析 核心思想 答案 找规律 需要通过列举多个示例&#xff0c;从多个示例的输入到输出中得到规律去普遍化。 构建乘积数组 给定…

【娱乐圈明星知识图谱2】信息抽取

目录 1. 项目介绍 2. 信息抽取介绍 3. ChatGPT 信息抽取代码实战 4. 信息抽取主逻辑 5. 项目源码 1. 项目介绍 利用爬虫项目中爬取的大量信息 【娱乐圈明星知识图谱1】百科爬虫_Encarta1993的博客-CSDN博客娱乐圈明星知识图谱百度百科爬虫百度百科爬虫百度百科爬虫百度百…

redisson分布式锁学习

什么是分布式锁? 当有多个线程并发访问同一共享数据时,如果多个线程同时都去修改这个共享数据,且修改操作不是原子操作,就很有可能出现线程安全问题&#xff0c;而产生线程安全问题的根本原因是缺乏对共享数据访问的同步和互斥。 为了解决这个问题&#xff0c;通常我们的做法…

【Golang 接口自动化07】struct转map的三种方式

目录 背景 struct转map 使用json模块 使用reflect模块 使用第三方库 测试 总结 资料获取方法 背景 我们在前面介绍过怎么使用net/http发送json或者map数据&#xff0c;那么它能不能直接发送结构体数据呢&#xff1f;我们今天一起来学习结构体struct转map的三种方法&am…

PHM的设备故障模型如何构建?

预测性维护与健康管理&#xff08;Prognostics Health Management&#xff0c;PHM&#xff09;是现代工业中的一个关键概念&#xff0c;它旨在通过使用数据和先进的分析技术&#xff0c;实现设备故障的早期预测和预防&#xff0c;从而最大限度地提高设备的可用性和可靠性。而在…

如何运行疑难解答程序来查找和修复Windows 10中的常见问题

如果Windows 10中出现问题&#xff0c;运行疑难解答可能会有所帮助。疑难解答人员可以为你找到并解决许多常见问题。 一、在控制面板中运行疑难解答 1、打开控制面板&#xff08;图标视图&#xff09;&#xff0c;然后单击“疑难解答”图标。 2、单击“疑难解答”中左上角的…

大牛练成记:用JavaScript徒手写出一个日期选择插件

&#x1f3c6;作者简介&#xff0c;黑夜开发者&#xff0c;全栈领域新星创作者✌&#xff0c;阿里云社区专家博主&#xff0c;2023年6月csdn上海赛道top4。 &#x1f3c6;本文已收录于专栏&#xff1a;100个JavaScript的小应用。 &#x1f389;欢迎 &#x1f44d;点赞✍评论⭐收…

【C语言】初识指针

【C语言】初识指针 一、指针是什么&#xff1f;二、指针和指针类型1. 指针-整数2. 指针的解引用三、野指针1.野指针成因2 .如何规避野指针四、指针运算五、二级指针七、指针数组 &#x1f388;个人主页&#xff1a;库库的里昂&#x1f390;CSDN新晋作者&#x1f389;欢迎 &…

ansible安装及rhel8仓库配置

目录 一、本地仓库 问题&#xff1a; 解决&#xff1a; 1.创建一个仓库&#xff1a; 内容&#xff1a; 2.挂载&#xff1a; 挂载&#xff1a; 测试&#xff1a; 3.或者直接使用阿里云的源 二.配置ansible仓库 1.下载&#xff1a; 2.检查 一、本地仓库 问题&#xff1a; 当…

vue3+uniapp自定义tabbar

首先把tabbar中的元素写在一个list中用v-for进行渲染 用一个interface进行定义接口&#xff0c;这样别人在review你的代码就可以清晰知道你的tabbar包含什么元素。 利用typescript特性进行类型定义&#xff0c;可以省去很多麻烦 import { reactive } from "vue" imp…

docker快速入门

文章目录 简介&#xff1a;组成&#xff1a;安装&#xff1a;运行&#xff1a;原理&#xff1a;常用命令&#xff1a;1.帮助启动类命令2.镜像命令3.容器命令4.命令交互图5.将镜像打包发布到阿里云1.将本地容器制作为镜像2.登录阿里云3.创建个人实例4.创建镜像仓库5.将镜像推送到…

马上解锁 StarRocks 存算分离,降本增效无需等!

StarRocks 于 4 月底正式发布了 3.0 版本&#xff0c;该里程碑版本带来了大家期盼已久的新特性--存算分离。此新功能一推出&#xff0c;立即受到社区热情追捧&#xff0c;用户纷纷开始在自己的业务中评估和测试存算分离效果。从芒果TV、聚水潭、网易邮箱、浪潮、天道金科等数十…