---
title: "前言 | Lavuta：線上報修系統開發"
tags: 線上報修系統開發教學, laravel, vue2, tailwind, vue
---

Lavuta：線上報修系統開發
==

最近剛好接到小案子要做一套線上報修系統，所以就選擇用 Lavuta 來實現。

那其實雖然看起來很中二，不過我只是不想讓名字太長， Lavuta 是我自己隨便亂取的縮寫，其實原意就是 ==La==ravel + ==Vu==e + ==Ta==ilwindcss。本來就是要做這三個的整合教學，就乾脆剛好利用這個機會來實現。

沒意外的話，下一篇才會開始講架構，那所以這篇我們就先來談談為何要選用這三個東西的組合。

Laravel
--
首先來聊聊 Laravel。Laravel 是一個 ==MVC 架構的 PHP 框架==，標榜「為網頁藝術家創造的PHP 框架」，雖然我也不是很懂為什麼要這樣寫，但不外乎就是框架本身美得像藝術吧？

那麼這就要說到，一般來說任何後端語言都是一樣，沒有定義所謂的系統架構，==系統架構本身都是開發者自己規劃和定義==的，那像現在常見的 **`MVC 架構`** 就是一個常見的規範，善用後端語言的 **`include`、`物件導向` 和 `樣板`** 的功能來做出漂亮的系統架構，依循這些架構去開發系統，會讓你在開發的時候：

- 開發邏輯清晰
- 維護時間及成本降低
- 程式碼可讀性高

不過要擁有上述優點，可不是只要靠前面說的 include、物件導向和樣板就夠了，我只有說善用這些。其實還有最重要的是==檔案存放的分類法則==，比如 MVC 架構分別就是 Model、View、Controller，以 laravel 舉例，這三者的職責與檔案分類大約如下：

### Model
| 職責 | 後端，負責商業邏輯、資料驗證、與資料庫溝通、API內容 |
|-|-|
| 檔案 | 資料夾通常叫 Models |

### View
| 職責 | 前端，負責畫面排版、使用者操作、使用者事件、呈現資料、抓取API提供的內容 |
|-|-|
| 檔案 | 資料夾通常叫 Views |

### Controller
| 職責 | 基本上是路由，判斷瀏覽的頁面是甚麼，載入相關所需的功能，如瀏覽的是會員頁面，就載入會員頁面的後端功能，和載入會員頁面的前端版面，而組成你所看到的會員頁面。 |
|-|-|
| 檔案 | 資料夾通常叫 Controllers |
<br>

Vue
--
Vue 是前端三大框架之一，這邊使用的版本是 Vue 2
<br>

Tailwindcss
--
Tailwindcss
<br>

基本的三樣東西介紹完了，下一篇就會進入系統架構規劃的部分。
<br>

後記
--
其實 Vue 已經出到 3 了，可是在 Laravel 安裝要另外做設定，那就不會是這系列教學 / 這個案子的首選了，畢竟這個案子做歸做，但是也是順便拿來寫教學內容用的，不但可以讓後面接手的人從零開始了解這個案子，還可以讓其它想學的人好入門。

<br>
---
> [name=搋兔 Tryto] 可惡，這感覺代表我要開始肝了嗎？ 我還有 Tailwind 聖經繁體版要翻欸。

###### 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>