Initial commit
This commit is contained in:
易焱
@@ -0,0 +1,34 @@
|
||||
<!DOCTYPE html>
|
||||
<html xmlns:th="http://www.thymeleaf.org">
|
||||
<head th:replace="/common/template :: header(~{::title},~{::link},~{::style})">
|
||||
</head>
|
||||
<body>
|
||||
<div class="layui-form timo-compile">
|
||||
<form th:action="@{/editPwd}">
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">原来密码</label>
|
||||
<div class="layui-input-inline">
|
||||
<input class="layui-input" type="password" name="original" placeholder="请输入原来密码">
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">新密码</label>
|
||||
<div class="layui-input-inline">
|
||||
<input class="layui-input" type="password" name="password" placeholder="请输入新密码">
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">确认密码</label>
|
||||
<div class="layui-input-inline">
|
||||
<input class="layui-input" type="password" name="confirm" placeholder="再一次输入密码">
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-form-item timo-finally">
|
||||
<button class="layui-btn ajax-submit"><i class="fa fa-check-circle"></i> 保存</button>
|
||||
<button class="layui-btn btn-secondary close-popup"><i class="fa fa-times-circle"></i> 关闭</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<script th:replace="/common/template :: script"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,30 @@
|
||||
<!DOCTYPE html>
|
||||
<html xmlns:th="http://www.thymeleaf.org">
|
||||
<head th:replace="/common/template :: header(~{::title},~{::link},~{::style})">
|
||||
<style>
|
||||
.page-error {
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
-webkit-box-pack: center;
|
||||
-ms-flex-pack: center;
|
||||
justify-content: center;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-box-direction: normal;
|
||||
-ms-flex-direction: column;
|
||||
flex-direction: column;
|
||||
min-height: calc(100vh - 110px);
|
||||
margin-bottom: 0;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="page-error" style="color: #009688">
|
||||
<div style="font-size: 120px" th:text="${statusCode}"></div>
|
||||
<div style="font-size: 24px" th:text="${msg}"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,160 @@
|
||||
<!DOCTYPE html>
|
||||
<html xmlns:th="http://www.thymeleaf.org">
|
||||
<head th:replace="/common/template :: header(~{::title},~{::link},~{::style})">
|
||||
<style>
|
||||
a{
|
||||
color: #005980;
|
||||
}
|
||||
.widget-small{
|
||||
background-color: #FFFFFF;
|
||||
overflow: hidden;
|
||||
text-align: center;
|
||||
border-radius: 2px;
|
||||
box-shadow: 0 1px 2px 0 rgba(0,0,0,.05);
|
||||
}
|
||||
.widget-small .fa{
|
||||
float: left;
|
||||
width: 40%;
|
||||
line-height: 80px;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
.widget-user .fa{
|
||||
background-color: #029789;
|
||||
}
|
||||
.widget-visit .fa{
|
||||
background-color: #17a2b8;
|
||||
}
|
||||
.widget-message .fa{
|
||||
background-color: #fbad4c;
|
||||
}
|
||||
.widget-like .fa{
|
||||
background-color: #ff646d;
|
||||
}
|
||||
.widget-small-info{
|
||||
float: left;
|
||||
text-align: left;
|
||||
width: 40%;
|
||||
margin-left: 20px;
|
||||
margin-top: 18px;
|
||||
line-height: 24px;
|
||||
}
|
||||
.widget-small-info h4{
|
||||
font-size: 18px;
|
||||
}
|
||||
.widget-small-info span{
|
||||
font-size: 16px;
|
||||
}
|
||||
.project-introduce{
|
||||
min-height: 466px;
|
||||
}
|
||||
.project-introduce h4{
|
||||
font-weight: bold;
|
||||
margin-top: 12px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
.project-introduce li{
|
||||
list-style: decimal;
|
||||
margin-left: 28px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="timo-layout-page">
|
||||
<div class="layui-row layui-col-space15">
|
||||
<div class="layui-col-md3 layui-col-sm6 layui-col-xs12">
|
||||
<div class="widget-small widget-user">
|
||||
<i class="icon fa fa-users fa-3x"></i>
|
||||
<div class="widget-small-info">
|
||||
<h4>用户</h4>
|
||||
<span>0</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-col-md3 layui-col-sm6 layui-col-xs12">
|
||||
<div class="widget-small widget-visit">
|
||||
<i class="icon fa fa-line-chart fa-3x"></i>
|
||||
<div class="widget-small-info">
|
||||
<h4>访问</h4>
|
||||
<span>0</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-col-md3 layui-col-sm6 layui-col-xs12">
|
||||
<div class="widget-small widget-message">
|
||||
<i class="icon fa fa-comments-o fa-3x"></i>
|
||||
<div class="widget-small-info">
|
||||
<h4>信息</h4>
|
||||
<span>0</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-col-md3 layui-col-sm6 layui-col-xs12">
|
||||
<div class="widget-small widget-like">
|
||||
<i class="icon fa fa-star fa-3x"></i>
|
||||
<div class="widget-small-info">
|
||||
<h4>收藏</h4>
|
||||
<span>0</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-row layui-col-space15">
|
||||
<div class="layui-col-md8">
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-header">项目介绍</div>
|
||||
<div class="layui-card-body project-introduce">
|
||||
<blockquote class="layui-elem-quote layui-quote-nm">
|
||||
Cwhelp后台管理系统，基于SpringBoot2.0 + Spring Data Jpa + Thymeleaf + Shiro 开发的后台管理系统，采用分模块的方式便于开发和维护，目前支持的功能有：权限管理、部门管理、字典管理、日志记录、文件上传、代码生成等！
|
||||
</blockquote>
|
||||
<div>
|
||||
<h4>技术选型</h4>
|
||||
<ol>
|
||||
<li>后端技术：SpringBoot + Spring Data Jpa + Thymeleaf + Shiro + EhCache</li>
|
||||
<li>前端技术：Layui + Jquery + zTree + Font-awesome</li>
|
||||
</ol>
|
||||
</div>
|
||||
<div>
|
||||
<h4>功能列表</h4>
|
||||
<ol>
|
||||
<li>用户管理：用于管理后台系统的用户，可进行增删改查等操作。</li>
|
||||
<li>角色管理：分配权限的最小单元，通过角色给用户分配权限。</li>
|
||||
<li>菜单管理：用于配置系统菜单，同时也作为权限资源。</li>
|
||||
<li>部门管理：通过不同的部门来管理和区分用户。</li>
|
||||
<li>字典管理：对一些需要转换的数据进行统一管理，如：男、女等。</li>
|
||||
<li>行为日志：用于记录用户对系统的操作，同时监视系统运行时发生的错误。</li>
|
||||
<li>文件上传：内置了文件上传接口，方便开发者使用文件上传功能。</li>
|
||||
<li>代码生成：可以帮助开发者快速开发项目，减少不必要的重复操作，花更多精力注重业务实现。</li>
|
||||
<li>表单构建：通过拖拽的方式快速构建一个表单模块。</li>
|
||||
<li>数据接口：根据业务代码自动生成相关的api接口文档</li>
|
||||
</ol>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-col-md4">
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-header">更新日志</div>
|
||||
<div class="layui-card-body">
|
||||
<ul class="layui-timeline">
|
||||
<li class="layui-timeline-item">
|
||||
<i class="layui-icon layui-timeline-axis"></i>
|
||||
<div class="layui-timeline-content layui-text">
|
||||
<h3 class="layui-timeline-title">v2.0.1</h3>
|
||||
<p>
|
||||
1.项目初始化<br>
|
||||
</p>
|
||||
</div>
|
||||
</li>
|
||||
<li class="layui-timeline-item">
|
||||
<i class="layui-icon layui-timeline-axis"></i>
|
||||
<div class="layui-timeline-content layui-text">
|
||||
<div class="layui-timeline-title">yan.y</div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script th:replace="/common/template :: script"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,26 @@
|
||||
<!DOCTYPE html>
|
||||
<html xmlns:th="http://www.thymeleaf.org">
|
||||
<head th:replace="/common/template :: header(~{::title},~{::link},~{::style})">
|
||||
<style>
|
||||
.page-error {
|
||||
display: -webkit-box;
|
||||
display: flex;
|
||||
-webkit-box-align: center;
|
||||
align-items: center;
|
||||
-webkit-box-pack: center;
|
||||
justify-content: center;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-box-direction: normal;
|
||||
flex-direction: column;
|
||||
min-height: calc(100vh - 110px);
|
||||
margin-bottom: 0;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="page-error" style="color: #009688">
|
||||
<i class="fa fa-exclamation-circle" style="font-size: 100px"></i>
|
||||
<div style="font-size: 24px; margin-top: 14px">您的权限不足，无法访问本页面！</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,203 @@
|
||||
<!DOCTYPE html>
|
||||
<html xmlns:th="http://www.thymeleaf.org">
|
||||
<head th:replace="/common/template :: header(~{::title},~{::link},~{::style})">
|
||||
</head>
|
||||
<body>
|
||||
<div class="layui-form timo-compile user-info-page">
|
||||
<div class="user-info">
|
||||
<div class="user-avatar-box">
|
||||
<img class="user-avatar" th:src="@{'/system/user/picture?p='+${user.picture}}" alt="头像">
|
||||
<span class="edit-avatar" th:attr="data-url=@{/userPicture}">修改头像</span>
|
||||
</div>
|
||||
<ul class="detail-info">
|
||||
<li>账号：<span th:text="${user.username}" th:title="${user.username}"></span></li>
|
||||
<li>昵称：<span th:text="${user.nickname}" th:title="${user.nickname}"></span></li>
|
||||
<li>性别：<span th:text="${#dicts.keyValue('USER_SEX', user.sex)}"
|
||||
th:title="${#dicts.keyValue('USER_SEX', user.sex)}"></span></li>
|
||||
<li>电话：<span th:text="${user.phone}" th:title="${user.phone}"></span></li>
|
||||
<li>邮箱：<span th:text="${user.email}" th:title="${user.email}"></span></li>
|
||||
</ul>
|
||||
</div>
|
||||
<form class="user-edit" th:action="@{/userInfo}">
|
||||
<input type="hidden" name="username" th:value="${user.username}"/>
|
||||
<input type="hidden" name="bssDept" th:value="${user.bssDept?.id}"/>
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">用户昵称</label>
|
||||
<div class="layui-input-inline">
|
||||
<input class="layui-input" type="text" name="nickname" placeholder="请输入用户昵称" th:value="${user.nickname}">
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">电话号码</label>
|
||||
<div class="layui-input-inline">
|
||||
<input class="layui-input" type="text" name="phone" placeholder="请输入电话号码" th:value="${user.phone}">
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">邮箱</label>
|
||||
<div class="layui-input-inline">
|
||||
<input class="layui-input" type="text" name="email" placeholder="请输入邮箱" th:value="${user.email}">
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">选择性别</label>
|
||||
<div class="layui-input-inline">
|
||||
<input type="radio" name="sex" value="1" title="男" checked><div class="layui-unselect layui-form-radio layui-form-radioed"><i class="layui-anim layui-icon"></i><div>男</div></div>
|
||||
<input type="radio" name="sex" value="2" title="女" th:checked="${user.sex} eq 2"><div class="layui-unselect layui-form-radio"><i class="layui-anim layui-icon"></i><div>女</div></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-form-item layui-form-text">
|
||||
<label class="layui-form-label">备注</label>
|
||||
<div class="layui-input-block">
|
||||
<textarea placeholder="请输入内容" class="layui-textarea" name="remark">[[${user.remark}]]</textarea>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-form-item timo-finally">
|
||||
<button class="layui-btn ajax-submit"><i class="fa fa-check-circle"></i> 保存</button>
|
||||
<a class="layui-btn btn-secondary close-popup"><i class="fa fa-times-circle"></i> 关闭</a>
|
||||
</div>
|
||||
</form>
|
||||
<!-- 编辑头像面板 -->
|
||||
<div class="canvas-panel">
|
||||
<img class="canvas-bg"/>
|
||||
<div class="canvas-shade"></div>
|
||||
<canvas class="canvas-crop"></canvas>
|
||||
</div>
|
||||
<div class="canvas-group layui-btn-group">
|
||||
<button class="upload-close layui-btn layui-btn-primary layui-btn-sm">取消</button>
|
||||
<button class="upload-btn layui-btn layui-btn-primary layui-btn-sm">保存</button>
|
||||
</div>
|
||||
</div>
|
||||
<script th:replace="/common/template :: script"></script>
|
||||
<script type="text/javascript" th:src="@{/js/plugins/jquery-3.3.1.min.js}"></script>
|
||||
<script type="text/javascript" th:src="@{/js/plugins/jquery.mousewheel.min.js}"></script>
|
||||
<script>
|
||||
layui.use(['jquery','upload'], function () {
|
||||
var $ = layui.jquery;
|
||||
var upload = layui.upload;
|
||||
|
||||
$(".user-edit").on("mousedown", function () {
|
||||
$(this).css("opacity", 1);
|
||||
});
|
||||
|
||||
/* 修改头像 */
|
||||
var image = new Image();
|
||||
var panel = $(".canvas-panel");
|
||||
var bgImg = $(".canvas-bg");
|
||||
var canvas = $(".canvas-crop");
|
||||
|
||||
// 激活或停止移动
|
||||
var moveEvent = false;
|
||||
var screenX = 0, screenY = 0;
|
||||
var moveTop = 0, moveLeft = 0;
|
||||
panel.on("mousedown",function (e) {
|
||||
screenX = e.screenX;
|
||||
screenY = e.screenY;
|
||||
moveTop = parseFloat(bgImg.css("top"));
|
||||
moveLeft = parseFloat(bgImg.css("left"));
|
||||
moveEvent = true;
|
||||
});
|
||||
panel.on("mouseup",function (e) {
|
||||
moveEvent = false;
|
||||
});
|
||||
panel.on("mousemove", function (e) {
|
||||
if (moveEvent){
|
||||
bgImg.css("left", moveLeft + e.screenX - screenX);
|
||||
bgImg.css("top", moveTop + e.screenY - screenY);
|
||||
renderPanel();
|
||||
}
|
||||
});
|
||||
panel.on("mousewheel", function(event, delta) {
|
||||
var dir = delta > 0 ? 'Up' : 'Down';
|
||||
var width = parseFloat(bgImg.css("width"));
|
||||
var height = parseFloat(bgImg.css("height"));
|
||||
if (dir == 'Up') {
|
||||
delta = 1;
|
||||
} else {
|
||||
delta = -1;
|
||||
}
|
||||
bgImg.css("width", width * (1 + 0.1 * delta));
|
||||
bgImg.css("height", height * (1 + 0.1 * delta));
|
||||
bgImg.css("left", parseFloat(bgImg.css("left")) - (width * 0.1 / 2) * delta);
|
||||
bgImg.css("top", parseFloat(bgImg.css("top")) - (height * 0.1 / 2) * delta);
|
||||
renderPanel();
|
||||
return false;
|
||||
});
|
||||
|
||||
// 渲染画布面板
|
||||
function renderPanel() {
|
||||
canvas[0].width = 256;
|
||||
canvas[0].height = 256;
|
||||
var imgScale = image.width / bgImg.width();
|
||||
var context = canvas[0].getContext('2d');
|
||||
var sx = (bgImg.width() * imgScale / 2 ) - canvas.width() / 2 * imgScale,
|
||||
sy = (bgImg.height() * imgScale / 2) - canvas.height() / 2 * imgScale,
|
||||
sw = canvas.width() * imgScale, sh = canvas.height() * imgScale;
|
||||
var moveX = panel.width() / 2 - parseFloat(bgImg.css("left")) - bgImg.width() / 2;
|
||||
var moveY = panel.height() / 2 - parseFloat(bgImg.css("top")) - bgImg.height() / 2;
|
||||
context.drawImage(image, sx + moveX * imgScale, sy + moveY * imgScale, sw, sh, 0, 0, canvas[0].width, canvas[0].height);
|
||||
}
|
||||
|
||||
var files = [];
|
||||
var uploadInst = upload.render({
|
||||
elem: '.edit-avatar'
|
||||
,field: 'picture'
|
||||
,url: $('.edit-avatar').data('url')
|
||||
,exts: 'jpg|png|gif|jpeg'
|
||||
,auto: false
|
||||
,bindAction: ".upload-btn"
|
||||
// 选择文件回调
|
||||
,choose: function(obj){
|
||||
obj.preview(function(index, file, result){
|
||||
panel.show();
|
||||
$(".canvas-group").show();
|
||||
image.src = result;
|
||||
image.onload = function(){
|
||||
bgImg.attr("src", result);
|
||||
if(bgImg.width() >= bgImg.height()){
|
||||
bgImg.css("height", canvas.width());
|
||||
}else {
|
||||
bgImg.css("width", canvas.height());
|
||||
}
|
||||
bgImg.css("top", (panel.height() - bgImg.height()) / 2);
|
||||
bgImg.css("left", (panel.width() - bgImg.width()) / 2);
|
||||
renderPanel();
|
||||
}
|
||||
});
|
||||
}
|
||||
,before: function(obj){
|
||||
files = obj.pushFile();
|
||||
var index, file;
|
||||
for(index in files) {
|
||||
file = files[index];
|
||||
}
|
||||
var dataurl = canvas[0].toDataURL(file.type, 0.92);
|
||||
var arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1],
|
||||
bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
|
||||
while(n--){
|
||||
u8arr[n] = bstr.charCodeAt(n);
|
||||
}
|
||||
files[index] = new File([u8arr], file.name, {type:mime});
|
||||
}
|
||||
,done: function(res, index){
|
||||
if(res.code == 200){
|
||||
panel.hide();
|
||||
$(".canvas-group").hide();
|
||||
layer.msg("修改头像成功", {offset: '15px', time: 3000, icon: 1});
|
||||
$(".user-avatar").attr("src", canvas[0].toDataURL());
|
||||
delete files[index];
|
||||
}else {
|
||||
layer.msg(res.msg, {offset: '15px', time: 3000, icon: 2});
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// 关闭裁切面板及清空文件
|
||||
$(".upload-close").on("click", function () {
|
||||
panel.hide();
|
||||
$(".canvas-group").hide();
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user