SSM + VUE 實現的設備維修管理系統實驗總結

本文轉載自查看原文 2021-03-13 14:28 319 總結/ 作業

一、前言

本次實驗（設備維修管理系統）從12月21日到23日，28日到31日共進行7天。在這7天中我從對 SSM 框架的一竅不通，對 Vue 項目的略微了解，以及 API 部分一臉懵逼到目前可以磕磕絆絆的建立一個完整的項目，並了解 SSM 框架實現 Web API 以及前后端完全分離的實例。可以說是學到了很多，但同時也體會到當前我的知識的匱乏。

二、實驗內容總結

2.1. 摘要

本次實驗（設備維修管理系統）。

該系統包含六個模塊，分別為

客戶管理：對客戶信息的CRUD操作。
報修管理
維修管理
結算管理
備件管理
運營監督管理

涉及到5-6張數據表的查詢，分別為

用戶表（表示系統的使用者，客服、技工等）
客戶表
備件表
報修設備表
報修記錄表
維修記錄表等。

而由於我組3人，2人考研，時間緊，且項目中所用技術均為第一次接觸，故只完成了登錄，以及客戶管理模塊。后續功能以后添加。

2.2. 實驗的項目結構

2.2.1. SSM框架

在這次實驗中，要求使用 SSM 框架。
而我在這之前是使用 ASP.NET Webform 開發網站的，完全沒有框架，在最近的2個實驗中，由於項目逐漸變大，我在 Webform 應用中利用自動工廠 AutoFac 以及 Model，USL層，BLL層，DAL層手動搭建了一個傳統的 Web 的三層框架，在其中需要編寫大量工具類，如DAL層中訪問完數據庫后的數據如何轉換為 Model 中對應的類的對象（需要編寫Model轉換類），且在這之前的數據庫訪問同樣需要建立 SQLHelper工具類。總之在完成實驗基本業務邏輯的同時，需要被這些大量重復的代碼困擾，是我們不能專注於業務的實現。
而這次所使用的 SSM 框架，在這之中：

Spring Core：幫我們解決了IoC容器（不再需要自己去安裝使用 AutoFac 等一類的第三方IoC容器了），且還提供了AOP（面向切片編程）。
Spring-mvc：以 MVC 模式進行網站開發，降低各模塊的耦合性，提高代碼復用性，以及降低代碼維護時的難度。
Mybatis：一個輕量級的ORM框架，通過它，我們可以完成對數據庫的操作，以及數據庫表對象映射到 Model 實體對象。（不需要再去手動賦值，可直接返回 Model 中實體的類型）

在上述 SSM 框架的描述中，我們不在被使用 Webform 時，各與對業務邏輯不相關，且又不得不寫的公共部分所困擾，而能夠更加專注於業務的實現。（如在 Webform 中，我們使用 ADO.NET 訪問數據庫，實際上業務邏輯只有 SQL 語句那一段，但我們不等不編寫連接數據庫，打開連接，關閉連接等一些列操作）

2.2.2. Vue框架

在這次實驗中，我將最近學習的 Vue 框架加入進來，這時，我們就需要了解這個前端框架是如何與后端進行交互的。通過在 GITHUB 上搜尋項目，我發現可以使用 API 接口連接前后端，在 Vue 框架中，我們可以使用第三方 axios 包進行 http 請求，通過調用 API 接口，提交數據或獲取后端中的一些數據，在這之中使用 JSON 格式進行傳輸。
Vue框架，可分為以下幾個部分

Vue Component：vue組件，即頁面或可復用的HTML標簽快，以及封裝的相應的操作。
Vue router：vue路由，通過它實現頁面之間的跳轉，以及登錄攔截等操作。
Vuex：通過它，我們可以實現狀態管理等，比如用戶登錄后的狀態管理。

在 Vue 框架中，我們不在需要像傳統的 JS， JQuery “面向DOM編程”，通過操作 DOM 元素進行賦值，取值等操作，而是 “面向數據編程”，所有的操作都是以數據為中心，Vue實例 options 下的 data 中的數據發生改變時，會同步渲染到頁面的 DOM 元素上。

2.2.3. 功能流程

在本次實驗中，結合了上述兩個框架，成為一個完整的前后端分離的項目。
登錄功能中，用戶發起登錄請求並攜帶着登錄信息（用戶名，密碼等）發送給服務器端的API接口，后端接收到請求，進行登錄業務的處理，根據用戶查詢數據庫中對應用戶的密碼，並與請求中的密碼進行比對，成功后，通過JWT工具類生成token，返回給用戶，作為登錄后的令牌，用戶之后的操作則需要在請求頭中添加token信息，已告訴服務器端該用戶信息。
客戶信息CRUD中