案例背景
电商首页通常都有广告轮播图，轮播图数据一般需要通过后台接口获得，当并发量较大时会给服务器带来压力。
一般的解决方案是将轮播图数据缓存到Redis中，这样就能减少对数据库的访问。
我们访问Redis也需要使用Java，Java项目部署在Tomcat中，Tomcat服务器也会面对并发量大的压力。
Nginx服务器的并发性能要远远高于Tomcat，在Nginx中使用Lua脚本就能实现MySQL和Redis的读写，绕过Tomcat，大大提高首页的并发性能。
案例需要使用OpenResty，参考：https://blog.csdn.net/u013343114/article/details/123991729
开发步骤
分为两大步骤：
1、缓存预热
2、缓存读取
缓存预热
使用Lua读取MySQL中的轮播图数据，保存到Redis中
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-TPCS8uek-1655367724026)(Lua优化首页.assets/1655365058445.png)]](https://img-blog.csdnimg.cn/092d981d6ca648bea925acd34249acec.png)
ad_update.lua
-- 获得uri中的sid参数值
local uri_args = ngx.req.get_uri_args()
local sid = uri_args["sid"]
-- 连接mysql
local mysql = require "resty.mysql"
local db = mysql:new()
db:set_timeout(1000)
local ok, err = db:connect{
host = "127.0.0.1",
port = 3306,
database = "edu_ad",
user = "root",
password = "123456",
charset = "utf8"
}
if not ok then
ngx.say("failed to connect: ", err)
return
end
ngx.say("connected to mysql.")
-- 按区域编号查询轮播图表
local res, err = db:query("select * from promotion_ad where space_id="..sid)
if not res then
ngx.say("bad result: ", err)
return
end
db:close()
-- 结果转换为json
local cjson = require "cjson"
ngx.say("res->",cjson.encode(res))
-- 连接redis
local redis = require "resty.redis"
local red = redis:new()
red:set_timeout(2000)
local ok,err = red:connect("127.0.0.1",6379)
if not ok then
ngx.say("connect error: ", err)
return
end
-- 保存到reids
red:set("ad_space_"..sid,cjson.encode(res))
red:close()
ngx.say("updated redis")
将ad_update.lua保存到openresty/nginx/conf/lua目录下
配置nginx.conf
server {
listen 8080;
default_type 'applicaiton/json;charset=utf8';
charset utf-8;
location /ad_update{
default_type text/html;
content_by_lua_file conf/lua/ad_update.lua;
}
}
访问测试
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-16RM0inJ-1655367724042)(Lua优化首页.assets/1655366388575.png)]](https://img-blog.csdnimg.cn/650d3822f3094d4f943c1d9bd22479cd.png)
缓存读取
分为两级缓存，一级缓存是nginx内部缓存，二级是redis缓存，先读取内部缓存，如果没有再读取redis缓存
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-gf2FpNYm-1655367724055)(Lua优化首页.assets/1655366301383.png)]](https://img-blog.csdnimg.cn/702e55b492a647bd896195ba1102c709.png)
ad_load.lua
-- 获得sid参数
local uri_args = ngx.req.get_uri_args()
local sid = uri_args["sid"]
-- 读取内部缓存
local cache = ngx.shared.dis_cache:get('ad_space_'..sid)
if cache == nil then
-- 内部缓存没有读取redis
local redis = require "resty.redis"
local red = redis:new()
red:set_timeout(2000)
local ok, err = red:connect("127.0.0.1", 6379)
local res = red:get('ad_space:'..sid)
ngx.say(res)
red:close()
-- 保存到内部缓存
ngx.shared.dis_cache:set('ad_space_'..sid, res, 10*60);
else
ngx.say(cache)
end
配置nginx.conf
server {
listen 8080;
default_type 'applicaiton/json;charset=utf8';
charset utf-8;
location /ad_update{
default_type text/html;
content_by_lua_file conf/lua/ad_update.lua;
}
location /ad_load{
default_type text/html;
content_by_lua_file conf/lua/ad_load.lua;
}
}
在http模块加内部缓存配置：
lua_shared_dict dis_cache 5m;
访问测试
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-juVsJGZ7-1655367724060)(Lua优化首页.assets/1655366610354.png)]](https://img-blog.csdnimg.cn/b46b0993e17a4ac590393792e12010a3.png)
首页
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>泡泡教育</title>
<link rel="stylesheet" href="css/index.css">
<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 引入组件库 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
</head>
<body>
<div id="app">
<!--广告-->
<div style=" width:1200px; margin:0px auto; margin-top:20px;">
<el-carousel indicator-position="outside">
<el-carousel-item v-for="(item , index) in adList" :key="index">
<a :href="item.link">
<img :src="item.img" style='width: 100%;height: 100%;object-fit: cover;'/>
</a>
</el-carousel-item>
</el-carousel>
</div>
</div>
<script>
new Vue( {
el:"#app",
name: "Index",
data() {
return {
adList: []
};
},
created() {
this.getAdList();
},
methods: {
// 获取顶部轮播广告
getAdList(){
return axios
.get("http://192.168.7.188:8080/ad_load?sid=1")
.then((result) => {
console.log(result);
this.adList = result.data;
}
).catch( (error)=>{
this.$message.error("获取轮播广告失败！");
});
}
}
});
</script>
</body>
</html>
将网部署到nginx的html目录中，配置首页
location / {
default_type text/html;
root html/edu_learn_web;
index index.html;
}
测试
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-cr9znn8B-1655367724068)(Lua优化首页.assets/1655367062628.png)]](https://img-blog.csdnimg.cn/543ed700398d414d9f61a1a32e283d1d.png)