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

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了SSM + VUE 实现的设备维修管理系统实验总结，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含4118字，纯文字阅读大概需要6分钟。

内容图文

一、 前言

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

• 新增客户：发起Post请求，并携带新增用户信息，服务器端接收后，对用户信息进行格式验证，之后通过插入语句插入到数据库中。
• 删除客户：发起Delete请求，并携带删除用户的id，服务器端接受后，在数据库中将对应 id 的记录的 delmark设置为0。
• 更新客户：发起Patch请求，并携带更新后用户信息，服务器端接收后，对用户信息进行格式验证，之后通过更新语句更新对应id的记录到数据库中。
• 查询客户：发起Get请求，并携带需要查询记录的起始点及数量，服务器端接收后，根据记录起始点及数量返回对应数量的客户记录。

三、实验成果

登录页面

客户管理页面

新增客户页面

编辑客户页面

编辑客户页面

删除客户页面

四、实验体会

在这次实验中，我深刻地体会到团队合作地重要性，通过前后端分离能够更好进行团队分工合作，约定好API接口地格式之后，后端只专注与后端，前端则是专注于前端，需要数据，调用接口即可，通过这种方式，还能够更好地进行项目维护。

Vue框架，好用，但是具体实现还是不清楚，需要去多阅读中文文档及源码。
SSM框架，好用，但是需要的XML配置文件太多了，自己要配的东西太多了，听说springboot会比SSM配置简单点，晚点去学！

五、实验建议

暂无

内容总结

以上是互联网集市为您收集整理的SSM + VUE 实现的设备维修管理系统实验总结全部内容，希望文章能够帮你解决SSM + VUE 实现的设备维修管理系统实验总结所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

---