【项目】基于Java的高校宿舍电器维修信息平台-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_30130205/article/details/140052317

基于Java的高校宿舍电器维修信息平台

1、效果展示

登录页
首页
管理页
统计页

2、项目详情

主要项目技术栈

SpringBoot（Java）、MyBatis-puls、LayUI

运行环境

windows10
Java 17
MySQL 8.1.0
Maven 3.9.5
SpringBoot 3.1.5
MyBatis-Plus 3.5.3.1
fastjson 1.2.67
LayUI 2.6.3
jQuery 3.4.1
font-awesome 4.7.0

其他

IntelliJ IDEA 2023.2.1
Visual Studio Code 1.84.2

3、项目结构

数据库结构

在这里插入图片描述

整体结构

在这里插入图片描述

后端代码

在这里插入图片描述

前端代码

在这里插入图片描述

4、设计创新点

用户体验优化：Layui 是一套基于jQuery的前端UI框架，它注重简洁、模块化和易于使用。使用 Layui 可以快速搭建后台系统的前端界面，并通过丰富的组件和模块，提高用户操作的便捷性和响应速度。
前后端分离：Layui 作为一个前端框架，与 Spring Boot 后端框架结合，可以实现前后端分离的开发模式。这种模式可以提高系统的可维护性和可扩展性。
安全性增强：Spring Boot 提供了强大的安全特性，如身份验证、授权等。结合 Layui，可以更好地控制用户访问和操作，提高后台系统的安全性。
易于集成：Layui 和 Spring Boot 都具有很好的模块化和扩展性，这意味着它们可以轻松地与其他系统或服务集成，为后台管理系统提供更多的可能性。
易于维护和升级：由于 Layui 和 Spring Boot 都具有清晰的架构和丰富的文档支持，对于后台管理系统的维护和升级变得更加容易。
响应式设计：Layui 支持响应式布局，这意味着后台管理系统可以适应不同的设备和屏幕尺寸，提供一致的用户体验。
数据可视化：ECharts 是一个使用 JavaScript 实现的开源可视化库，可以生成多种类型的图表，包括折线图、柱状图、饼图、散点图等。通过 ECharts，可以将后台管理系统中的数据以直观、生动的方式呈现给用户，帮助用户更好地理解数据和分析趋势。

5、功能结构图

在这里插入图片描述

6、页面截图

登录页
注册页
公告页
宿舍报修
- 申请报修页
- 我的申请页
- 报修概况页
维修管理
- 接单页
- 我的接单页
- 我的评价页
- 维修概况页
系统管理
- 学生管理
- 工程师管理
- 订单管理
- 分类管理
- 公告管理
宿舍维修概况
关于
- 关于作者
- 关于系统
修改个人信息
修改密码

7、关键代码

前端代码-登录

<!DOCTYPE html>
<html>

<head>....</head>

<body>
    <div class="main-body">
        <div class="login-main">
            <div class="login-top">
                <span>系统登录</span>
                <span class="bg1"></span>
                <span class="bg2"></span>
            </div>
            <form class="layui-form login-bottom">
                <div class="center">
                    <div class="item">
                        <span class="icon icon-2"></span>
                        <input type="text" name="id" lay-verify="required" placeholder="请输入登录账号" maxlength="24" />
                    </div>

                    <div class="item">
                        <span class="icon icon-3"></span>
                        <input type="password" name="password" lay-verify="required" placeholder="请输入密码" maxlength="20">
                        <span class="bind-password icon icon-4"></span>
                    </div>

                </div>
                <div class="tip">
                    <a class="forget-password">忘记密码？</a>
                </div>
                <div class="layui-form-item" style="text-align:center; width:100%;height:100%;margin:0px;">
                    <button class="login-btn" lay-submit="" lay-filter="login">立即登录</button>
                </div>
                <div style="width: 100%;align-content: center;text-align: center;margin-top: 1rem;">