SSM+VUE实现的设备维修管理系统实验总结
⼀、前⾔
本次实验（设备维修管理系统）从12⽉21⽇到23⽇，28⽇到31⽇共进⾏7天。在这7天中我从对 SSM 框架的⼀窍不通，对 Vue 项⽬的略微了解，以及 API 部分⼀脸懵逼到⽬前可以磕磕绊绊的建⽴⼀个完整的项⽬，并了解 SSM 框架实现 Web API 以及前后端完全分离的实例。可以说是学到了很多，但同时也体会到当前我的知识的匮乏。
⼆、实验内容总结
2.1. 摘要
本次实验（设备维修管理系统）。
该系统包含六个模块，分别为
客户管理：对客户信息的CRUD操作。
报修管理
维修管理
结算管理
备件管理
运营监督管理
涉及到5-6张数据表的查询，分别为
⽤户表（表⽰系统的使⽤者，客服、技⼯等）
客户表
备件表
报修设备表
报修记录表ssm框架简单吗
维修记录表等。
⽽由于我组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配置简单点，晚点去学！
五、实验建议
暂⽆

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。