---
title: "#0 系統架構 | Lavuta：線上報修系統開發"
tags: 線上報修系統開發教學, laravel, vue2, tailwind, vue
---

#0 系統架構
==
在分析所需的架構之前，我們必須知道這套系統的核心需求：

> *針對教室進行設備的報修，報修人可以追蹤進度，管理人可以恢復並更新修繕狀況。*

架構和頁面流程大致規劃完，然後用 Figma 來實現就會像是下面這個樣子。
<iframe style="border: 1px solid rgba(0, 0, 0, 0.1);" width="100%" height="450" src="https://www.figma.com/embed?embed_host=share&url=https%3A%2F%2Fwww.figma.com%2Ffile%2FsKFyDLUrQs0tbdXpnSJ9un%2F%25E7%25B7%259A%25E4%25B8%258A%25E5%25A0%25B1%25E4%25BF%25AE%25E7%25B3%25BB%25E7%25B5%25B1-Repairing-Service-System%3Fnode-id%3D0%253A1" allowfullscreen></iframe>
<br><br>

那也可以稍微試著操作一下流程，看看有沒有覺得哪裡不順暢之類的。

<iframe style="border: 1px solid rgba(0, 0, 0, 0.1);" width="100%" height="450" src="https://www.figma.com/embed?embed_host=share&url=https%3A%2F%2Fwww.figma.com%2Fproto%2FsKFyDLUrQs0tbdXpnSJ9un%2F%25E7%25B7%259A%25E4%25B8%258A%25E5%25A0%25B1%25E4%25BF%25AE%25E7%25B3%25BB%25E7%25B5%25B1-Repairing-Service-System%3Fpage-id%3D0%253A1%26node-id%3D50%253A576%26viewport%3D495%252C691%252C0.740945041179657%26scaling%3Dcontain" allowfullscreen></iframe>
<br><br>

系統架構結束之後，緊接著就要開始安裝。
下一篇終於可以開始做點事情了。

<br>
---
> [name=搋兔 Tryto] 為了和我開發的時候同步，原本要把專案建置指令送出了，突然想到要寫筆記，就一口氣寫了兩篇，那個指令的 Enter還沒按下去QQ

###### tags: `線上報修系統開發教學` `laravel` `vue2` `tailwind` `vue`

<!-- === 連結 ============== -->
[postCSS]: #同場加映：postCSS-的安裝和設定

<!-- === CSS設定 ============== -->
<style>
a {
color:#0072E3;
text-decoration: none;
transition:color 0.75s;
}
a:hover {
color:#84C1FF;
text-decoration: none;
transition:color 0.75s;
}
.markdown-body mark {
border-radius: 5px;
color:#c7254e;
background-color:#f9f2f4;
}
</style>

<!-- === CSS：程式碼深色主題 ============== -->
<style>
.markdown-body pre {
background-color: rgb(31, 41, 55);
border: 1px solid #555 !important;
color: #CCCCCC;
border-radius:12px;
/*border-radius:0px;*/
}
.markdown-body pre .hljs-tag {
color: #BAE5FD;
}
.markdown-body pre .hljs-keyword {
color: #20D3EE;
}
.markdown-body pre .hljs-string {
color:#BEF263;
}
.markdown-body pre .hljs-comment {
color:#9CA3B0;
}
.markdown-body pre .hljs-attr {
color:#20D3EE;
}
.markdown-body pre .hljs-name {
color:#E87BF9;
}
.markdown-body pre .hljs-built_in {
color:#F76E79;
}
</style>