mirror of
https://github.com/doocs/advanced-java.git
synced 2025-03-12 09:50:11 +08:00
Prettified Code!
This commit is contained in:
yanglbme
GitHub Action
parent
8e3bd4091c
commit
9251cc4128
@ -4,4 +4,4 @@ module.exports = {
|
||||
pdfOptions: "<options for puppeteer.pdf()>",
|
||||
removeTemp: true,
|
||||
emulateMedia: "screen",
|
||||
}
|
||||
};
|
||||
|
||||
@ -229,7 +229,6 @@ Doocs 技术社区，致力于打造一个内容完整、持续成长的互联
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
|
||||
关注「**Doocs 开源社区**」公众号，回复 **PDF**，即可获取本项目离线 PDF 文档（283 页精华），学习更加方便！
|
||||
|
||||
|
||||
@ -1,8 +1,7 @@
|
||||
<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_.
|
||||
|
||||
```
|
||||
告别的时刻已到了
|
||||
|
||||
@ -1,6 +1,7 @@
|
||||
## 电商网站的商品详情页系统架构
|
||||
|
||||
### 小型电商网站的商品详情页系统架构
|
||||
|
||||
小型电商网站的页面展示采用页面全量静态化的思想。数据库中存放了所有的商品信息，页面静态化系统，将数据填充进静态模板中，形成静态化页面，推入 Nginx 服务器。用户浏览网站页面时，取用一个已经静态化好的 html 页面，直接返回回去，不涉及任何的业务逻辑处理。
|
||||
|
||||
|
||||
@ -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 模板并返回给用户。
|
||||
|
||||
|
||||
|
||||
|
||||
虽然没有直接返回 html 页面那么快，但是因为数据在本地缓存，所以也很快，其实耗费的也就是动态渲染一个 html 页面的性能。如果 html 模板发生了变更，不需要将所有的页面重新静态化，也不需要发送请求，没有网络请求的开销，直接将数据渲染进最新的 html 页面模板后响应即可。
|
||||
|
||||
在这种架构下，我们需要**保证系统的高可用性**。
|
||||
|
||||
127
index.html
127
index.html
@ -1,24 +1,48 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<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">
|
||||
<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>
|
||||
<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>
|
||||
@ -147,5 +175,4 @@
|
||||
<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>
|
||||
|
||||
</html>
|
||||
Loading…
Reference in New Issue
Block a user