SSM + VUE 实现的设备维修管理系统实验总结

时间：2021-03-13 15:45:50 阅读：153 评论：0 收藏：0 [点我收藏+]

一、前言

本次实验（设备维修管理系统）从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中