MHQQysh.github.io/computerproject2.html at master · MHQQysh/MHQQysh.github.io · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>后端项目：英雄联盟小学管理系统 | 袁诗鸿</title>
  <meta name="description" content="袁诗鸿的 Java SSM 后端项目记录。">
  <link rel="icon" href="static/picture/avator.jpg">
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;700&family=Noto+Sans+SC:wght@400;500;700&family=Noto+Serif+SC:wght@400;600;700&family=Playfair+Display:wght@400;600;700&family=Source+Serif+4:opsz,wght@8..60,300;8..60,400;8..60,600&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="style.css">
</head>
<body
  data-page="projects"
  data-title-zh="后端项目：英雄联盟小学管理系统 | 袁诗鸿"
  data-title-en="Primary-School Management System | Shihong Yuan"
  data-description-zh="袁诗鸿的 Java SSM 后端项目记录。"
  data-description-en="Backend case study for a Java SSM management system project by Shihong Yuan."
>
  <header class="site-header">
    <nav class="nav-shell container">
      <a class="brand" href="index.html" aria-label="Shihong Yuan home">
        <span class="brand-mark"><img src="static/picture/avator.jpg" alt="Shihong Yuan avatar"></span>
        <span class="brand-copy">
          <span class="brand-title" data-i18n-en="Shihong Yuan">袁诗鸿</span>
          <span class="brand-subtitle" data-i18n-en="Portfolio archive">作品集档案</span>
        </span>
      </a>
      <button class="nav-toggle" type="button" aria-expanded="false" aria-controls="nav-menu" data-nav-toggle>
        <span></span><span></span><span></span>
      </button>
      <div class="nav-menu" id="nav-menu" data-nav-menu>
        <div class="nav-links">
          <a class="nav-link" href="index.html" data-page-link="home" data-i18n-en="Home">首页</a>
          <a class="nav-link" href="index.html#testi" data-i18n-en="Research">科研</a>
          <a class="nav-link" href="index.html#serv" data-page-link="projects" data-i18n-en="Projects">项目</a>
          <a class="nav-link" href="index.html#blogs" data-i18n-en="Life">生活</a>
          <a class="nav-link" href="index.html#education" data-i18n-en="Education">教育经历</a>

        </div>
        <div class="lang-toggle" aria-label="Language switcher">
          <button class="lang-toggle-btn" type="button" data-lang-option="zh">中文</button>
          <span>/</span>
          <button class="lang-toggle-btn" type="button" data-lang-option="en">EN</button>
        </div>
      </div>
    </nav>
  </header>

  <main>
    <section class="page-hero">
      <div class="project-dense-container page-heading">
        <p class="eyebrow" data-i18n-en="Computer Project / Back End">计算机项目 / 后端</p>
        <h1 class="page-title" data-i18n-en="Primary-School Management System">后端项目：英雄联盟小学管理系统</h1>
        <p class="page-summary" data-i18n-en="A Java SSM project centered on CRUD logic, environment setup, and the first real experience of understanding how frontend and backend connect.">
          一个以 Java SSM 为核心的项目，重点在增删改查、环境配置，以及第一次真正理解前后端如何协同工作。
        </p>
      </div>
    </section>

    <section class="page-shell">
      <div class="project-dense-container story-layout">
        <div class="story-text-column">
          <article class="story-card">
            <p class="mini-label" data-i18n-en="Overview">概述</p>
            <h2 data-i18n-en="From “it runs” to “I understand why it runs”">从“能跑起来”到“理解为什么能跑”</h2>
            <p data-i18n-en="For me, this project mattered less as a polished product and more as the first time backend logic became intelligible instead of opaque. Java SSM stopped being a list of terms and started becoming an actual system I could reason about.">
              对我来说，这个项目的重要性不在于它有多成熟，而在于它是我第一次真正把“后端系统逻辑”从黑箱变成可理解对象的过程。Java SSM 不再只是几个概念，而开始成为一套我能够推理和调试的系统。
            </p>
            <p data-i18n-en="The original notes described the experience very honestly: before the project ran, everything felt painful; after it ran, understanding finally began. That is still the best summary of the whole process.">
              原始页面里有一句很准确的话：项目跑通之前很痛苦，跑通之后才真正开始理解。这几乎就是整个过程最贴切的总结。
            </p>
          </article>

          <article class="story-card">
            <p class="mini-label" data-i18n-en="What I learned">我学到了什么</p>
            <h2 data-i18n-en="Backend development is less visible, but not less concrete">后端比前端更不直观，但并不更抽象</h2>
            <p data-i18n-en="What this project gave me was not just CRUD practice. More importantly, it taught me how frontend and backend responsibilities actually connect, how debugging tools matter, and how environment setup can dominate progress before the product is even meaningful.">
              这个项目给我的并不只是 CRUD 实践。更重要的是，它让我开始理解前后端职责究竟是怎样连起来的、调试工具为什么重要，以及在产品真正有意义之前，环境配置会如何决定推进速度。
            </p>
            <p data-i18n-en="Compared with frontend work, backend still felt harder to enter because so many moving parts were hidden. But once the system ran, those hidden parts became much clearer, and each subsequent change stopped feeling like blind trial and error.">
              和前端相比，后端仍然更难入门，因为太多关键部分都隐藏在结构里面。但一旦系统跑通，这些原本看不见的东西就会一下清晰很多，后续每一次修改也不再像是盲目试错。
            </p>
          </article>

          <article class="story-card">
            <p class="mini-label" data-i18n-en="Reflection">项目反思</p>
            <h2 data-i18n-en="A first real backend learning curve">第一次真正像样的后端学习曲线</h2>
            <p data-i18n-en="This project was still relatively small, but it already showed me where the next set of problems would come from: larger file structures, more dependencies, richer frontend logic, and more realistic deployment pain. That is exactly why it mattered.">
              这个项目本身规模不算大，但已经足够让我看到下一批真正的问题会从哪里冒出来：更长的文件结构、更多依赖、更复杂的前端逻辑，以及更真实的部署压力。这也正是它值得保留在作品集里的原因。
            </p>
          </article>
        </div>

        <div class="story-media-column">
          <div class="story-media-card">
            <p class="story-media-title" data-i18n-en="Demo Video">演示视频</p>
            <video src="static/projects/igem-wiki-videos/igem-video-2.mp4" controls preload="metadata" playsinline></video>
            <p class="story-media-caption" data-i18n-en="Imported from the project1 folder and placed as the first media item for this page.">从 `project1` 文件夹整理进来的录屏，作为这个页面右侧媒体区的第一个视频。</p>
          </div>
          <div class="story-media-card">
            <p class="story-media-title" data-i18n-en="Screen 01">界面 01</p>
            <img src="static/picture/backend3.jpg" alt="Backend project screenshot 1">
            <p class="story-media-caption" data-i18n-en="A representative project screen from the backend system interface.">最能代表这个后端项目界面的截图之一。</p>
          </div>
          <div class="story-media-card">
            <p class="story-media-title" data-i18n-en="Screen 02">界面 02</p>
            <img src="static/picture/backend2.jpg" alt="Backend project screenshot 2">
            <img src="static/picture/backend1.jpg" alt="Backend project screenshot 3">
            <p class="story-media-caption" data-i18n-en="Additional views showing the working interface and page flow.">补充展示系统页面与界面流程的截图。</p>
          </div>
          <div class="story-media-card">
            <p class="story-media-title" data-i18n-en="Screen 03">界面 03</p>
            <img src="static/picture/backend4.jpg" alt="Backend project screenshot 4">
            <img src="static/picture/backend5.jpg" alt="Backend project screenshot 5">
            <p class="story-media-caption" data-i18n-en="More screens that document the project’s functional completeness.">用于说明项目功能完整度的更多界面截图。</p>
          </div>
        </div>
      </div>
    </section>
  </main>

  <footer class="site-footer">
    <div class="container footer-grid">
      <div>
        <p class="footer-brand" data-i18n-en="Shihong Yuan">袁诗鸿</p>
        <p class="footer-copy" data-i18n-en="Case-study archive rebuilt from the original portfolio.">从原始作品集重建而来的项目档案页。</p>
      </div>
      <div class="footer-links">
        <a href="index.html" data-i18n-en="Home">首页</a>
        <a href="index.html#testi" data-i18n-en="Research">科研</a>
        <a href="index.html#serv" data-i18n-en="Computer Projects">计算机项目</a>
        <a href="index.html#ports" data-i18n-en="Mechanical Projects">机械项目</a>
        <a href="index.html#blogs" data-i18n-en="Life">生活</a>
      </div>
      <div class="footer-meta">
        <span>Contact: shihong.23@intl.zju.edu.cn</span>
        <span><span data-i18n-en="Year">年份</span>: <span data-year></span></span>
      </div>
    </div>
  </footer>

  <script src="script.js"></script>
</body>
</html>