提交 9251cc41 编写于 作者: Y yanglbme 提交者: GitHub Action

Prettified Code!

上级 8e3bd409
module.exports = {
contents: [ "summary.md" ],
contents: ["summary.md"],
pathToPublic: "pdf/advanced-java.pdf",
pdfOptions: "<options for puppeteer.pdf()>",
removeTemp: true,
emulateMedia: "screen",
}
\ No newline at end of file
};
......@@ -229,7 +229,6 @@ Doocs 技术社区,致力于打造一个内容完整、持续成长的互联
</tr>
</table>
关注「**Doocs 开源社区**」公众号,回复 **PDF**,即可获取本项目离线 PDF 文档(283 页精华),学习更加方便!
![](./images/pdf.png)
<p align="center"><iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width=330 height=86 src="//music.163.com/outchain/player?type=2&id=1334849028&auto=1&height=66"></iframe></p>
<p align="center">本单曲受版权保护,可<a href="https://music.163.com/#/mv?id=10859500">点击观看 MV</a></p>
> 受伤的得到疗愈,挣扎的得到出口<br>
> _Let those who hurt heal, let those who struggle find hope_.
> 受伤的得到疗愈,挣扎的得到出口<br> > _Let those who hurt heal, let those who struggle find hope_.
```
告别的时刻已到了
......
## 电商网站的商品详情页系统架构
### 小型电商网站的商品详情页系统架构
小型电商网站的页面展示采用页面全量静态化的思想。数据库中存放了所有的商品信息,页面静态化系统,将数据填充进静态模板中,形成静态化页面,推入 Nginx 服务器。用户浏览网站页面时,取用一个已经静态化好的 html 页面,直接返回回去,不涉及任何的业务逻辑处理。
![e-commerce-website-detail-page-architecture-1](./images/e-commerce-website-detail-page-architecture-1.png)
......@@ -10,8 +11,8 @@
```html
<html>
<body>
商品名称:#{productName}<br>
商品价格:#{productPrice}<br>
商品名称:#{productName}<br />
商品价格:#{productPrice}<br />
商品描述:#{productDesc}
</body>
</html>
......@@ -24,13 +25,13 @@
**坏处**在于,仅仅适用于一些小型的网站,比如页面的规模在几十到几万不等。对于一些大型的电商网站,亿级数量的页面,你说你每次页面模板修改了,都需要将这么多页面全量静态化,靠谱吗?每次渲染花个好几天时间,那你整个网站就废掉了。
### 大型电商网站的商品详情页系统架构
大型电商网站商品详情页的系统设计中,当商品数据发生变更时,会将变更消息压入 MQ 消息队列中。**缓存服务**从消息队列中消费这条消息时,感知到有数据发生变更,便通过调用数据服务接口,获取变更后的数据,然后将整合好的数据推送至 redis 中。Nginx 本地缓存的数据是有一定的时间期限的,比如说 10 分钟,当数据过期之后,它就会从 redis 获取到最新的缓存数据,并且缓存到自己本地。
用户浏览网页时,动态将 Nginx 本地数据渲染到本地 html 模板并返回给用户。
![e-commerce-website-detail-page-architecture-2](./images/e-commerce-website-detail-page-architecture-2.png)
虽然没有直接返回 html 页面那么快,但是因为数据在本地缓存,所以也很快,其实耗费的也就是动态渲染一个 html 页面的性能。如果 html 模板发生了变更,不需要将所有的页面重新静态化,也不需要发送请求,没有网络请求的开销,直接将数据渲染进最新的 html 页面模板后响应即可。
在这种架构下,我们需要**保证系统的高可用性**
......
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<head>
<meta charset="UTF-8" />
<title>互联网 Java 工程师进阶知识完全扫盲</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="keywords" content="doc,docs,doocs,documentation,github,gitee,advanced-java,yanglbme">
<meta name="description" content="互联网 Java 工程师进阶知识完全扫盲,项目维护者:杨立滨">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/docsify/lib/themes/vue.css">
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/docsify-dark-mode@0.6.1/dist/style.css" />
<link rel="icon" type="image/png" sizes="32x32" href="images/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="images/favicon-16x16.png">
</head>
<meta
name="keywords"
content="doc,docs,doocs,documentation,github,gitee,advanced-java,yanglbme"
/>
<meta
name="description"
content="互联网 Java 工程师进阶知识完全扫盲,项目维护者:杨立滨"
/>
<meta
name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"
/>
<link
rel="stylesheet"
href="//cdn.jsdelivr.net/npm/docsify/lib/themes/vue.css"
/>
<link
rel="stylesheet"
href="//cdn.jsdelivr.net/npm/docsify-dark-mode@0.6.1/dist/style.css"
/>
<link
rel="icon"
type="image/png"
sizes="32x32"
href="images/favicon-32x32.png"
/>
<link
rel="icon"
type="image/png"
sizes="16x16"
href="images/favicon-16x16.png"
/>
</head>
<body>
<body>
<nav>
<ul>
<li>分类
<li>
分类
<ul>
<li><a href="#/?id=高并发架构">高并发</a></li>
<li><a href="#/?id=分布式系统">分布式</a></li>
......@@ -27,7 +51,8 @@
<li><a href="#/?id=海量数据处理">海量数据</a></li>
</ul>
</li>
<li>页面
<li>
页面
<ul>
<li><a href="#">封面</a></li>
<li><a href="#/README">首页</a></li>
......@@ -36,62 +61,65 @@
</ul>
</li>
</ul>
</nav>
<div id="app">本系列知识由 Doocs 开源社区总结发布</div>
<script>
window.$docsify = {
name: 'advanced-java',
repo: 'doocs/advanced-java',
name: "advanced-java",
repo: "doocs/advanced-java",
maxLevel: 3,
auto2top: true,
coverpage: true,
coverpage: 'docs/extra-page/cover.md',
loadSidebar: 'summary.md',
coverpage: "docs/extra-page/cover.md",
loadSidebar: "summary.md",
alias: {
'/.*/.*/summary': 'summary.md',
'/.*/summary.md': 'summary.md'
"/.*/.*/summary": "summary.md",
"/.*/summary.md": "summary.md",
},
pagination: {
previousText: '上一篇',
nextText: '下一篇',
previousText: "上一篇",
nextText: "下一篇",
crossChapter: true,
crossChapterText: true
crossChapterText: true,
},
search: {
maxAge: 1800000,
paths: [
'/docs/high-concurrency/',
'/docs/distributed-system/',
'/docs/high-availability/',
'/docs/micro-services/',
'/docs/big-data/',
"/docs/high-concurrency/",
"/docs/distributed-system/",
"/docs/high-availability/",
"/docs/micro-services/",
"/docs/big-data/",
],
depth: 3
depth: 3,
},
darkMode: {
light: {
toggleBtnBg: '#42b983'
}
toggleBtnBg: "#42b983",
},
},
plugins: [
function (hook, vm) {
hook.beforeEach(function (content) {
const en = vm.route.file.indexOf('README_EN') > -1
const en = vm.route.file.indexOf("README_EN") > -1;
if (/githubusercontent\.com/.test(vm.route.file)) {
url = vm.route.file
.replace('raw.githubusercontent.com', 'github.com')
.replace(/\/master/, '/blob/master')
.replace("raw.githubusercontent.com", "github.com")
.replace(/\/master/, "/blob/master");
} else {
url = 'https://github.com/doocs/advanced-java/blob/master/' + vm.route.file
url =
"https://github.com/doocs/advanced-java/blob/master/" +
vm.route.file;
}
const github = `[GitHub](${url})`
const gitee = `[Gitee](${url.replace("github", "gitee")})`
const github = `[GitHub](${url})`;
const gitee = `[Gitee](${url.replace("github", "gitee")})`;
const editHtml = en ? `:memo: Edit on ${github} / ${gitee}\n` : `:memo: 在 ${github} / ${gitee} 编辑\n`;
const editHtml = en
? `:memo: Edit on ${github} / ${gitee}\n`
: `:memo: 在 ${github} / ${gitee} 编辑\n`;
if (vm.route.path == '/') {
if (vm.route.path == "/") {
return editHtml + content;
}
const subscription = `
......@@ -117,21 +145,21 @@
</td>
</tr>
</table>
`
return editHtml + content + `\n` + subscription
})
`;
return editHtml + content + `\n` + subscription;
});
hook.afterEach(function (html) {
const footer = [
'<footer>',
"<footer>",
'<span>Copyright © 2018-2020 <a href="https://github.com/doocs" target="_blank">Doocs</a>. All rights reserved.',
'</footer>'
].join('')
return html + footer
})
}
]
}
"</footer>",
].join("");
return html + footer;
});
},
],
};
</script>
<script src="//cdn.jsdelivr.net/npm/docsify/lib/docsify.min.js"></script>
<script src="//cdn.jsdelivr.net/npm/prismjs/components/prism-c.min.js"></script>
......@@ -146,6 +174,5 @@
<script src="//cdn.jsdelivr.net/npm/docsify/lib/plugins/zoom-image.js"></script>
<script src="//cdn.jsdelivr.net/npm/docsify-dark-mode@0.6.1/dist/index.js"></script>
<script src="//cdn.jsdelivr.net/npm/docsify-pagination/dist/docsify-pagination.min.js"></script>
</body>
</body>
</html>
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册