Redis 缓存实现存储和读取历史搜索关键字的操作方法
一、本案例涉及知识
- Layui
- Redis
- Vue.js
- jQuery
- Ajax
二、效果图
三、功能实现
（一）使用 Layui 的样式构建页面
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Redis应用 - 搜索历史</title> <!-- 引入 Layui CSS --> <link rel="stylesheet" href="css/layui.css" rel="external nofollow" > </head> <body> <div class="layui-form" style="width: 50%;margin-top: 20px;" id="app"> <div class="layui-form-item"> <label class="layui-form-label"></label> <div class="layui-input-block"> <input type="text" class="layui-input"> </div> </div> <div class="layui-form-item"> <label class="layui-form-label"></label> <div class="layui-input-block"> <button class="layui-btn">搜索</button> </div> </div> <div class="layui-form-item"> <label class="layui-form-label"></label> <div class="layui-input-block"> 搜索历史 </div> </div> <div class="layui-form-item"> <label class="layui-form-label"></label> <div class="layui-input-block"> <span class="layui-badge layui-bg-gray" style="margin-left: 5px;">PHP</span> <span class="layui-badge layui-bg-gray" style="margin-left: 5px;">JavaScript</span> </div> </div> </div> <!-- 引入 jQuery --> <script src="js/jquery-3.5.1.min.js"></script> <!-- 引入 Layui JS --> <script src="js/layui.js"></script> <!-- 引入 Vue.js --> <script src="js/vue.min.js"></script> </body> </html>
（二）点击搜索时储存本次搜索的关键字
给文本框添加 Vue 双向绑定
<input type="text" class="layui-input" v-model="keyword">
给搜索按钮添加点击事件
<button class="layui-btn" @click="addHistory()">搜索</button>
<script type="text/javascript">
var vm = new Vue({
el: "#app",
data: {
keyword: ""
},
methods: {
addHistory: function () {}
}
});
</script>
当文本框被输入内容后，输入的内容将绑定给 Vue 中 data 的 keyword 字段。
点击搜索按钮时，触发 addHistory() 函数，此函数将输入的内容发送给 PHP ，PHP 操作 Redis 将内容进行缓存。
addHistory() 函数中：
addHistory: function () {
$.ajax({
url: "history.php",
type: "GET",
data: {type: 'add', keyword: this.keyword},
success: function () {
// 请求成功后刷新本页面
window.location.reload();
}
});
}
data 中传值两个字段，type 表示本次请求的类型，其中 add 代表往缓存中添加关键字，read 代表从缓存中读取关键字。
history.php 中：
<?php
$redis = new Redis();
$con = $redis->connect('localhost', 6379);
if (!$con) {
echo 'Redis连接失败';
}
// 接收请求类型参数的值
$type = $_GET['type'];
// 模拟用户的id，因为每个用户搜索的内容不同，需要进行区分
$user_id = 'user-1';
// 如果请求类型为添加
if ($type == 'add') {
// 接收输入的关键字
$keyword = $_GET['keyword'];
// 读取当前用户队列中存储的关键字个数，即队列的长度
$len = $redis->llen($user_id);
// 如果个数大于等于 5 个，则删除最开始搜索的关键字，加入最新搜索的关键字
if ($len >= 5) {
// 移除队列左侧的第一个关键字
$redis->lPop($user_id);
// 在队列右侧加入新的关键字
$redis->rPush($user_id, $keyword);
} else {
// 不多于 5 个直接在队列右侧加入新的关键字
$redis->rPush($user_id, $keyword);
}
}
（三）读取并展示历史搜索的关键字
第二步中加入了当请求添加缓存成功后会刷新页面的代码，
window.location.reload();
在这个基础上，我们希望刷新的同时执行另一个 Ajax 请求从 PHP 中操作 Redis 将所有的历史搜索关键字读取出来并在页面中展示。
所以在 Vue 中加入页面加载完成自动调用getHistory()函数：
methods: {
getHistory: function () {},
addHistory: function () {
$.ajax({
url: "history.php",
type: "GET",
data: {type: 'add', keyword: this.keyword},
success: function () {
window.location.reload();
}
});
}
},
// 页面加载完成自动调用 getHistory()
created () {
this.getHistory();
}
getHistory()函数中：
getHistory: function () {
$.ajax({
url: "history.php",
type: "GET",
data: {type: 'read'},
success: function (r) {
// JSON.parse(r) 将读取到的 json 字符串转为 json 对象
vm.history = JSON.parse(r);
}
});
}
data 中传值一个字段，read 代表从缓存中读取关键字，请求成功后将返回的结果赋值给 Vue 中 data 的 history 字段。
history.php 中添加读取操作：
// 如果请求类型为读取
if ($type == 'read') {
// 从队列左侧依次取出 5 个关键字
$history = $redis->lrange($user_id, 0, 4);
// 转为 json 格式的数据并输出到页面中供 Ajax 使用
echo json_encode($history, JSON_UNESCAPED_UNICODE);
}
将读取到的数据成功赋值给 Vue 中 data 的 history 字段后，页面中即可将数据循环输出展示：
<span class="layui-badge layui-bg-gray" v-for="item in history" style="margin-left: 5px;">{{item}}</span>
连贯过程为：用户输入关键字并点击搜索按钮，Ajax 请求 PHP 操作 Redis 进行数据缓存且缓存成功后刷新页面，页面刷新后自动调用函数执行 Ajax 请求 PHP 操作 Redis 进行缓存数据的读取并返回于页面中同时进行渲染展示。
到此这篇关于Redis 缓存实现存储和读取历史搜索关键字的文章就介绍到这了,更多相关Redis 缓存实现存储和读取关键字内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！
相关推荐
-
在Java中使用redisTemplate操作缓存的方法示例
背景 在最近的项目中,有一个需求是对一个很大的数据库进行查询,数据量大概在几千万条.但同时对查询速度的要求也比较高. 这个数据库之前在没有使用Presto的情况下,使用的是Hive,使用Hive进行一个简单的查询,速度可能在几分钟.当然几分钟也并不完全是跑SQL的时间,这里面包含发请求,查询数据并且返回数据的时间的总和.但是即使这样,这样的速度明显不能满足交互式的查询需求. 我们的下一个解决方案就是Presto,在使用了Presto之后,查询速度降到了秒级.但是对于一个前端查询界面的交互式查询来
-
MySQL和Redis实现二级缓存的方法详解
redis简介 Redis 是完全开源免费的,遵守BSD协议,是一个高性能的key-value数据库 Redis 与其他 key - value 缓存产品有以下三个特点: Redis支持数据的持久化,可以将内存中的数据保存在磁盘中,重启的时候可以再次加载进行使用 Redis不仅仅支持简单的key-value类型的数据,同时还提供list,set,zset,hash等数据结构的存储 Redis支持数据的备份,即master-slave模式的数据备份 优势 性能极高 - Redis能读的速度是110
-
mybatis plus使用redis作为二级缓存的方法
建议缓存放到 service 层,你可以自定义自己的 BaseServiceImpl 重写注解父类方法,继承自己的实现.为了方便,这里我们将缓存放到mapper层.mybatis-plus整合redis作为二级缓存与mybatis整合redis略有不同. 1. mybatis-plus开启二级缓存 mybatis-plus.configuration.cache-enabled=true 2. 定义RedisTemplate的bean交给spring管理,这里为了能将对象直接存取到redis中,
-
详解Java在redis中进行对象的缓存
Java在redis中进行对象的缓存一般有两种方法,这里介绍序列化的方法,个人感觉比较方便,不需要转来转去. 一.首先,在存储的对象上实现序列化的接口 package com.cy.example.entity.system; import java.util.List; import com.baomidou.mybatisplus.annotations.TableField; import com.baomidou.mybatisplus.annotations.TableName; im
-
Redis 缓存实现存储和读取历史搜索关键字的操作方法
一.本案例涉及知识 Layui Redis Vue.js jQuery Ajax 二.效果图 三.功能实现 (一)使用 Layui 的样式构建页面 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Redis应用 - 搜索历史</title> <!-- 引入 Layui CSS --> <link rel="style
-
redis缓存延时双删的原因分析
缓存为啥是删除,而不是更新? 如果是更新,存在分布式事务问题,可能出现修改了缓存,数据库修改失败的情况.只是删除缓存的话,就算数据库修改失败,下次查询会直接取数据库的数据,也不会出现脏数据. 延时双删是什么? 就是在增删改某实体类的时候,要对该实体类的缓存进行清空,清空的位置在数据库操作方法的前后. 采用反证法 只先删  只后删 结论 从而得出 前删和后删都有问题.所以采用延时双删的策略 思考2:为啥是延时 依然是反证法.下图这情况是双删依然存在旧缓存的情况,延时是确保 修改数据库->清
-
详解redis缓存与数据库一致性问题解决
数据库与缓存读写模式策略 写完数据库后是否需要马上更新缓存还是直接删除缓存? (1).如果写数据库的值与更新到缓存值是一样的,不需要经过任何的计算,可以马上更新缓存,但是如果对于那种写数据频繁而读数据少的场景并不合适这种解决方案,因为也许还没有查询就被删除或修改了,这样会浪费时间和资源 (2).如果写数据库的值与更新缓存的值不一致,写入缓存中的数据需要经过几个表的关联计算后得到的结果插入缓存中,那就没有必要马上更新缓存,只有删除缓存即可,等到查询的时候在去把计算后得到的结果插入到缓存中即可. 所
-
redis缓存存储Session原理机制
目录 基于 Redis 存储 Session 首先安装 redis 存储引擎的包 设置session过期时间 分布式获取Session:(redis) 基于 Redis 存储 Session 如果我们想将 session 数据保存到 redis 中,只要将 session 的存储引擎改成 redis 即可. 使用 redis 作为存储引擎的例子: 首先安装 redis 存储引擎的包 go get github.com/gin-contrib/sessions/redis // 初始化基于 red
-
Redis缓存-序列化对象存储乱码问题的解决
使用Redis缓存对象会出现下图现象: 键值对都是乱码形式. 解决以上问题: 如果是xml配置的 我们直接注入官方给定的keySerializer,valueSerializer,hashKeySerializer即可: <bean id="apiRedisTemplate" class="org.springframework.data.redis.core.RedisTemplate" p:connection-factory-ref="apiC
-
Redis缓存及热点key问题解决方案
今天又学到了很多,感觉雪崩和穿透很有意思理解起来也比较清晰,然后我搜索了一些资料,给自己做一个普及 我们通常使用 缓存 + 过期时间的策略来帮助我们加速接口的访问速度,减少了后端负载,同时保证功能的更新 缓存穿透 缓存系统,按照KEY去查询VALUE,当KEY对应的VALUE一定不存在的时候并对KEY并发请求量很大的时候,就会对后端造成很大的压力. (查询一个必然不存在的数据.比如文章表,查询一个不存在的id,每次都会访问DB,如果有人恶意破坏,很可能直接对DB造成影响.) 由于缓存不命中,每次
-
详解Redis 缓存删除机制(源码解析)
删除的范围 过期的 key 在内存满了的情况下,如果继续执行 set 等命令,且所有 key 都没有过期,那么会按照缓存淘汰策略选中的 key 过期删除 redis 中设置了过期时间的 key 会单独存储一份 typedef struct redisDb { dict *dict; // 所有的键值对 dict *expires; //设置了过期时间的键值对 // ... } redisDb; 设置有效期 Redis 中有 4 个命令可以给 key 设置过期时间,分别是 expire pexpi
-
浅谈MySQL与redis缓存的同步方案
本文介绍MySQL与Redis缓存的同步的两种方案 方案1:通过MySQL自动同步刷新Redis,MySQL触发器+UDF函数实现 方案2:解析MySQL的binlog实现,将数据库中的数据同步到Redis 一.方案1(UDF) 场景分析:当我们对MySQL数据库进行数据操作时,同时将相应的数据同步到Redis中,同步到Redis之后,查询的操作就从Redis中查找 过程大致如下: 在MySQL中对要操作的数据设置触发器Trigger,监听操作 客户端(NodeServer)向MySQL中写入数
-
浅谈Redis缓存击穿、缓存穿透、缓存雪崩的解决方案
目录 前言 Redis缓存使用场景 Redis缓存穿透 解决方案 1.对空值缓存 2.添加参数校验 3.采用布隆过滤器 Redis缓存雪崩 解决方案 1.大量热点数据同时失效带来的缓存雪崩问题 2. 服务降级 3. Redis 缓存实例发生故障宕机带来的缓存雪崩问题 Redis缓存击穿 解决方案 1. 热key不过期 2. 分布式锁 总结 缓存击穿 缓存穿透 缓存雪崩 前言 在日常的项目中,缓存的使用场景是比较多的.缓存是分布式系统中的重要组件,主要解决在高并发.大数据场景下,热点数据访问的性能
-
浅谈一下如何保证Redis缓存与数据库的一致性
目录 1.四种同步策略: 2.更新缓存还是删除缓存 2.1 更新缓存 2.2 删除缓存 3.先操作数据库还是缓存 3.1 先删除缓存再更新数据库 3.2 先更新数据库再删除缓存 最终结论: 4.延时双删 4.1 采用读写分离的架构怎么办? 5.利用消息队列进行删除的补偿 1.四种同步策略: 想要保证缓存与数据库的双写一致,一共有4种方式,即4种同步策略: 先更新缓存,再更新数据库: 先更新数据库,再更新缓存: 先删除缓存,再更新数据库: 先更新数据库,再删除缓存. 从这4种同步策略中,我们需要作