终章 完成主页以及项目总结
提示：本博客个为人独立博客，不是权威，仅供参考！所有思路只做交流之用！如有不足之处，望各位在评论区友善指正。
前言
这一章将完成主页以及对本项目进行总结
一、完成主页
1.后端
在DormitoryStudentMapper.xml中添加查询楼宇入住数量和查询床位对应学生的sql语句
在DormitoryStudentMapper接口中添加对应的方法
在DormitoryStudentService中添加对应的方法
创建MainController
package com.sisyphus.controller;
import com.github.pagehelper.PageInfo;
import com.sisyphus.entity.Building;
import com.sisyphus.entity.Dormitory;
import com.sisyphus.entity.Notice;
import com.sisyphus.service.BuildingService;
import com.sisyphus.service.DormitoryService;
import com.sisyphus.service.DormitoryStudentService;
import com.sisyphus.service.NoticeService;
import com.sisyphus.utils.Result;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
import java.text.DecimalFormat;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
@RestController
@RequestMapping("/main")
public class MainController {
@Autowired
private BuildingService buildingService;
@Autowired
private DormitoryService dormitoryService;
@Autowired
private DormitoryStudentService dormitoryStudentService;
@Autowired
private NoticeService noticeService;
@GetMapping("/building")
public Result building(){
Building building = new Building();
building.setLimit(1000);
PageInfo<Building> pageInfo = buildingService.query(building);
List<Map<String,Object>> list = new ArrayList<>();
DecimalFormat df = new DecimalFormat("######0.00");
pageInfo.getList().forEach(entity->{
Map<String,Object> map = new HashMap<>();
Dormitory param = new Dormitory();
param.setBuildingId(entity.getId());
param.setLimit(1000000);
PageInfo<Dormitory> dormitoryPageInfo = dormitoryService.query(param);
int all = dormitoryPageInfo.getList().size();
map.put("name",entity.getName());
map.put("all",all);
int used = dormitoryStudentService.countByBuildingId(entity.getId());
map.put("used",used);
int unused = all-used;
map.put("unused",unused);
if(all == 0){
map.put("percent",0);
}else{
map.put("percent",df.format((float)used/all));
}
list.add(map);
});
return Result.ok(list);
}
@GetMapping("/notice")
public Result notice(){
Notice notice = new Notice();
notice.setLimit(5);
PageInfo<Notice> pageInfo = noticeService.query(notice);
return Result.ok(pageInfo.getList());
}
}
改正StudentMapper.xml中代码生成器产生的一个小纰漏
在UerService中添加updatePwd方法
在UserController中添加info方法和pwd方法
改进OrgController中的create方法
2.前端
在store.js中添加setLoginInfo、getLoginInfo和getLoginType方法
改进login页面
改进index页面
重写main页面
<style>
.welcome .layui-card {border:1px solid #f2f2f2;border-radius:5px;}
.welcome .icon {margin-right:10px;color:#1aa094;}
.welcome .icon-cray {color:#ffb800 !important;}
.welcome .icon-blue {color:#1e9fff !important;}
.welcome .icon-tip {color:#ff5722 !important;}
.welcome .layuimini-qiuck-module {text-align:center;margin-top:10px}
.welcome .layuimini-qiuck-module a i {display:inline-block;width:100%;height:60px;line-height:60px;text-align:center;border-radius:2px;font-size:30px;background-color:#F8F8F8;color:#333;transition:all .3s;-webkit-transition:all .3s;}
.welcome .layuimini-qiuck-module a cite {position:relative;top:2px;display:block;color:#666;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;font-size:14px;}
.welcome .welcome-module {width:100%;height:210px;}
.welcome .panel {background-color:#fff;border:1px solid transparent;border-radius:3px;-webkit-box-shadow:0 1px 1px rgba(0,0,0,.05);box-shadow:0 1px 1px rgba(0,0,0,.05)}
.welcome .panel-body {padding:10px}
.welcome .panel-title {margin-top:0;margin-bottom:0;font-size:12px;color:inherit}
.welcome .label {display:inline;padding:.2em .6em .3em;font-size:75%;font-weight:700;line-height:1;color:#fff;text-align:center;white-space:nowrap;vertical-align:baseline;border-radius:.25em;margin-top:.3em;}
.welcome .layui-red {color:red}
.welcome .main_btn > p {height:40px;}
.welcome .layui-bg-number {background-color:#F8F8F8;}
.welcome .layuimini-notice:hover {background:#f6f6f6;}
.welcome .layuimini-notice {padding:7px 16px;clear:both;font-size:12px !important;cursor:pointer;position:relative;transition:background 0.2s ease-in-out;}
.welcome .layuimini-notice-title,.layuimini-notice-label {padding-right:70px !important;text-overflow:ellipsis !important;overflow:hidden !important;white-space:nowrap !important;}
.welcome .layuimini-notice-title {line-height:28px;font-size:14px;}
.welcome .layuimini-notice-extra {position:absolute;top:50%;margin-top:-8px;right:16px;display:inline-block;height:16px;color:#999;}
</style>
<div class="layuimini-container layuimini-page-anim">
<div class="layuimini-main welcome">
<div class="layui-row layui-col-space15">
<div class="layui-col-md8">
<div class="layui-row">
<div class="layui-card" style="height: 400px;">
<div class="layui-card-header"><i class="fa fa-warning icon"></i>数据统计</div>
<div class="layui-card-body">
<div class="welcome-module" style="height: 350px;overflow: auto;">
<table class="layui-table" lay-skin="line">
<tr>
<th>楼宇</th>
<th>宿舍数量</th>
<th>入住人数</th>
<th>闲置数量</th>
<th>使用率</th>
</tr>
<tbody id="building-data"></tbody>
</table>
</div>
</div>
</div>
<div class="layui-card">
<div class="layui-card-header"><i class="fa fa-line-chart icon"></i>报表统计</div>
<div class="layui-card-body">
<div id="echarts-records" style="min-height:365px"></div>
</div>
</div>
</div>
</div>
<div class="layui-col-md4">
<div class="layui-card" style="height: 400px;">
<div class="layui-card-header"><i class="fa fa-bullhorn icon icon-tip"></i>系统公告</div>
<div class="layui-card-body layui-text" id="notice-data"></div>
</div>
<div class="layui-card">
<div class="layui-card-header"><i class="fa fa-fire icon"></i>版本信息</div>
<div class="layui-card-body layui-text">
<table class="layui-table">
<colgroup>
<col width="100">
<col>
</colgroup>
<tbody>
<tr>
<td>项目名称</td>
<td>
高校宿舍管理系统
</td>
</tr>
<tr>
<td>当前版本</td>
<td>v1.0.0</td>
</tr>
<tr>
<td>后端技术</td>
<td>SpringBoot</td>
</tr>
<tr>
<td>前端技术</td>
<td>Layui框架</td>
</tr>
<tr>
<td>详情地址</td>
<td>
<a target="_blank" href="https://yanzhen.ke.qq.com/?tuin=23890943">
https://yanzhen.ke.qq.com/?tuin=23890943
</a>
</td>
</tr>
<tr>
<td>UP QQ：</td>
<td>
596183363
</td>
</tr>
<tr>
<td>项目亮点</td>
<td style="padding-bottom: 0;">
数据库设计繁琐、前后端交互复杂、企业级项目标准
</td>
</tr>
<tr>
<td>适合人群</td>
<td style="padding-bottom: 0;">
有ssm、jquery基础、0-3年以内的Java程序员
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
<script>
layui.use(['layer','echarts'], function () {
var $ = layui.jquery,
layer = layui.layer,
echarts = layui.echarts;
if(store.getLoginType() == 1){
$('.welcome').empty();
$('.welcome').append("欢迎登录高校学生宿舍管理系统");
return;
}
function loadBuilding(){
axios.get('main/building',{limit:1000}).then(function (response) {
response.data.forEach(item=>{
let html = `<tr>
<td>${item.name}</td>
<td>${item.all}</td>
<td>${item.used}</td>
<td>${item.unused}</td>
<td>${item.percent}%</td>
</tr>`
$('#building-data').append(html);
})
});
}
loadBuilding();
function loadNotice() {
axios.get('main/notice').then(function (response) {
response.data.forEach(item=>{
let html = `<div class="layuimini-notice">
<div class="layuimini-notice-title">${item.title}</div>
<div class="layuimini-notice-extra">${item.createTime}</div>
<div class="layuimini-notice-content layui-hide">${item.content}</div>
</div>`
$('#notice-data').append(html);
})
});
}
loadNotice();
/**
* 查看公告信息
**/
$('body').on('click', '.layuimini-notice', function () {
let title = $(this).children('.layuimini-notice-title').text(),
noticeTime = $(this).children('.layuimini-notice-extra').text(),
content = $(this).children('.layuimini-notice-content').html();
let html = '<div style="padding:15px 20px; text-align:justify; line-height: 22px;border-bottom:1px solid #e2e2e2;background-color: #eeeeee;color: #222222;">\n' +
'<div style="text-align: center;margin-bottom: 20px;font-weight: bold;border-bottom:1px solid #718fb5;padding-bottom: 5px"><h4 class="text-danger">' + title + '</h4></div>\n' +
'<div style="font-size: 14px">' + content + '</div>\n' +
'</div>\n';
parent.layer.open({
type: 1,
title: '系统公告' + '<span style="float: right;right: 1px;font-size: 12px;color: #b1b3b9;margin-top: 1px">' + noticeTime + '</span>',
area: '400px;',
shade: 0.8,
id: 'layuimini-notice',
btn: ['取消'],
btnAlign: 'c',
moveType: 1,
content: html
});
});
/**
* 报表功能
*/
function loadReport(){
axios.get('main/building',{limit:1000}).then(function (response) {
let used = response.data.map(item=>item.used);
let name = response.data.map(item=>item.name);
loadEchars(name,used);
});
}
loadReport();
function loadEchars(name,values){
let echartsRecords = echarts.init(document.getElementById('echarts-records'), 'walden');
let option = {
xAxis: {
type: 'category',
data: name
},
tooltip: {},
yAxis: {
type: 'value'
},
series: [{
data: values,
type: 'bar',
showBackground: true,
backgroundStyle: {
color: 'rgba(220, 220, 220, 0.8)'
}
}]
};
echartsRecords.setOption(option);
window.onresize = function () { // echarts 窗口缩放自适应
echartsRecords.resize();
}
}
});
</script>
二、完善主页用户功能
1.使用户名随用户变化而变化
2.添加【基本资料】和【修改密码】的跳转页面
修改跳转链接
user文件夹下添加info.html和password.html
<div class="layuimini-main">
<div class="layui-form layuimini-form">
<div class="layui-form-item">
<label class="layui-form-label">用户名</label>
<div class="layui-input-block">
<input type="text" readonly style="background-color: #F8F8F8" id="uname" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">姓名</label>
<div class="layui-input-block">
<input type="text" readonly style="background-color: #F8F8F8" id="name" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">电话</label>
<div class="layui-input-block">
<input type="text" readonly style="background-color: #F8F8F8" id="phone" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">类型</label>
<div class="layui-input-block">
<input type="text" readonly style="background-color: #F8F8F8" id="type" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">备注</label>
<div class="layui-input-block">
<textarea readonly style="background-color: #F8F8F8" id="remark" class="layui-input"></textarea>
</div>
</div>
</div>
</div>
<script>
layui.use(['form', 'table','axios'], function () {
let form = layui.form,
layer = layui.layer,
axios = layui.axios,
$ = layui.$;
axios.get('user/info',{}).then(function (response) {
$('#uname').val(response.data.userName);
$('#name').val(response.data.name);
$('#phone').val(response.data.phone);
if(response.data.type == 0){
$('#type').val("管理员");
}else{
$('#type').val("宿管员");
}
$('#remark').val(response.data.remark);
})
});
</script>
<div class="layuimini-main">
<div class="layui-form layuimini-form">
<div class="layui-form-item">
<label class="layui-form-label required">原密码</label>
<div class="layui-input-block">
<input type="password" name="spassword" lay-verify="required" lay-reqtext="原密码不能为空" placeholder="请输入原密码" value="" class="layui-input">
<tip>输入原密码</tip>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label required">新密码</label>
<div class="layui-input-block">
<input type="password" name="npassword" lay-verify="required" lay-reqtext="新密码不能为空" placeholder="请输入新密码" class="layui-input">
<tip>输入新密码</tip>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label required">确认新密码</label>
<div class="layui-input-block">
<input type="password" name="dpassword" lay-verify="required|npassword" lay-reqtext="确认新密码不能为空" placeholder="请输入确认新密码" class="layui-input">
<tip>输入确认新密码</tip>
</div>
</div>
<div class="layui-form-item">
<div class="layui-input-block">
<button class="layui-btn layui-btn-normal" lay-submit lay-filter="saveBtn">确认保存</button>
</div>
</div>
</div>
</div>
<script>
layui.use(['form', 'table','axios','ztree'], function () {
let form = layui.form,
layer = layui.layer,
ztree = layui.ztree,
axios = layui.axios,
$ = layui.$;
//当前弹出层，防止ID被覆盖
let parentIndex = layer.index;
//监听提交
form.on('submit(saveBtn)', function (data) {
axios.post('user/pwd',data.field).then(function(response){
if(response.code == 200){
layer.msg(response.msg);
}
layer.close(parentIndex);
}).catch(function (error) {
layer.msg(error);
});
return false;
});
});
</script>
总结
我这个项目虽然写了两遍，第一遍用了1个月，第二遍也用了1个月，但仍然有很多细枝末节的地方值得去深挖。可以说第一遍只掌握了20%，第二遍掌握了50%，剩下至少还有50%的东西没有掌握。从昨天写完整个项目到现在，我都没有想出来这个项目总结应该写些什么，我想大概是因为我掌握的东西还是不够多，不知道该从哪方面切入。我确实收获了很多，但我只能自己感受得到，这种收获更像是一种经验，就像是学走路，除了告诉别人站稳然后先动一只脚再动另一只脚之外，我无法再告诉别人更多。我这个博客也是如此，我现在的能力只能告诉别人这个项目是怎么一步一步搭建的，但其中细枝末节的原理我还需要继续学习，可能在将来我会继续更新博客来深挖细节，但是现在不会。之前定下的本学期的目标我已经完成，现阶段我还有其他计划。学期末了要把学校的作业和实验补一补了，谁知道考查课的老师会不会安排考试呢。有余力的情况下我准备入门一下三大主流前端框架，虽说我是准备做大数据方向的，但多了解一点热门技术总是必要的
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
