基于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;"> <a id="logup" style="color:#1391ff;">去注册</a> </div> </form> </div> </div> <div class="footer"> ©版权所有 2023-202x 张燕<span class="padding-5">|</span><a target="_blank" href="http://www.miitbeian.gov.cn">黔ICP备xxxxxxxx号</a> </div> <script src="../lib/layui-v2.6.3/layui.js" charset="utf-8"></script> <script> layui.use(['form', 'jquery'], function () { var $ = layui.jquery, form = layui.form, layer = layui.layer; // 登录过期的时候,跳出ifram框架 if (top.location != self.location) top.location = self.location; $('.bind-password').on('click', function () { if ($(this).hasClass('icon-5')) { $(this).removeClass('icon-5'); $("input[name='password']").attr('type', 'password'); } else { $(this).addClass('icon-5'); $("input[name='password']").attr('type', 'text'); } }); $('.icon-nocheck').on('click', function () { if ($(this).hasClass('icon-check')) { $(this).removeClass('icon-check'); } else { $(this).addClass('icon-check'); } }); //点击忘记密码 $('.forget-password').on('click', function () { layer.msg('请联系管理员!'); }); //注册按钮 $('#logup').on('click', function () { // layer.msg('请联系管理员!'); window.location = './logup/signup.html'; }); // 进行登录操作 form.on('submit(login)', function (data) { data = data.field; if (data.id == '') { layer.msg('用户名不能为空'); return false; } if (data.password == '') { layer.msg('密码不能为空'); return false; } $.ajax({ url: "/user/login", type: "POST", data: { 'id': data.id, 'password': data.password }, dateType: "application/JSON", "success": function (e) { layer.msg(e); if(e=='登录成功'){ window.location = '../index.html'; } } }) return false; }); }); </script> </body> </html>
-
前端代码-注册
<head> ... </head> <body> <section class="signin"> <div class="container-fluid"> <div class="row"> <div class="col-sm-4"> <div class="single-sign"> <div class="sign-bg"> </div><!--/.sign-bg --> </div><!--/.single-sign --> </div> <div class="col-sm-8"> <div class="single-sign"> <div class="sign-content"> <h2>学生注册</h2> <div class="signin-form"> <div class=" "> <div class=" "> <form action="signin.html"> <div class="form-group"> <label for="signin_form">学号/手机号</label> <input name="id" style="padding: 0 18px;" type="number" class="form-control" id="signin_form" placeholder="请输入学号/手机号"> </div><!--/.form-group --> <div class="form-group"> <label for="signin_form">密码</label> <input name="password" type="password" class="form-control" id="signin_form" placeholder="请设置密码"> </div><!--/.form-group --> </form><!--/form --> </div><!--/.col --> </div> </div> <div class="signin-footer"> <button type="button" class="btn signin_btn" data-toggle="modal" data-target=".signin_modal"> 注册 </button> <p style="text-align: center;"> <a href="../login.html" style="color:#1391ff;">去登录</a> </p> </div> </div> </div><!--/.single-sign --> </div><!--/.col --> </div><!--/.row--> </div><!--/.container --> </section> <footer class="footer-copyright"> <div id="scroll-Top"> <i class="fa fa-angle-double-up return-to-top" id="scroll-top" data-toggle="tooltip" data-placement="top" title="" data-original-title="Back to Top" aria-hidden="true"></i> </div> </footer> ... <script> layui.use(['form','jquery'], function () { var $ = layui.jquery, form = layui.form, layer = layui.layer; $('.btn').on('click', function (e) { e.preventDefault(); var id = $('input[name="id"]').val(); var password = $('input[name="password"]').val(); $.ajax({ url: "/user/addUser", type: "POST", data: { 'id': id, 'password': password }, dateType: "application/JSON", "success": function (e) { layer.msg(e); } }) }); }); </script> </body> </html>v
-
后端service
... @Service @Transactional public class UserServiceImpl implements UserService { @Autowired UserMapper userMapper; @Autowired StudentMapper studentMapper; @Override public DataVO<User> findData(Integer page, Integer limit) { DataVO<User> dataVO = new DataVO<>(); dataVO.setCode(0); dataVO.setMsg("成功"); //分页 IPage<User> userIPage = new Page<>(page, limit); IPage<User> result = userMapper.selectPage(userIPage, null); //通过查询数据库的求总数 dataVO.setCount(result.getTotal()); dataVO.setData(result.getRecords()); return dataVO; } @Override public Integer selectUser(String id, String password) { User user = userMapper.selectById(id); if (user == null) { return 10; }//用户不存在 if (!user.getPassword().equals(password)) { return 11; }//密码错误 return user.getIdentity(); } @Override public String addUser(String id, String password, Integer identity) { if (userMapper.selectById(id) != null) { return "用户已存在!"; } User user = new User(); user.setId(id); user.setPassword(password); user.setIdentity(identity); Student student = new Student(); student.setId(id); userMapper.insert(user); studentMapper.insert(student); return "用户创建成功!"; } @Override public Integer getIdentity(String id) { return userMapper.selectById(id).getIdentity(); } @Override public String update(String id, String password) { User user = userMapper.selectById(id); user.setPassword(password); userMapper.updateById(user); return "更新成功!"; } }
-
后端Controller
... @CrossOrigin @RestController @RequestMapping("/user") public class UserController { @Autowired private UserService userService; @Autowired HttpServletResponse response; @Autowired HttpServletRequest request; @Autowired HttpSession session; @RequestMapping("/list") public DataVO list(Integer page, Integer limit) { return userService.findData(page, limit); } @RequestMapping("/addUser") public String addUser(String id, String password) { return userService.addUser(id, password, 1); } @RequestMapping("/login") public String login(String id, String password) { Integer flag = userService.selectUser(id, password); if (flag == 10) { return "用户不存在"; } if (flag == 11) { return "用户密码错误"; } session.setAttribute("id", id); session.setAttribute("password", password); session.setAttribute("identity", flag); return "登录成功"; } @RequestMapping("/init") public String init() { Integer flag = (Integer) session.getAttribute("identity"); if (session.getAttribute("identity") != null) { if (flag == 0) { return Constant.MENU0; } if (flag == 1) { return Constant.MENU1; } if (flag == 2) { return Constant.MENU2; } } return Constant.MENU3; } @RequestMapping("/is") public Integer getIdentity() { return (Integer) session.getAttribute("identity"); } @RequestMapping("/update") public String update(String id, String new_password) { return userService.update(id, new_password); } @RequestMapping("/exit") public String exit() { if (session != null) { session.invalidate();//清空session } return "用户已退出"; } }
-
-
拦截器
(请求认证)
... //用户登录拦截器 @Configuration public class LoginInterceptor implements HandlerInterceptor { @Override public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler) throws Exception { //登录逻辑 HttpSession session = request.getSession(); Object id = session.getAttribute("id"); if (id != null) { return true;//放行 } response.sendRedirect("/page/login.html"); return false; } }
注册拦截器
... @Configuration public class MyMvcConfig implements WebMvcConfigurer { @Override public void addInterceptors(InterceptorRegistry registry) { registry.addInterceptor(new LoginInterceptor()) .addPathPatterns("/**")//拦截所以请求 .excludePathPatterns("/user/login", "/user/addUser", "/api/**", "/css/**", "/images/**", "/js/**", "/lib/**", "/page/**");//放行资源 } }
-
后端文件上传
... @Component public class Upload { public String uploadImg(MultipartFile file, String name) { //非空检测 if (file.isEmpty()) return "空文件!"; String filePath = Constant.IMG_PATH + name + ".jpg";//生成绝对路径 //删除原来头像 File oldImg = new File(filePath); if (oldImg.exists()) { oldImg.delete(); } try { byte[] bytes = file.getBytes(); Path path = Paths.get(filePath); Files.write(path, bytes); } catch (IOException e) { e.printStackTrace(); } return "上传成功!"; } }