电商详情页案例介绍

电商的详情页是并发量很高的服务，开发者通常采用静态化或缓存的方式减少后台服务器的压力

案例的技术点：

OpenResty服务器，

介绍和安装可以参考 https://blog.csdn.net/u013343114/article/details/123991729
Lua调用Redis
Lua的http模块
Lua页面模板

下面先使用几个案例，介绍这些技术点

使用Lua连接Redis

OpenResty的库中自带的resty.redis可以用于连接Redis

在openresty/nginx/conf新建lua目录，新建redis_test.lua文件

-- 导入resty.redis
local redis = require "resty.redis"
-- 创建redis对象
local red = redis:new()
-- 连接redis ok返回成功信息，erro是错误信息
local ok,err = red:connect("127.0.0.1",6379)
if not ok thenngx.say("connect failed",err)return
end
-- 调用set命令
ok,err = red:set("city","wuhan")
if not ok thenngx.say("redis set failed",err)return
end
ngx.say("set city ok<br>")
-- 调用get命令
local val,err = red:get("city")
if not val thenngx.say("redis get failed",err)return
end
if val == ngx.null thenngx.say("city is null")return
end
-- 输出结果
ngx.say("city==>",val)

修改nginx.conf

server {listen 8080;location /redis_test {default_type text/html;content_by_lua_file conf/lua/redis_test.lua;}
}

重启nginx，访问

使用Lua发送HTTP请求

使用Lua发送http请求可以借助开源框架 lua-resty-http

https://github.com/ledgetech/lua-resty-http

下载文件：http_headers.lua、http.lua、http_connect.lua

保存到openresty/lualib/resty目录下

基本的http请求

创建http_test.lua

-- 创建连接对象
local httpc = require("resty.http").new()
-- 发送GET请求
local res, err = httpc:request_uri("http://192.168.101.11:8001/item?id=99", {method = "GET",headers = {["Content-Type"] = "application/x-www-form-urlencoded"}
})
if not res thenngx.log(ngx.ERR, "request failed: ", err)return
end
-- 返回请求内容
local status = res.status
local length = res.headers["Content-Length"]
local body   = res.body
ngx.say("body:",body)

使用SpringBoot开发接口

@RestController
public class HelloController {@Value("${server.port}")private Long port;@RequestMapping("item")public String item(Long id){return "From: "+ port +",Get Item " + id;}
}

修改nginx.conf

 location /http_test3 {default_type text/html;content_by_lua_file conf/lua/http_test.lua;}

重启nginx，访问

URL哈希实现负载均衡

下面案例通过对id参数进行哈希运算，对服务器列表实现负载均衡

local http = require("resty.http").new()
-- 服务器列表
local hosts = {"192.168.101.11:8001","192.168.101:11:8002"}
-- 获得id参数
local item_id= ngx.var.arg_id
if not item_id thenngx.say("id is null")return
end
-- 获得哈希值
local id_hash = ngx.crc32_long(item_id)
-- 计算下标 lua从1开始
local index = (id_hash % 2) +1
-- 通过下标获得主机名，执行GET请求
local resp, err = http:request_uri("http://"..hosts[index], {  method = "GET",  path = "/item?id="..item_id,  headers = {  ["Content-Type"] = "application/x-www-form-urlencoded"  }
})
if not resp then  ngx.say("request error :", err)  return
end
ngx.say(resp.body)
http:close()

让后台接口在8001和8002两个端口启动，不同的id会访问不同的服务器

使用Lua创建页面模板

lua-resty-template可以使用Lua创建类似JSP的模板

https://github.com/bungle/lua-resty-template

下载template和template.lua，保存到resty中

基本使用

view_template.lua

local template = require "resty.template"
-- 方法1 使用new方法进行页面渲染，message是自定义数据
local view = template.new "view.html"
view.message = "Hello, World!"
view:render()
-- 方法2 使用render实现页面渲染
template.render("view.html", { message = "Hello, World!" })

nginx/html/view.html

<!DOCTYPE html>
<html>
<body><h1>{{message}}</h1>
</body>
</html>

nginx.conf

location /view_template {default_type text/html;content_by_lua_file conf/lua/view_template.lua;root html;index view.html;
}

访问效果

Lua+Redis+OpenResty实现电商详情页

实现思路

course.lua

-- 获得路径参数id
local id = ngx.var.id
-- 连接redis
local redis = require "resty.redis"
local red = redis:new()
local ok,err = red:connect("127.0.0.1",6379)
if not ok thenngx.say("connect failed",err)return
end
-- 查询该id的课程
local val,err = red:get("course"..id)
if not val thenngx.say("redis get failed",err)return
end
if val == ngx.null then-- 缓存为空，查询后台接口local httpc = require("resty.http").new()local res, err = httpc:request_uri("http://192.168.101.18:8002/course/"..id, {method = "GET",headers = {["Content-Type"] = "application/x-www-form-urlencoded"}})if not res thenngx.log(ngx.ERR, "request failed: ", err)returnendval = res.bodyif val == ngx.null thenngx.say("course not found ",id)returnend-- 保存到redisred:set("course"..id,val)
end
-- 实现页面渲染
local template = require "resty.template"
template.caching(false)
local context = {course = val
}
template.render("course.html", context)

