bookshelfplus/bookshelfplus
1
0
Fork 0
mirror of https://gitee.com/bookshelfplus/bookshelfplus synced 2025-09-19 00:10:39 +08:00
Code Issues Projects Releases Wiki Activity GitHub Gitee

后台表单控件渲染功能初步完成；关于从导航栏挪到页脚；分类首页和分类详情后台分离

Browse Source
This commit is contained in:
小墨
2022-04-02 20:02:21 +08:00
parent 8635e5dbac
commit 3320d7a90a
12 changed files with 494 additions and 53 deletions
Download Patch File Download Diff File Expand all files Collapse all files

35
bookshelfplus-frontend/views/dashboard/admin/index.html
View File

@@ -1,17 +1,48 @@
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<%- include("../component/header.html"); %>
<%- include("../component/header-admin.html"); %>
<style>
#container {
display: grid;
grid-template-columns: 1fr;
gap: 30px;
place-items: center;
margin-top: 40px;
}
.mainNav {
vertical-align: middle;
margin: 0 8px;
transition: 0.26s;
}
.mainNav:hover {
color: #fff;
background-color: black;
padding: 5px 8px;
border-radius: 4px;
transform: scale(1.2);
}
</style>
</head>
<body>
<%- include("../component/navbar.html"); %>
<main class="main">
<h1><%= title %></h1>
<h1>
<%= title %>
</h1>
<div id="container">
<% links.forEach(item=> { %>
<nobr>
<a class="mainNav" href="<%= item.url %>"><%= item.name %></a>
</nobr>
<% }); %>
</div>
</main>
<%- include("../component/footer-admin.html"); %>
</body>
</html>

66
bookshelfplus-frontend/views/dashboard/admin/manage.html
View File

@@ -3,17 +3,79 @@
<head>
<%- include("../component/header.html"); %>
<%- include("../component/header-admin.html"); %>
<style>
#container-controls {
display: grid;
grid-template-columns: auto 1fr;
gap: 20px;
place-items: center right;
}
#container-controls > .form-labels {
font-size: 1.05em;
font-family: cursive;
}
#container-controls > .form-elements {
/* grid-column: 1; */
height: 30px;
width: 100%;
font-size: 18px;
}
#container-submit {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
padding: 0 30%;
margin-top: 30px;
}
.btn {
height: 30px;
}
</style>
</head>
<body>
<%- include("../component/navbar.html"); %>
<main class="main">
<h1><%= title %></h1>
<p><%= page %></p>
<div id="container">
<div>
<%= typeof title !=='undefined' ? page : "出错啦"; %>
<div id="container-controls">页面加载中，请稍候 ...</div>
<div id="container-submit">
<button class="btn" id="btn-submit">提交</button>
<button class="btn" id="btn-clear">清空</button>
</div>
</div>
</main>
<%- include("../component/footer-admin.html"); %>
<!-- 验证组件用户输入值 -->
<script src="/assets/javascripts/dashboard/getValidateUtils.js"></script>
<!-- 渲染组件 & 提交表单方法 -->
<script src="/assets/javascripts/dashboard/renderFormControls.js"></script>
<!-- 引入对应页面渲染配置 -->
<script src="/assets/javascripts/dashboard/<%=group%>/<%=page%>.js"></script>
<!-- 进行渲染 -->
<script>
var group = '<%=group%>';
var page = '<%=page%>';
var title = '<%=title%>';
// 获取将要渲染的 Controls
var controlsProfile = getControlsProfile();
// 渲染控件
var formControls = renderFormControls({ Controls: controlsProfile });
console.log(formControls);
// 将控件填充到网页上
var containerControls = document.getElementById('container-controls');
containerControls.innerHTML = "";
formControls.forEach(function(item){
let Control
containerControls.appendChild(item.label);
containerControls.appendChild(item.control);
});
// 更新提交按钮显示名称
document.getElementById("btn-submit").innerHTML = "提交";
</script>
</body>
</html>