在光影和文字之间，留一处适合停靠的小站。https://www.qawkh.com/Firefly6.14.3https://github.com/CuteLeaf/Firefly2026年7月22日 15:32:58https://www.qawkh.com/posts/15/https://www.qawkh.com/posts/15/记录 Qawkh の栖 从零开始搭建的过程，包括技术选型、项目结构、核心模块与实现思路。Tue, 30 Jun 2026 09:22:58 GMT<h1>从空白页到可用成品：Qawkh の栖建站记录</h1> <h2>前言</h2> <p>折腾了快半个月，<code>Qawkh の栖</code> 终于从一个空白页面，慢慢长成了现在这个样子。</p> <p>回头看，这个过程其实比一开始想的要复杂得多。前台页面要好看、后台要能管内容、接口要稳定、上传要能跑、主题切换和夜间模式要统一、留言、音乐、照片墙、万年历这些模块也都得一点点接起来。单独拎出来看，每一块都不算特别夸张，但真正把它们拼成一个完整的网站，细节是真的很多。</p> <p>这篇文章就当作一次阶段性记录。主要想聊聊这个博客目前用了什么框架、什么语言、什么组件库，以及整个项目是怎么拆分、怎么实现、怎么一点点补齐功能的。如果你也想做一个属于自己的个人博客，希望这篇记录能给你一些参考。</p> <hr /> <h2>技术栈一览</h2> <p>先放目前这个项目真实在用的一套技术栈。</p> <table><thead><tr><th>层级</th><th>我使用的技术</th><th>说明</th></tr></thead><tbody><tr><td>站点前台</td><td>Vue 3 + TypeScript + Vite</td><td>采用 Composition API，开发体验轻快，适合组件化页面组织</td></tr><tr><td>路由与状态</td><td>Vue Router + Pinia</td><td>负责页面导航、全局状态和交互联动</td></tr><tr><td>后端服务</td><td>Spring Boot 3 + Java 21</td><td>提供 REST API、业务逻辑与后台能力</td></tr><tr><td>数据访问</td><td>MyBatis + MySQL</td><td>负责内容数据存储与查询</td></tr><tr><td>鉴权方案</td><td>JWT</td><td>后台登录与接口访问控制</td></tr><tr><td>参数校验</td><td>Spring Validation</td><td>用于表单与接口参数校验</td></tr><tr><td>接口文档</td><td>Knife4j / OpenAPI</td><td>便于联调和接口管理</td></tr><tr><td>管理后台</td><td>vue-pure-admin + Vue 3 + Element Plus</td><td>快速搭建后台内容管理系统</td></tr><tr><td>对象存储</td><td>阿里云 OSS</td><td>存储图片、封面和其他上传资源</td></tr><tr><td>评论系统</td><td>Waline</td><td>用于留言板互动</td></tr><tr><td>功能组件</td><td>lunar-javascript、highlight.js、GSAP</td><td>农历黄历、代码高亮、页面动效</td></tr><tr><td>特色模块</td><td>Live2D</td><td>看板娘、欢迎语与互动效果</td></tr></tbody></table> <p>简单概括一下，就是：</p> <p>我这次没有走 SSR 那套路线，而是选择了更适合当前开发节奏的前后端分离方案。前台专注页面和交互，后端专注接口和数据，后台专注内容管理，各自做自己最擅长的那部分。</p> <hr /> <h2>为什么这么选</h2> <p>技术栈这件事，说到底还是看项目目标和开发习惯。</p> <h3>前台为什么用 Vue 3</h3> <p>前台我使用的是 <code>Vue 3 + TypeScript + Vite</code>。</p> <p>原因很直接：这一套我比较熟，也确实适合做这种页面多、卡片多、细节多、交互也不少的个人博客。像首页信息卡片、文章页、说说、照片墙、留言、个人中心、万年历这些模块，彼此之间结构独立，但又需要统一风格和状态联动，用 Vue 3 的 Composition API 来拆分会很自然。</p> <p>TypeScript 的价值也很明显。接口字段、组件 props、工具函数、状态结构都能有更清楚的约束，联调的时候会少踩很多低级坑。</p> <p>而 Vite 的优点就是轻和快。开发时热更新足够及时，打包也直接，对这种前端页面驱动型项目来说，体验非常舒服。</p> <h3>后端为什么用 Spring Boot</h3> <p>后端我使用的是 <code>Spring Boot 3 + Java 21 + MyBatis + MySQL</code>。</p> <p>这一套的优点主要是稳定、成熟、好维护。博客虽然不是一个超高并发项目，但它的数据类型并不少：文章、分类、公告、说说、照片墙、收藏夹、音乐、背景图、留言配置、关于页、特殊日期、上传资源……这些内容都需要比较稳定的 CRUD 和清晰的业务边界。</p> <p>Spring Boot 负责整体框架能力，MyBatis 负责数据访问，MySQL 负责持久化存储。这样搭起来很踏实，也方便后续继续扩展管理功能。</p> <h3>后台为什么直接用 vue-pure-admin</h3> <p>后台我没有自己从零造，而是基于 <code>vue-pure-admin</code> 做二次开发。</p> <p>原因也很现实：后台不是最值得重复造轮子的地方。像登录、菜单、路由、标签页、表格、分页、表单、弹窗这些通用能力，现成成熟模板已经做得很好了。直接拿来裁剪和改造，可以把时间省下来用在真正属于这个博客的功能上。</p> <p>对我来说，最合适的方案不是“全都自己写”，而是“该自己写的认真写，不该重复造的就少造一点”。</p> <hr /> <h2>项目结构</h2> <p>目前整个项目主要分成三部分：站点前台、后端服务、管理后台。</p> <div><div><div><figure><figcaption></figcaption><pre><code><div><div><div>1</div></div><div><span>qawkh-blog/</span></div></div><div><div><div>2</div></div><div><span>├── qawkh-studio/ # 博客前台</span></div></div><div><div><div>3</div></div><div><span>│ ├── src/</span></div></div><div><div><div>4</div></div><div><span>│ │ ├── views/ # 页面视图</span></div></div><div><div><div>5</div></div><div><span>│ │ ├── components/ # 公共组件</span></div></div><div><div><div>6</div></div><div><span>│ │ ├── api/ # 前端接口封装</span></div></div><div><div><div>7</div></div><div><span>│ │ ├── router/ # 路由配置</span></div></div><div><div><div>8</div></div><div><span>│ │ ├── utils/ # 工具函数</span></div></div><div><div><div>9</div></div><div><span>│ │ └── types/ # TypeScript 类型声明</span></div></div><div><div><div>10</div></div><div><span>│ ├── public/ # 静态资源</span></div></div><div><div><div>11</div></div><div><span>│ └── package.json</span></div></div><div><div><div>12</div></div><div><span>│</span></div></div><div><div><div>13</div></div><div><span>├── qawkh-server/ # Spring Boot 后端</span></div></div><div><div><div>14</div></div><div><span>│ ├── src/main/java/com/qawkh/server/</span></div></div><div><div><div>15</div></div><div><span>│ │ ├── controller/ # 控制器层</span></div></div><div><div><div>16</div></div><div><span>│ │ ├── service/ # 业务逻辑层</span></div></div><div><div><div>17</div></div><div><span>│ │ ├── mapper/ # MyBatis 映射层</span></div></div><div><div><div>18</div></div><div><span>│ │ ├── domain/entity/ # 实体类</span></div></div><div><div><div>19</div></div><div><span>│ │ ├── model/dto/ # 请求 DTO</span></div></div><div><div><div>20</div></div><div><span>│ │ ├── model/vo/ # 返回 VO</span></div></div><div><div><div>21</div></div><div><span>│ │ └── config/ # 配置类</span></div></div><div><div><div>22</div></div><div><span>│ ├── src/main/resources/</span></div></div><div><div><div>23</div></div><div><span>│ │ ├── application.yml # 后端配置</span></div></div><div><div><div>24</div></div><div><span>│ │ └── db/schema.sql # 初始化 SQL</span></div></div><div><div><div>25</div></div><div><span>│ └── pom.xml</span></div></div><div><div><div>26</div></div><div><span>│</span></div></div><div><div><div>27</div></div><div><span>└── pure-admin-thin-i18n/ # 管理后台</span></div></div><div><div><div>28</div></div><div><span><span> </span></span><span>├── src/</span></div></div><div><div><div>29</div></div><div><span><span> </span></span><span>│ ├── views/ # 后台页面</span></div></div><div><div><div>30</div></div><div><span><span> </span></span><span>│ ├── api/ # API 调用封装</span></div></div><div><div><div>31</div></div><div><span><span> </span></span><span>│ ├── router/ # 后台路由</span></div></div><div><div><div>32</div></div><div><span><span> </span></span><span>│ └── store/ # Pinia 状态管理</span></div></div><div><div><div>33</div></div><div><span><span> </span></span><span>└── package.json</span></div></div></code></pre><div><div></div><div></div></div></figure><div></div></div><span>展开</span><span>收起</span></div></div> <p>整个结构是比较标准的前后端分离：</p> <ul> <li><code>qawkh-studio</code> 负责博客前台展示</li> <li><code>qawkh-server</code> 负责接口、数据、鉴权、上传等后端能力</li> <li><code>pure-admin-thin-i18n</code> 负责后台内容管理</li> </ul> <p>三部分之间通过 API 通信，职责边界比较清楚。这样后续无论是加功能还是改页面，都不会互相缠得太死。</p> <hr /> <h2>前端：我使用了什么框架、语言和组件</h2> <h3>核心框架和语言</h3> <p>前台核心使用的是：</p> <ul> <li><code>Vue 3</code></li> <li><code>TypeScript</code></li> <li><code>Vite</code></li> <li><code>Vue Router</code></li> <li><code>Pinia</code></li> </ul> <p>Vue 3 负责页面渲染和组件组织，TypeScript 负责类型约束，Vite 负责开发和构建，Vue Router 负责路由切换，Pinia 负责全局状态。</p> <p>这种组合最大的好处就是“清晰”。页面逻辑、组件逻辑、数据逻辑、路由逻辑分层比较自然，代码不会很快陷入混乱。</p> <h3>前台页面模块</h3> <p>目前前台已经完成或接入的页面主要有：</p> <ul> <li>首页</li> <li>文章列表</li> <li>文章详情</li> <li>说说</li> <li>留言板</li> <li>收藏夹</li> <li>照片墙</li> <li>万年历</li> <li>归档</li> <li>个人中心</li> <li>关于页</li> </ul> <p>这些页面不是靠一个大组件硬撑出来的，而是按功能拆成了很多独立模块，这样后面迭代起来更轻松。</p> <h3>我用到的前台功能组件</h3> <p>这个博客里前台组件数量不少，比较有代表性的有：</p> <ul> <li><code>HomeBeijingTimeCard</code>：北京时间卡片</li> <li><code>HomeWeatherCard</code>：天气卡片</li> <li><code>HomeSpecialDateCalendarCard</code>：首页特殊日期 / 节日卡片</li> <li><code>GlobalMusicPlayer</code>：全局音乐播放器</li> <li><code>QuickAgeCalculatorPanel</code>：年龄计算工具</li> <li><code>QuickLunarConverterPanel</code>：农历转换工具</li> <li><code>QuickMetabolismPanel</code>：基础代谢计算工具</li> <li><code>AppIcon</code>：统一图标组件</li> </ul> <p>这些组件本质上都是围绕“首页信息展示”和“轻量工具增强”来做的。相比一个只有文章列表的普通博客，我更希望它看起来像一个真正有内容、有交互、有生活感的个人空间。</p> <h3>文章渲染和代码高亮</h3> <p>文章详情页支持 Markdown 内容展示，代码高亮使用的是 <code>highlight.js</code>。</p> <p>这部分的好处很明显：</p> <ul> <li>技术文章可以更自然地写代码块</li> <li>阅读体验比纯文本好很多</li> <li>后续扩展语言支持也比较方便</li> </ul> <p>对于技术博客来说，代码高亮几乎算是基础设施。</p> <h3>留言板评论系统</h3> <p>留言页使用的是 <code>Waline</code>。</p> <p>我选择它主要是因为接入简单、交互完整，而且和个人博客这种场景非常契合。对于一个需要评论和互动的页面来说，自己从零写评论系统并不划算，能稳定用现成方案就够了。</p> <h3>万年历和农历黄历</h3> <p>万年历页面使用的是 <code>lunar-javascript</code>。</p> <p>这个库主要帮我解决了这些问题：</p> <ul> <li>公历转农历</li> <li>节气识别</li> <li>公历节日和农历节日识别</li> <li>干支、生肖、彭祖、星宿等黄历信息展示</li> <li>宜忌信息计算</li> </ul> <p>这个模块是站点里辨识度比较高的一块。它不仅仅是一个简单日期面板，而是尽量做成一个完整可用的“月历 + 详情 + 黄历信息”页面。</p> <h3>动效与视觉增强</h3> <p>在前台视觉层面，我还用了这些能力：</p> <ul> <li><code>GSAP</code>：用于部分动效和过渡处理</li> <li><code>Live2D</code>：右下角看板娘、模型切换和欢迎语</li> <li>自定义卡片样式、主题切换、夜间模式适配</li> </ul> <p>这些东西单独看都不算决定性功能，但组合在一起之后，确实能让页面更有质感，也更像一个“自己的站”。</p> <hr /> <h2>后端：我使用了什么框架、语言和服务</h2> <h3>核心框架和语言</h3> <p>后端主要使用的是：</p> <ul> <li><code>Spring Boot 3.3.6</code></li> <li><code>Java 21</code></li> <li><code>MyBatis</code></li> <li><code>MySQL</code></li> </ul> <p>其中 Spring Boot 负责搭框架和接口能力，MyBatis 负责数据库访问，MySQL 负责数据存储。</p> <h3>我在后端做了哪些模块</h3> <p>目前后端已经拆分出比较完整的内容模块，包括：</p> <ul> <li>文章管理</li> <li>文章分类管理</li> <li>公告管理</li> <li>关于页信息管理</li> <li>说说管理</li> <li>照片墙分类与照片管理</li> <li>收藏夹分类与收藏项管理</li> <li>音乐歌曲管理</li> <li>站点背景图管理</li> <li>特殊日期管理</li> <li>留言板配置管理</li> <li>文件上传</li> <li>后台登录鉴权</li> <li>前台天气接口</li> </ul> <p>接口层我按前台和后台分别做了拆分，比如：</p> <ul> <li>前台接口使用 <code>User*Controller</code></li> <li>后台接口使用 <code>Admin*Controller</code></li> </ul> <p>这样做的好处是边界很清楚：</p> <ul> <li>前台只拿展示所需的数据</li> <li>后台只做管理和编辑所需的能力</li> </ul> <p>不会把管理逻辑和展示逻辑混成一锅。</p> <h3>数据结构和代码组织</h3> <p>后端这一层我基本按照常见的分层方式来组织：</p> <ul> <li><code>entity</code>：数据库实体</li> <li><code>dto</code>：请求参数对象</li> <li><code>vo</code>：返回结果对象</li> <li><code>mapper</code>：数据库访问层</li> <li><code>service</code>：业务逻辑层</li> <li><code>controller</code>：接口控制层</li> </ul> <p>这种写法虽然类会多一些，但业务清晰、职责分明。等模块慢慢变多以后，这种结构的好处会越来越明显。</p> <h3>鉴权、校验和接口文档</h3> <p>后台鉴权这块，我使用的是 <code>JWT</code>。</p> <p>登录成功后生成 token，后续后台接口携带 token 访问，服务端负责解析和校验。对个人博客后台来说，这已经是一套足够实用的方案。</p> <p>参数校验我使用的是 <code>Spring Validation</code>，主要负责：</p> <ul> <li>必填项校验</li> <li>长度范围校验</li> <li>基本格式校验</li> </ul> <p>接口文档我接入了 <code>Knife4j / OpenAPI</code>，这样联调的时候会方便很多，也更容易统一管理接口。</p> <h3>文件上传和对象存储</h3> <p>文件上传这块，我接入的是 <code>阿里云 OSS</code>。</p> <p>目前它主要负责这些资源：</p> <ul> <li>文章封面</li> <li>照片墙图片</li> <li>站点背景图</li> <li>其他媒体资源</li> </ul> <p>这样做最大的好处就是不用把所有文件都压在服务器本地磁盘上，资源管理和后续迁移都会更轻松一些。</p> <hr /> <h2>管理后台：我使用了什么后台框架和组件库</h2> <p>后台项目我使用的是：</p> <ul> <li><code>vue-pure-admin</code></li> <li><code>Vue 3</code></li> <li><code>TypeScript</code></li> <li><code>Vite</code></li> <li><code>Element Plus</code></li> <li><code>Pinia</code></li> </ul> <p>这套东西本身就很适合做管理系统，特别是：</p> <ul> <li>表格</li> <li>表单</li> <li>分页</li> <li>弹窗</li> <li>菜单路由</li> <li>登录页</li> <li>标签页</li> </ul> <p>这些内容如果全都自己写，成本其实不低。直接基于成熟后台模板做裁剪和扩展，效率会高很多。</p> <h3>后台目前已经支持的内容管理</h3> <p>我在后台里主要做了这些模块：</p> <ul> <li>文章管理</li> <li>文章分类管理</li> <li>公告管理</li> <li>说说管理</li> <li>照片墙分类管理</li> <li>照片墙图片管理</li> <li>收藏夹分类与条目管理</li> <li>音乐管理</li> <li>关于页信息管理</li> <li>留言板设置管理</li> <li>站点背景图管理</li> <li>特殊日期管理</li> </ul> <p>数据量稍大一点的列表页，也都尽量做了服务端分页，不至于后面数据一多就直接卡成表格坟场。</p> <p>后台这部分最大的价值，不是“页面有多炫”，而是它真的能让我把站点内容管理起来，而不是所有信息都写死在前端代码里。</p> <hr /> <h2>这个博客里比较有意思的功能</h2> <p>除了常规的文章和后台管理，这个项目里我自己比较喜欢的模块还有几个。</p> <h3>1. 首页信息卡片</h3> <p>首页不只是放一排文章，而是做了多个信息卡片：</p> <ul> <li>北京时间</li> <li>天气</li> <li>节日 / 特殊日期</li> <li>音乐模块</li> <li>公告内容</li> </ul> <p>这样首页不至于显得过空，也更有“个人站点首页”的感觉，而不是单纯的内容列表页。</p> <h3>2. 个人中心</h3> <p>个人中心页不只是一个简短的 About，而是集中展示了：</p> <ul> <li>头像和封面</li> <li>建站初衷</li> <li>兴趣日常</li> <li>个人简介</li> <li>页面跳转入口</li> </ul> <p>它更像一个完整的个人展示页，而不是仅仅“补一个资料页”。</p> <h3>3. 照片墙</h3> <p>照片墙模块除了分类展示外，也做了大图预览和更偏展示型的布局。对个人博客来说，图片本身也是内容的一部分，不应该只是一个冷冰冰的管理列表映射页。</p> <h3>4. 万年历</h3> <p>万年历是目前站里功能性比较强的页面之一。它不是简单做个日期选择器就结束，而是把农历、节气、节日、宜忌和黄历详情都整合到了一个页面里，实用性和辨识度都还不错。</p> <h3>5. Live2D 看板娘</h3> <p>右下角的看板娘属于很典型的“没那么必要，但确实很有趣”的功能。</p> <p>它目前支持：</p> <ul> <li>模型切换</li> <li>大小切换</li> <li>页面欢迎语</li> <li>点击互动</li> <li>位置记忆</li> </ul> <p>对个人博客来说，这种小东西往往就是“个人风格”的一部分。</p> <hr /> <h2>一路做下来的一些感受</h2> <p>做这个博客过程中，我最大的感受其实是：</p> <p>真正花时间的，往往不是把某个功能“做出来”，而是把它“做顺眼、做完整、做统一”。</p> <p>比如：</p> <ul> <li>页面白天和夜间模式是否统一</li> <li>留言区和正文区是不是都清楚可读</li> <li>卡片之间的风格是否一致</li> <li>后台改完内容后，前台是否真的能接住</li> <li>图片、音乐、特殊日期这些动态内容有没有真正从后台管理起来</li> </ul> <p>这些事情每一件都不算惊天动地，但恰恰是它们堆起来，最后才决定这个站点看起来像不像一个完整产品。</p> <hr /> <h2>结语</h2> <p><code>Qawkh の栖</code> 到现在当然还远远算不上“彻底完成”，但至少它已经从一个空白页，走到了一个能看、能用、能继续迭代的阶段。</p> <p>前台有了完整的页面结构，后端有了比较清晰的业务模块，后台也已经能真正接管内容维护。剩下的工作，不再是“从零开始”，而是继续把细节补得更完整，把体验做得更统一。</p> <p>如果你也想做一个自己的博客，或者正在准备做一个前后端分离的小项目，我觉得最重要的不是一开始就追求多复杂的技术栈，而是先把结构搭稳，再一步步把内容、功能和细节补上。</p> <p>技术栈从来没有唯一正确答案，最适合自己的，才是最值得一直做下去的那一套。</p> <p>如果后面我继续给这个博客加更多模块，应该还会再写一篇，把后续的实现细节和踩坑记录继续补上。</p>https://www.qawkh.com/posts/3/https://www.qawkh.com/posts/3/管理iiiiiiiiiiiiiiiiiihi皮hi和公路Gigi屁股篇Tue, 02 Jun 2026 09:18:58 GMT<h1>到底说了说明</h1> <div><figure><figcaption></figcaption><pre><code><div><div><div>1</div></div><div><span>const</span><span> </span><span>message</span><span> </span><span>=</span><span> </span><span>'hello'</span><span>;</span></div></div></code></pre><div><div></div><div></div></div></figure></div> <p><img src="https://java-aierp.oss-cn-beijing.aliyuncs.com/articles/content/2026/06/02/09fef97ef194430b91c6f1b2ae66ce07.png" alt="19" /> 付款要分开有有有有有有有有有有有有由于放映空间急急急急急急急急急急急急急急急</p>https://www.qawkh.com/posts/16/https://www.qawkh.com/posts/16/Sat, 18 Jul 2026 11:02:22 GMT<p>案说法分为</p>https://www.qawkh.com/posts/14/https://www.qawkh.com/posts/14/Thu, 18 Jun 2026 08:02:40 GMT<p>afwafwawf</p>https://www.qawkh.com/posts/13/https://www.qawkh.com/posts/13/Thu, 11 Jun 2026 09:11:07 GMT<p><strong>进入 nginx 目录中: cd /usr/local/nginx/sbin</strong></p> <h3>1、查看nginx版本号</h3> <div><figure><figcaption></figcaption><pre><code><div><div><div>1</div></div><div><span>./nginx -v</span></div></div></code></pre><div><div></div><div></div></div></figure></div> <h3><strong>2、启动 nginx</strong></h3> <div><figure><figcaption></figcaption><pre><code><div><div><div>1</div></div><div><span>./nginx</span></div></div></code></pre><div><div></div><div></div></div></figure></div> <p>查看是否启动成功：ps -ef|grep nginx <img src="https://java-aierp.oss-cn-beijing.aliyuncs.com/articles/content/2026/06/11/0d69564219b74f2fad40602aceb44d66.png" alt="4.png" /></p> <h3>3、停止 nginx</h3> <div><figure><figcaption></figcaption><pre><code><div><div><div>1</div></div><div><span>./nginx</span></div></div></code></pre><div><div></div><div></div></div></figure></div> <h3>4、重新加载 nginx</h3> <div><figure><figcaption></figcaption><pre><code><div><div><div>1</div></div><div><span>./nginx -s reload</span></div></div></code></pre><div><div></div><div></div></div></figure></div> <h2>三、nginx.conf配置文件</h2> <h3>1、位置</h3> <p>vim /usr/local/nginx/conf/nginx.conf</p> <h3>2、配置文件中的内容（包含三部分）</h3> <h3>（1）全局块：配置服务器整体运行的配置指令</h3> <p>从配置文件开始到 events 块之间的内容，主要会设置一些影响 nginx 服务器整体运行的配置指令，主要包括配</p> <p>置运行 Nginx 服务器的用户（组）、允许生成的 worker process 数，进程 PID 存放路径、日志存放路径和类型以</p> <p>及配置文件的引入等。</p> <p>比如上面第一行配置的：</p> <p>这是 Nginx 服务器并发处理服务的关键配置，worker_processes 值越大，可以支持的并发处理量也越多，但是</p> <p>会受到硬件、软件等设备的制约</p> <p><img src="https://java-aierp.oss-cn-beijing.aliyuncs.com/articles/content/2026/06/11/75b1a0e3588f44279bb007ae12506b30.png" alt="5.png" /></p> <h3>（2）events 块：影响 Nginx 服务器与用户的网络连接</h3> <p>events 块涉及的指令主要影响 Nginx 服务器与用户的网络连接，常用的设置包括是否开启对多 work process</p> <p>下的网络连接进行序列化，是否允许同时接收多个网络连接，选取哪种事件驱动模型来处理连接请求，每个 word</p> <p>process 可以同时支持的最大连接数等。</p> <p>上述例子就表示每个 work process 支持的最大连接数为 1024.</p> <p>这部分的配置对 Nginx 的性能影响较大，在实际中应该灵活配置。 <img src="https://java-aierp.oss-cn-beijing.aliyuncs.com/articles/content/2026/06/11/8ee1ab621c27494e94cb5d6798b372c4.png" alt="6.png" /></p> <h3>（3）http 块</h3> <p>这算是 Nginx 服务器配置中最频繁的部分，代理、缓存和日志定义等绝大多数功能和第三方模块的配置都在这里。</p> <p>需要注意的是：http 块也可以包括 http 全局块、server 块。 <img src="https://java-aierp.oss-cn-beijing.aliyuncs.com/articles/content/2026/06/11/3a45e38f5a084c26bdc825a6f4a87069.jpg" alt="Snipaste_20260611_163357.jpg" /></p> <h4>①、http 全局块</h4> <p>http 全局块配置的指令包括文件引入、MIME-TYPE 定义、日志自定义、连接超时时间、单链接请求数上限等。 <img src="https://java-aierp.oss-cn-beijing.aliyuncs.com/articles/content/2026/06/11/f77ed9a8794043ae8476b930e1c7f3d5.png" alt="7.png" /></p> <h4>②、server 块</h4> <p>这块和虚拟主机有密切关系，虚拟主机从用户角度看，和一台独立的硬件主机是完全一样的，该技术的产生是为了</p> <p>节省互联网服务器硬件成本。</p> <p>每个 http 块可以包括多个 server 块，而每个 server 块就相当于一个虚拟主机。</p> <p>而每个 server 块也分为全局 server 块，以及可以同时包含多个 locaton 块。</p> <p><img src="https://java-aierp.oss-cn-beijing.aliyuncs.com/articles/content/2026/06/11/a0da29c5d84345049c2078b33b3697a0.png" alt="8.png" /></p> <h5>全局 server 块</h5> <p>最常见的配置是本虚拟机主机的监听配置和本虚拟主机的名称或 IP 配置。</p> <h5>location 块</h5> <p>一个 server 块可以配置多个 location 块。</p> <p>这块的主要作用是基于 Nginx 服务器接收到的请求字符串（例如 server_name/uri-string），对虚拟主机名称</p> <p>（也可以是 IP 别名）之外的字符串（例如 前面的 /uri-string）进行匹配，对特定的请求进行处理。地址定向、数据缓</p> <p>存和应答控制等功能，还有许多第三方模块的配置也在这里进行。</p>https://www.qawkh.com/posts/12/https://www.qawkh.com/posts/12/Thu, 11 Jun 2026 08:57:31 GMT<h2>安装Nginx</h2> <h3>1、准备工作</h3> <p>（1）打开虚拟机，使用远程连接工具连接 linux 操作系统</p> <p>（2）到 nginx 官网下载软件</p> <p><a href="http://nginx.org/">http://nginx.org/</a></p> <h3>2、开始进行 nginx 安装</h3> <h4><strong>（1）安装 pcre 依赖</strong></h4> <h6>第一步 联网下载 pcre 压缩文件依赖</h6> <div><figure><figcaption></figcaption><pre><code><div><div><div>1</div></div><div><span>wget http://downloads.sourceforge.net/project/pcre/pcre/8.37/pcre-8.37.tar.gz</span></div></div></code></pre><div><div></div><div></div></div></figure></div> <h6>第二步 解压压缩文件</h6> <p>使用命令 tar –xvf pcre-8.37.tar.gz</p> <h6>第三步./configure 完成后，回到 pcre 目录下执行 make，最后执行 make install</h6> <p>查看pcre依赖是否安装成功：pcre-config —version</p> <h5><strong>（2）安装 openssl 、zlib 、 gcc 依赖</strong></h5> <div><figure><figcaption></figcaption><pre><code><div><div><div>1</div></div><div><span>yum -y install make zlib zlib-devel gcc-c++ libtool openssl openssl-devel</span></div></div></code></pre><div><div></div><div></div></div></figure></div> <h5>（3）安装 nginx</h5> <ul> <li>使用命令解压</li> </ul> <p>* ./configure</p> <p>* make &amp;&amp; make install</p> <p>进入目录 /usr/local/nginx/sbin/nginx 启动服务</p> <p><strong>安装后，不能访问的，需要对防火墙进行设置</strong></p> <p><strong>也可以直接关闭防火墙，并防止自启(在练习模式中)</strong></p> <div><figure><figcaption></figcaption><pre><code><div><div><div>1</div></div><div><span>//关闭防火墙&amp;&amp;防火墙自启</span></div></div><div><div><div>2</div></div><div><span>​</span></div></div><div><div><div>3</div></div><div><span>systemctl stop firewalld &amp;&amp; systemctl disable firewalld</span></div></div><div><div><div>4</div></div><div><span>​</span></div></div><div><div><div>5</div></div><div><span>//安装Iptables管理工具&amp;&amp;启动Iptables&amp;&amp;设为Iptables开机自启&amp;&amp;清空Iptables规则&amp;&amp;保存Iptables默认规则</span></div></div><div><div><div>6</div></div><div><span>​</span></div></div><div><div><div>7</div></div><div><span>yum -y install iptables-services &amp;&amp; systemctl start iptables &amp;&amp; systemctl enable iptables&amp;&amp; iptables -F &amp;&amp; service iptables save</span></div></div></code></pre><div><div></div><div></div></div></figure></div> <p>①　查看开放的端口</p> <p>firewall-cmd —list-all <img src="https://java-aierp.oss-cn-beijing.aliyuncs.com/articles/content/2026/06/11/1887f62b18a840dab453a6eaaf70d1eb.png" alt="1455597201910291025538201653097356.png" /></p> <p>②　设置开放的端口号</p> <p>firewall-cmd —add-service=http –permanent</p> <p>firewall-cmd —add-port=80/tcp —permanent</p> <p>③　设置之后需要重启防火墙 <img src="https://java-aierp.oss-cn-beijing.aliyuncs.com/articles/content/2026/06/11/94c6db0660004f8d9b824f60ec4120ef.png" alt="1455597201910291026105201568314025.png" /></p> <p>④　访问成功 <img src="https://java-aierp.oss-cn-beijing.aliyuncs.com/articles/content/2026/06/11/37398e2645834054ab51bf7e51167033.png" alt="3.png" /></p>https://www.qawkh.com/posts/11/https://www.qawkh.com/posts/11/Nginx("engine x”)是一个高性能的HTTP和反向代理服务器，特点是占有内存少，并发能力强，事实上nginx的并发能力确实在同类型的网页服务器中表现较好。Thu, 11 Jun 2026 08:40:43 GMT<h2>Nginx简介</h2> <h3>1.什么是nginx</h3> <p>Nginx(“engine x”)是一个高性能的HTTP和反向代理服务器，特点是占有内存少，并发能力强，事实上nginx的并发能力确实在同类型的网页服务器中表现较好。Nginx专为性能优化而开发，性能是其最重要的考量，实现上非常注重效率，能经受高负载的考验，有报告表明能支持高达 50，000个并发连接数。</p> <h3>2.反向代理</h3> <h4>（1）正向代理</h4> <p>Nginx不仅可以做反向代理，实现负载均衡。还能用作正向代理来进行上网等功能。正向代理:如果把局域网外的Intemet想象成一个巨大的资源库，则局域网中的客户端要访问Internet，则需要通过代理服务器来访问，这种代理服务就称为正向代理。</p> <blockquote> <p>内网电脑没法直接上网，<strong>借助代理服务器访问外网</strong>，外网看不到真实客户端。</p> </blockquote> <h4>（2）反向代理</h4> <p>反向代理，其实客户端对代理是无感知的，因为客户端不需要任何配置就可以访问，我们只需要将请求发送到反向代理服务器，由反向代理服务器去选择目标服务器获取数据后，在返回给客户端，此时反向代理服务器和目标服务器对外就是一个服务器，暴露的是代理服务器地址，隐藏了真实服务器IP地址。</p> <blockquote> <p>简单说：用户只管访问<strong>代理服务器</strong>，完全不知道背后还有真正的业务服务器。代理帮你转发请求、拿数据再回传给你，<strong>真实服务器地址被藏起来了</strong>。</p> </blockquote> <h4>（3）正向反向代理区别</h4> <p>用通俗的话+核心区别帮你分清，好记好用：</p> <h3>一、一句话总结</h3> <ol> <li><strong>正向代理</strong>：<strong>替客户端干活</strong>，隐藏<strong>用户</strong>用户→代理→外网服务器，服务器不知道真正访问的是谁。例：翻墙、局域网统一上网。</li> <li><strong>反向代理</strong>：<strong>替服务器干活</strong>，隐藏<strong>后端服务</strong>用户→代理→真实业务服务器，用户不知道后端真实地址。例：网站、项目部署用的Nginx反向代理。</li> </ol> <hr /> <h3>二、核心对比</h3> <ul> <li>访问目标正向：访问<strong>外网资源</strong>反向：访问<strong>内部业务服务</strong></li> <li>隐藏对象正向：隐藏<strong>客户端IP</strong>反向：隐藏<strong>服务端IP</strong></li> <li>配置方正向：<strong>客户端</strong>要指定代理地址反向：<strong>服务端</strong>配置，客户端无感知</li> <li>典型用途正向：内网上网、网络加速、翻墙反向：负载均衡、动静分离、隐藏后端服务、网站分发</li> </ul> <h3>3.负载均衡</h3> <p>单个服务器解决不了，我们增加服务器的数量，然后将请求分发到各个服务器上，将原先请求集中到单个服务器上的情况改为将请求分发到多个服务器上，将负载分发到不同的服务器，也就是我们所说的负载均衡</p> <p>例如</p> <p>不一定非要<strong>多买物理服务器</strong>，分几种情况，结合你的进销存讲直白点：</p> <ol> <li><strong>测试/小流量自用</strong>完全不用加机器。你<strong>单台服务器</strong>就能跑，暂时不用负载均衡。</li> <li><strong>一台机器性能富余（最省钱方案）<strong>不用新购服务器。一台服务器上</strong>启动多个项目实例</strong>（比如同一套进销存开2~3个端口运行），Nginx把请求分给这些实例，也算负载均衡，<strong>只用1台机器</strong>。</li> <li><strong>真正用户多、压力大</strong>这时才需要<strong>多台独立服务器</strong>，分摊压力，防止一台崩掉。</li> </ol> <p>总结：初期自己用/小用户量 → <strong>不用加服务器</strong>后期访问变多、卡顿 → 先一台机器多开实例，还扛不住再添新服务器。</p> <h3>4.动静分离</h3> <blockquote> <hr /> </blockquote> <p>用大白话讲，再结合部署场景说明：</p> <h5>一、简单解释</h5> <p>把网站资源分成<strong>静态</strong>和<strong>动态</strong>两类，分开交给不同服务器处理，就是<strong>动静分离</strong>。</p> <ul> <li><strong>静态资源</strong>：不变/很少变的文件，比如图片、CSS、JS、HTML、字体、视频</li> <li><strong>动态资源</strong>：需要Java代码实时计算、查数据库的内容，比如进销存数据、博客文章接口、用户登录</li> </ul> <h5>二、工作流程（以Nginx+Tomcat为例）</h5> <ol> <li>用户发请求，先到 <strong>Nginx</strong></li> <li>若是图片、样式等静态文件 → Nginx 直接返回，<strong>不用走Java服务</strong></li> <li>若是查数据、提交表单这类动态请求 → Nginx 转发给 <strong>Tomcat/SpringBoot</strong> 处理</li> </ol> <h5>三、为什么要这么做</h5> <ol> <li><strong>提速</strong>：Nginx 处理静态文件速度远快于Java服务</li> <li><strong>减压</strong>：Java服务只专注处理业务逻辑，压力变小</li> <li><strong>易维护</strong>：静态资源、动态代码可以分开部署、单独扩容</li> </ol> <blockquote> <p><strong>为了加快网站的解析速度，可以把动态页面和静态页面由不同的服务器来解析，加快解析速度。降低原来单个服务器的压力。</strong></p> </blockquote>https://www.qawkh.com/posts/8/https://www.qawkh.com/posts/8/记录一下近期把说说、照片墙和背景图配置陆续补齐后的开发感受。Tue, 02 Jun 2026 10:32:24 GMT<h1>最近在整理个人站的新功能规划</h1> <p>最近主要完成了几个内容型功能模块：</p> <ul> <li>说说</li> <li>照片墙</li> <li>网站背景图</li> </ul> <h2>一点记录</h2> <p>持续把小功能做完整，比一开始追求大而全更有效。</p> <h2>下一步</h2> <p>后面可以继续补评论、更多内容配置和前台交互细节。</p>https://www.qawkh.com/posts/2/https://www.qawkh.com/posts/2/Tue, 02 Jun 2026 04:54:28 GMT<h1>阿迪斯</h1> <p><strong>重点内容</strong></p> <div><figure><figcaption></figcaption><pre><code><div><div><div>1</div></div><div><span>const</span><span> </span><span>message</span><span> </span><span>=</span><span> </span><span>'hello'</span><span>;</span></div></div></code></pre><div><div></div><div></div></div></figure></div> <p><img src="https://java-aierp.oss-cn-beijing.aliyuncs.com/articles/content/2026/06/02/d592300e5db74e5199727c494101f668.png" alt="21" /></p>https://www.qawkh.com/posts/1/https://www.qawkh.com/posts/1/Tue, 02 Jun 2026 04:33:59 GMT<p>123</p>https://www.qawkh.com/posts/7/https://www.qawkh.com/posts/7/围绕分类预览图、数量和时间字段，设计适合前端直接渲染的接口结构。Sun, 31 May 2026 10:32:24 GMT<h1>照片墙页面的卡片预览数据结构设计</h1> <p>照片墙首页一般不是直接铺平所有照片，而是先展示分类卡片。</p> <h2>分类卡片常见字段</h2> <ul> <li>id</li> <li>name</li> <li>previewImages</li> <li>photoCount</li> <li>updatedAt</li> </ul> <h2>设计原则</h2> <p>返回结果尽量让前端拿到后可以直接渲染，不需要再做复杂拼装。</p> <p><img src="https://java-aierp.oss-cn-beijing.aliyuncs.com/articles/content/2026/06/09/63f795dd23534cb6a07abf509e2bcc96.jpg" alt="82e40c5fb47fa98aacb47c305e4ee27c" /></p>https://www.qawkh.com/posts/6/https://www.qawkh.com/posts/6/整理前端页面在首屏加载、下拉刷新和异常态展示上的处理思路。Fri, 29 May 2026 10:32:24 GMT<h1>uni-app 页面数据请求与加载态处理</h1> <p>前端页面体验往往取决于数据加载阶段的处理是否自然。</p> <h2>常见状态</h2> <ul> <li>首次加载</li> <li>下拉刷新</li> <li>上拉加载更多</li> <li>空数据</li> <li>请求失败</li> </ul> <h2>建议</h2> <p>将页面状态独立管理，不要把所有逻辑都塞进一个布尔值里。</p>https://www.qawkh.com/posts/5/https://www.qawkh.com/posts/5/基于注解方式组织 Mapper，可以在简单后台项目中减少 XML 成本。Wed, 27 May 2026 10:32:24 GMT<h1>MyBatis 注解 SQL 在内容管理系统中的使用</h1> <p>当前项目采用的是注解 SQL 风格。</p> <h2>适合的场景</h2> <ul> <li>SQL 复杂度可控</li> <li>表数量不算特别多</li> <li>团队希望快速定位查询逻辑</li> </ul> <h2>优点</h2> <ul> <li>文件更集中</li> <li>查询与接口定义靠得更近</li> <li>对中小项目维护友好</li> </ul> <h2>注意点</h2> <p>复杂动态 SQL 仍然要注意可读性。 <img src="https://java-aierp.oss-cn-beijing.aliyuncs.com/articles/content/2026/06/09/5a00b1e91d594991a696f3ec1f25dd53.jpg" alt="古见" /></p>https://www.qawkh.com/posts/4/https://www.qawkh.com/posts/4/整理一个中小型项目里统一响应结果、异常处理和分页结构的落地方式。Mon, 25 May 2026 10:32:24 GMT<h1>Spring Boot 接口统一返回结构实践</h1> <p>在中小型后台项目中，统一响应结构可以显著降低前后端联调成本。</p> <h2>核心目标</h2> <ul> <li>成功响应结构统一</li> <li>失败响应结构统一</li> <li>分页结果结构统一</li> </ul> <h2>推荐做法</h2> <ol> <li>使用 Result 统一包裹业务数据</li> <li>使用全局异常处理统一错误输出</li> <li>分页接口统一返回 total、pageNum、pageSize、records</li> </ol> <h2>总结</h2> <p>这套模式适合博客、内容管理、工具站等后台项目。</p>