nginx.conf

location ~*/course/([0-9]+)$ {default_type text/html;root html;set $id $1;  #获得uri最后的数字保存到id变量中，lua中通过ngx.var.id获得index course.html;content_by_lua_file conf/lua/course.lua;
}

course.html\css\js 保存到nginx/html目录中

页面使用了Vue.js，其中Vue的{{ }}符号和Lua模板冲突，所以需要使用{-raw-}括起来，Lua不进行处理

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>课程页面</title><link rel="stylesheet" type="text/css" href="/css/course.css">
</head>
<body>
<div id="course"><div style="background: #eee;"><div class="nav-wrap"><p class="nav-p-pc" style="margin-top:-25px;text-align:left;"><a href="/">课程列表</a><span class="sharp-content">&gt;</span><span class="nav-sec">{-raw-}{{course.courseName}}{-raw-}</span></p></div><!-- 课程详情 -->...{-raw-}{{course.price}}{-raw-}...</div>
</div>
</body>
<script src="/js/vue.js"></script>
<script>var vue = new Vue({el: "#course",data: {course:{*course*} //以非转义方式绑定lua模板中的course对象},created() {console.log(this.course);}});
</script>
</html>

后台查询接口

@RestController
public class CourseController {@Autowiredprivate CourseService courseService;@GetMapping("course/{courseid}")public Course getCourseById(@PathVariable("courseid")Integer courseid) {Course course = courseService.getCourseById(courseid);return course;}
}

访问效果

Lua+Redis+OpenResty实现电商详情页相关推荐

大型电商架构亿级流量电商详情页系统实战--redis基础票
亿级流量电商详情页系统实战-缓存架构+高可用服务架构+微服务架构 01_高并发高可用复杂系统中的缓存架构有哪些东西 (1)如何让redis集群支撑几十万QPS高并发+99.99%高可用+TB级海量数据 ...
亿级流量、高并发与高性能场景下的电商详情页架构_6(Redis Replication)
亿级流量.高并发与高性能场景下的电商详情页架构_6(Redis Replication) 图解RedisReplication 的基本原理 redis replication的核心机制 (1)redi ...
亿级流量、高并发与高性能场景下的电商详情页架构_2(缓存架构中的Redis)
亿级流量.高并发与高性能场景下的电商详情页架构_2(缓存架构中的Redis) 缓存架构一定要学好的Redis,缓存架构中的高可用,高并发,海量数据,备份,随时可恢复,缓存架构要支持这些,则redis一 ...
最新亿级流量电商详情页系统的大型高并发与高可用缓存架构实战第一版附全套资料
课程介绍(非升级版) 对于高并发的场景来说,比如电商类,o2o,门户,等等互联网类的项目,缓存技术是Java项目中最常见的一种应用技术.然而,行业里很多朋友对缓存技术的了解与掌握,仅仅停留在掌握red ...
亿级流量电商详情页系统的大型高并发与高可用缓存架构实战目录
对于高并发的场景来说,比如电商类,o2o,门户,等等互联网类的项目,缓存技术是Java项目中最常见的一种应用技术.然而,行业里很多朋友对缓存技术的了解与掌握,仅仅停留在掌握redis/memcache ...
电商详情页缓存架构（零）
真正能支撑高并发以及高可用的复杂系统中的缓存架构有哪些东西? 亿级流量电商网站的商品详情页系统,最核心的架构就是缓存架构.面对各种高并发场景下的各种难题,缓存架构是如何设计的,其中涉及到哪些技术和解决 ...
亿级流量电商详情页系统实战：缓存架构+高可用服务架构+微服务架构
<缓存架构+高可用服务架构+微服务架构>深入讲解了亿级流量电商详情页系统的完整大型架构.同时最重要的是,在完全真实的大型电商详情页系统架构下,全流程实战了整套微服务架构,包含了基于领域驱动 ...
大型电商架构亿级流量电商详情页系统--实战服务降级
86_电商网站的商品详情页缓存服务业务背景以及框架结构说明我们这个课程,基于hystrix,如何来构建高可用的分布式系统的架构,项目实战模拟真实业务的这么一个小型的项目,来全程贯穿,用这个项目中的 ...
大型电商架构亿级流量电商详情页系统实战-缓存架构+高可用服务架构+微服务架构（七）
文章目录八十九.高并发场景下恐怖的缓存雪崩现象以及导致系统全盘崩溃的后果九十.缓存雪崩的基于事前+事中+事后三个层次的完美解决方案九十一.基于hystrix完成对redis访问的资源隔离以避免缓 ...

Lua+Redis+OpenResty实现电商详情页

电商详情页案例介绍

使用Lua连接Redis

使用Lua发送HTTP请求

基本的http请求

URL哈希实现负载均衡

使用Lua创建页面模板

Lua+Redis+OpenResty实现电商详情页

Lua+Redis+OpenResty实现电商详情页相关推荐

最新文章

热门文章