1. System introduction
This project is developed using idea tools, written with html+springboot+mybatis+jquery+thymeleaf technology, and the database is developed using mysql and navicat tool.
The system is divided into 2 roles: administrator and user
2. Module Introduction
administrator
1. Login
2. User management
3. Salary management
4. Announcement management
5. Feedback management
6. Personal information management
user
1. Log in and register
2. Personal information management
3. Check salary
4. Check the announcement
5. Feedback management
Project Introduction:
Difficulty Level: ✩✩✩
User Type: 2 Roles (Administrator, User)
Design pattern: MVC
Project architecture: B/S architecture
Development language: Java language
Front-end technology: bootstrap+ HTML, CSS, JS, JQuery, thymeleaf, etc.
Back-end technology: springboot+mybatis framework
Running environment: Windows7 or 10, JDK1.8
Running tools: This system is developed using idea. It only supports idea running and does not support MyEclipse and eclipse running. Because the skeletons of the three are different, forcing the import to open and run may lead to unknown errors.
Database: MySQL version 5.5/5.7/8.0
Whether it is based on Maven environment: Yes
Whether it uses a framework: Yes
Number of database tables: 5 tables
Number of JSP pages: more than 10
Whether there is paging: There is paging
Related screenshots
Related code
Log in
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>工资管理系统</title>
<link rel="icon" th:href="@{/public/favicon.ico}" type="image/x-icon"/>
<link rel="bookmark" th:href="@{/public/favicon.ico}" type="image/x-icon"/>
<link rel="stylesheet" type="text/css" th:href="@{/css/bootstrap.css}">
<link rel="stylesheet" type="text/css" th:href="@{/css/back.css}">
<link rel="stylesheet" type="text/css" th:href="@{/css/bootstrap-theme.css}">
<script type="text/javascript" th:src="@{/js/jquery-3.6.0.js}"></script>
<script type="text/javascript" th:src="@{/js/login.js}"></script>
<script th:src="@{/layui/layui.js}" charset="utf-8"></script>
<script>
$(function() {
//防止页面后退
history.pushState(null, null, document.URL);
window.addEventListener('popstate', function () {
history.pushState(null, null, document.URL);
});
})
</script>
</head>
<body onload="loadTopWindow()">
<div id="magicalDragScene" class="mc-root mc-ui-absolute-pane">
<h1 style="margin-left: 40%;margin-top: 15%;font-family: 隶书;font-size: 60px;color: black" >工资管理系统</h1>
<br>
<div id="tmd" style="margin-left: 40%;width: 25%;height: 300px;">
<form style="margin: 0 auto;width: 80%;height: 300px;" th:action="@{/loginUser}" method="post" onsubmit="return regCheck()">
<h1 class="h3 mb-3 font-weight-normal" style="color:white;font-family: 隶书;text-align: center;" >登录</h1>
<input id="username" name="username" class="layui-input" type="text" th:placeholder="请填写用户名"/>
<input id="password" name="password" class="layui-input" style="margin-top: 5px" type="password" th:placeholder="请填写用户密码" origin-type="password"/>
<br><br>
<select name="type" class="form-control" style="width: 75%">
<option value="1" selected>管理员</option>
<option value="2">用户</option>
</select>
<!--<input name="type" value="1" style="margin-top: 5px" type="radio" checked/>管理员
<input name="type" value="2" style="margin-top: 5px" type="radio" />救助者-->
<!-- <input name="remember" type="checkbox" style="margin-top: 15px;"> <span style="color: #43a047;" ></span>-->
<span id="statusTip" style="color: #d62727;font-size: 15px;margin-left: 40%" th:text="${status}"></span>
<br>
<!-- <div class="form-check form-check-inline"></div>-->
<p class="mt-5 mb-3 text-muted text-sm-right" style="margin-top: 10px"><span >还没有账号,</span>
<a type="button" th:onclick="reg()" >用户注册</a>
<!-- <a class="text-info" th:href="@{/toReg2}" style="color: #00a1d6;margin-left: 2px" >救援者注册</a>-->
</p>
<button class="layui-btn1" style="width: 300px;height: 40px;font-size: 16px;color: white" type="submit">登录</button>
</form>
</div>
<br>
<!-- <a style="color: white;margin-left: 75%" th:href="@{/login.html(language='zh_CN')}">中文</a>
<a style="color: white" th:href="@{/login.html(language='en_US')}">English</a>-->
</div>
<script>
layui.use([ 'form','jquery','layer','upload' ], function() {
var form = layui.form,
layer = layui.layer,
$ = layui.jquery,
upload = layui.upload;
form.render();//这句一定要加，占坑
window.reg = function(e){
layer.open({
//调整弹框的大小
area:['500px','800px'],
shadeClose:true,//点击旁边地方自动关闭
//动画
anim:2,
//弹出层的基本类型
type: 2,
title: '用户注册',
//刚才定义的弹窗页面
content: 'register', //这里content是一个URL，如果你不想让iframe出现滚动条，你还可以content: ['http://sentsin.com', 'no']
});
}
})
</script>
</body>
</html> /**
* 登录
* @param username
* @param password
* @param type
* @param httpSession
* @param model
* @return
* @throws UnsupportedEncodingException
*/
@RequestMapping(value = "/loginUser",method = RequestMethod.POST)
public String loginUser(String username, String password, String type, HttpSession httpSession, Model model) throws UnsupportedEncodingException {
Admin admin = new Admin();
if(type !=null&& type.equals("1")){
admin = loginService.selectAdmin(username,password);
if (admin != null){
httpSession.setAttribute("username",admin.getUsername());
httpSession.setAttribute("admin",admin);
httpSession.setAttribute("type",type);
model.addAttribute("type",type);
return "home/homepage";
}else{
model.addAttribute("status","账号或者密码输入错误！");
return "login";
}
}
else if(type.equals("2")){//用户
User user = loginService.selectUser(username,password);
if(user != null){
httpSession.setAttribute("username",user.getRealname());
httpSession.setAttribute("user",user);
httpSession.setAttribute("type",type);
model.addAttribute("type",type);
return "home/homepage";
//return "home/homepage";
}else{
model.addAttribute("status","账号或者密码输入错误！");
return "login";
}
}else{
model.addAttribute("status","账号或者密码输入错误！");
return "login";
}
}