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

最新推荐文章于 2024-08-18 21:36:31 发布

#上善若水

最新推荐文章于 2024-08-18 21:36:31 发布

阅读量1k

点赞数 12

文章标签： java 开发语言

本文链接：https://blog.csdn.net/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;">
                    <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 "上传成功！";
    }
}

#上善若水

关注

12
点赞
踩
16

收藏

觉得还不错? 一键收藏
0
评论
【项目】基于Java的高校宿舍电器维修信息平台

基于Java的高校宿舍电器维修信息平台1、效果展示登录页首页管理页统计页2、项目详情主要项目技术栈SpringBoot（Java）、MyBatis-puls、LayUI运行环境windows10Java 17MySQL 8.1.0Maven 3.9.5SpringBoot 3.1.5MyBatis-Plus 3.5.3.1fastjson 1.2.67LayUI 2.6.3jQuery 3.4.1font-awesome 4.7.0
复制链接

扫一扫