实验目的及要求：
- 综合应用html、css完成页面布局
- 结合jQuery、Ajax实现数据请求与提交
- 了解web程序的发布
实验内容：
- 应用CSS或你所学习的前端UI美化实验5所完成的应用程序。
- 借助web服务器发布步骤1所完成的程序。Tomacat、Apache、nginx、IIS等任一种方式均可。
PS：仅展示美化过后的效果和代码，服务器发布步骤比较简单，看文档教程即可。
本文仅供参考，请勿照抄，不懂得地方请注意看注释理解。技术有限，时间有限，代码可以优化的地方很多，请见谅。
效果展示：
主界面
主题选择
更换过后的主题
代码：
index.html:
<!DOCTYPE html>
<html lang="en">
<!--developer:Barincy_Liang-->
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Student Manager</title>
<!-- JavaScript jQuery -->
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<script src="javascript/main.js"></script>
<!-- Local stylecss -->
<link rel="stylesheet" href="css/style.css">
<!-- unicons -->
<link rel="stylesheet" href="https://unicons.iconscout.com/release/v4.0.0/css/line.css">
<!-- <script type="text/javascript" src="http://cdn.repository.webfont.com/wwwroot/js/wf/youziku.api.min.js"></script> -->
</head>
<!--developer:Barincy_Liang-->
<body>
<div class="main">
<div class="head">
<div class="page_title">
<div class="head_title">
<h1>学生信息管理系统 Student Information Manage System</h1>
</div>
<div class="head_title_1">
<h2>SOUTHWEST PEROLEUM UNIVERSITY</h2>
</div>
</div>
<div class="body">
<div class="body_menu">
<div class="body_menu_li">
<ul>
<li>
<i class="uil uil-estate"></i>
<span>主页</span>
</li>
<li>
<i class="uil uil-search"></i>
<span>搜索</span>
</li>
<li>
<i class="uil uil-apps"></i>
<span>设置</span>
</li>
<li>
<div onclick="showThemeDisplay()">
<i class="uil uil-heart"></i>
<span>主题</span>
</div>
<div class="theme_body">
<div name="color_box" class="color_box" value="0" onclick="changeThemeColor(this)"></div>
<div name="color_box" class="color_box" value="62" onclick="changeThemeColor(this)"></div>
<div name="color_box" class="color_box" value="165" onclick="changeThemeColor(this)"></div>
<div name="color_box" class="color_box" value="233" onclick="changeThemeColor(this)"></div>
<div name="color_box" class="color_box" value="205" onclick="changeThemeColor(this)"></div>
</div>
</li>
</ul>
</div>
</div>
<!--developer:Barincy_Liang-->
<div class="body_table">
<div class="body_table_table">
<div class="body_table_head">
<div>
<h3>学生信息 Student Informations</h3>
</div>
<div class="body_table_version">
version:1.0 developer:Barincy_Liang
</div>
</div>
<div class="body_input">
<div class="input">
<label for="">学号：</label>
<input type="text" id="stuNo" placeholder="请输入学生学号">
</div>
<div class="input">
<label for="">姓名：</label>
<input type="text" id="stuName" placeholder="请输入学生姓名">
</div>
<div class="input">
<label for="">专业：</label>
<input type="text" id="stuMajor" placeholder="请输入学生专业">
</div>
<div id="submit" onclick="stuSubmit()" class="submitDiv">
<i class="uil uil-save submit"></i>
<span>保存</span>
</div>
</div>
<div class="body_table_table_table">
<div class="table_div">
<table id="stuTable">
<thead class="table_information_title">
<tr>
<th>学号</th>
<th>姓名</th>
<th>专业</th>
<th>操作</th>
</tr>
</thead>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
<!--developer:Barincy_Liang-->
</html>
css/style.css:
/* ================ Developer:Barincy_Liang ===================== */
/* ================ Google Fonts ===================== */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;500;700;900&family=ZCOOL+XiaoWei&display=swap');
/* ================= Variables CSS =================== */
:root {
--header-height: 3rem;
/* ======Colors ======== */
/* Change your favorite color */
--hue-color: 205; /* 0, 62, 165, 233, 205*/
/* HSL Color mode */
--first-color: hsl(var(--hue-color), 69%, 61%);
--first-color-second: hsl(var(--hue-color), 69%, 61%);
--first-color-alt: hsl(var(--hue-color), 57%, 53%);
--first-color-lighter: hsl(var(--hue-color), 92%, 85%);
--title-color: hsl(var(--hue-color), 89%, 18%);
--text-color: hsl(var(--hue-color), 99%, 27%);
--text-color-light: hsl(var(--hue-color), 39%, 68%);
--input-color: hsl(var(--hue-color), 70%, 96%);
--body-color: hsl(var(--hue-color), 40%, 90%);
--container-color: #FFF;
/* ======Font and Typography =======*/
/* ================ Developer:Barincy_Liang ===================== */
--body-font: 'Noto Sans SC', sans-serif;
;
/* .5rem = 8px, 1rem = 16px, 1.5rem = 24px, ... */
--big-font-size: 2rem;
--h1-font-size: 1.5rem;
--h2-font-size: 1.5rem;
--h3-font-size: 1.125rem;
--normal-font-size: 1.2rem;
--small-font-size: .813rem;
--smaller-font-size: .75rem;
/* =====Font Weight===== */
--font-medium: 500;
--font-semi-bold: 700;
/* =======Margenes Bottom ===========*/
--mb-0-25: .25rem;
--mb-0-5: .5rem;
--mb-0-75: .75rem;
--mb-1: 1rem;
--mb-1-5: 1.5rem;
--mb-2: 2rem;
--mb-2-5: 2.5rem;
--mb-3: 3rem;
/* ===========z index ======================*/
/* ================ Developer:Barincy_Liang ===================== */
--z-tooltip: 10;
--z-fixed: 100;
--z-modal: 100;
}
* {
margin: 0;
padding: 0;
}
html {
scroll-behavior: smooth;
}
body {
min-width: 1900px;
box-sizing: border-box;
margin: 0 0 var(--header-height) 0;
font-family: var(--body-font);
font-size: var(--normal-font-size);
background-color: var(--body-color);
color: var(--text-color);
padding-left: 1vw;
padding-right: 1vw;
padding-top: 2vh;
padding-bottom: 2vh;
}
/* ================ Developer:Barincy_Liang ===================== */
h1,
h2,
h3,
h4 {
color: var(--title-color);
font-weight: var(--font-semi-bold);
}
ul {
list-style: none;
}
a {
text-decoration: none;
}
img {
max-width: 100%;
height: auto;
}
/* ============REUSABLE CSS CLASSES ====================*/
/* ================ Developer:Barincy_Liang ===================== */
.main {
width: 103rem;
margin-left: auto;
margin-right: auto;
position: absolute;
top: 1rem;
left: 0;
right: 0;
bottom: 0;
}
.head {
margin-left: auto;
margin-right: auto;
top: 1rem;
left: 0;
right: 0;
bottom: 0;
}
.page_title {
display: flex;
}
.head_title {
margin-right: var(--mb-1-5);
padding: .7rem;
height: 3.7rem;
width: 65rem;
box-shadow: 0rem 0rem 1rem rgba(0, 0, 0, 0.2);
border-radius: .5rem;
}
.head_title_1 {
font-size: 1.13rem;
text-align: center;
margin-right: var(--mb-0-5);
padding: .7rem;
height: 3.7rem;
width: 32.3rem;
box-shadow: 0rem 0rem 1rem rgba(0, 0, 0, 0.2);
border-radius: .5rem;
}
.head_title_1 h2 {
margin-top: .5rem;
}
.body {
height: 51.8rem;
display: flex;
margin-top: var(--mb-2);
}
.body_menu {
padding: var(--mb-0-75);
width: 6rem;
box-shadow: 0rem 0rem 1rem rgba(0, 0, 0, 0.2);
border-radius: .5rem;
margin-right: var(--mb-1-5);
}
.body_menu_li {
font-size: var(--h2-font-size);
font-weight: var(--font-medium);
}
.body_menu_li ul li {
margin-top: 1.5rem;
text-align: center;
line-height: 3rem;
height: 3rem;
box-shadow: inset 0rem 0rem .3rem rgba(0, 0, 0, 0.2);
border-radius: .5rem;
}
.body_table {
width: 91.16rem;
padding: var(--mb-0-75);
box-shadow: 0rem 0rem 1rem rgba(0, 0, 0, 0.2);
border-radius: .5rem;
}
.body_input {
vertical-align: middle;
position: absolute;
height: 5.2rem;
width: 52rem;
box-shadow: 0rem 0rem 1rem rgba(0, 0, 0, 0.2);
border-radius: .5rem;
}
.body_input .input {
padding-left: .5rem;
padding-right: .1rem;
margin-top: 1.4rem;
vertical-align: middle;
float: left;
margin-left: var(--mb-1-5);
float: left;
height: var(--mb-2-5);
margin-right: .5rem;
box-shadow: inset 0rem 0rem .5rem rgba(0, 0, 0, 0.2);
border-radius: .5rem;
}
.body_input .input label {
vertical-align: middle;
float: left;
height: 5.2rem;
line-height: 2.7rem;
}
.body_input .input input {
vertical-align: middle;
height: 5.2rem;
width: 9rem;
float: left;
font-size: var(--normal-font-size);
outline: none;
background-color: transparent;
border: 0;
height: 2.7rem;
color: var(--text-color);
}
.body_input .input input::-webkit-input-placeholder {
color: var(--text-color-light);
}
.body_input .submitDiv {
float: right;
margin-right: 2rem;
margin-top: 1.7rem;
font-size: var(--h3-font-size);
font-weight: var(--font-semi-bold);
}
.body_table_head {
height: 3.7rem;
float: right;
width: 21rem;
margin-bottom: var(--mb-1-5);
padding: var(--mb-0-75);
padding-right: 1.5rem;
box-shadow: 0rem 0rem 1rem rgba(0, 0, 0, 0.2);
border-radius: .5rem;
}
.body_table_head h3 {
float: right;
}
.body_table_version {
float: right;
font-size: .9rem;
font-weight: 400;
color: var(--text-color-light);
}
.body_table_table {
padding: var(--mb-1-5);
box-shadow: inset 0rem 0rem 1rem rgba(0, 0, 0, 0.2);
border-radius: .5rem;
height: 46.95rem;
}
.body_table_table_table {
padding: var(--mb-1-5);
margin-top: 6rem;
height: 38rem;
box-shadow: 0rem 0rem 1rem rgba(0, 0, 0, 0.2);
border-radius: .5rem;
}
.table_div {
overflow-y: auto;
height: 100%;
}
.table_div::-webkit-scrollbar {
width: 6px;
height: 100%;
}
.table_div::-webkit-scrollbar-thumb {
width: var(--mb-0-25);
height: 40px;
background-color: var(--text-color-light);
border-radius: .5rem;
}
.table_div::-webkit-scrollbar-track {
border-radius: 10px;
background-color: rgba(255, 255, 255, 0);
}
.table_information_title th {
background-color: var(--body-color);
position: sticky;
top: 0;
}
.table_div table {
margin: auto;
border-spacing: 0;
text-align: left;
}
.table_div table tr {
color: var(--title-color);
height: 3.3rem;
font-size: var(--h1-font-size);
}
.table_div table tr td {
height: 3.3rem;
color: var(--text-color);
font-size: var(--normal-font-size);
overflow: hidden;
white-space: nowrap;
word-break: keep-all;
border-bottom: 1px #dddddd solid;
}
.table_div table tr[name='tablebody']:hover td {
color: var(--text-color-light);
}
.table_div table tr[name='tablebody']:hover td button {
color: var(--text-color-light);
}
.table_div table tr[name='tablebody']:hover td span {
color: var(--text-color-light);
}
.table_div table tr td div {
overflow: auto;
word-break: normal;
word-break: normal;
}
.table_div table tr td:nth-child(1) div {
width: 20rem;
}
.table_div table tr td:nth-child(2) div {
width: 16rem;
}
.table_div table tr td:nth-child(3) div {
width: 30rem;
}
.table_div table tr td span {
font-size: var(--normal-font-size);
line-height: 20px;
}
.table_div table tr td button {
font-size: var(--normal-font-size);
color: var(--text-color);
height: 5vh;
background-color: transparent;
outline: none;
border: 0;
}
.theme_body {
display: none;
height: 15.5rem;
}
.theme_body .color_box {
width: 2rem;
height: 2rem;
margin-left: auto;
margin-right: auto;
margin-top: var(--mb-0-75);
border-radius: var(--mb-0-75);
box-shadow: 0 0 var(--mb-0-25) rgba(0, 0, 0, 0.2);
}
javascript/main.js
// var deleteId = null;
//get stuinformation from database
function getData() {
$.get("http://120.46.143.125:8080/stu/list",
function (data, textStatus, jqXHR) {
var stuList = data.data; //从后端get的数据里面拿到信息列表。
// 列表为空时添加测填充数据，方便还未写插入的同学写删除部分。
// if (Object.keys(stuList).length == 0) {
// var stuNo = '空表格数据填充'; //初始化填充数据样式
// var stuName = '空表格数据填充';
// var stuMajor = '空表格数据填充';
// $.post("http://120.46.143.125:8080/stu/insertStu", { stuNo: stuNo, stuName: stuName, stuMajor: stuMajor },
// function (data) {
// deleteId = data.data;
// if (data.msg == '成功') {
// $("tr[name = 'tablebody']").remove();
// $.get("http://120.46.143.125:8080/stu/list",
// function (data, textStatus, jqXHR) {
// var stuList = data.data;
// for (var v in stuList) {
// var newRow = "<tr name = 'tablebody'> <td><div>" + stuList[v].stuNo + "</div></td> <td><div>" + stuList[v].stuName + "</div></td> <td><div>" + stuList[v].stuMajor + "</div></td> <td><div><button name = 'update' onclick = 'updateByStuId(this)' value = '" + stuList[v].stuId + "'>修改</button><span> | </span><button name = 'delete' onclick = 'deleteByStuId(this)' value = '" + stuList[v].stuId + "'>删除</button></div></td></tr>"
// $("tr:last").after(newRow);
// }
// }
// );
// $("input").val("");
// }
// }
// )
// // 列表不为空时删除填充数据，由于为经过优化，对后端服务器压力比较大，并且对自身实验没任何作用所以属下，也懒得优化。
// }else {
// $.ajax({
// type: "POST",
// url: 'http://120.46.143.125:8080/stu/deleteStu/' + deleteId,
// success: function (response) {
// }
// });
// }
$("tr[name = 'tablebody']").remove(); //remove all tr which named tablebody
//foreach the stuList
for (var v in stuList) {
//if the stuList[v] have any information is null or empty then delete it from database.
if (stuList[v].stuNo == '' || stuList[v].stuNo == null || stuList[v].stuName == '' || stuList[v].stuName == null || stuList[v].stuMajor == '' || stuList[v].stuMajor == null) {
$.ajax({
type: "POST",
url: 'http://120.46.143.125:8080/stu/deleteStu/' + stuList[v].stuId,
success: function (response) {
console.log("delete");
}
});
} else { //if the information is not null add it into table
//add data in a loop,note that i store the id of each student in the div of the modification and deletion tags to facilitate the deletion and update functions
var newRow = "<tr name = 'tablebody'> <td><div>" + stuList[v].stuNo + "</div></td> <td><div>" + stuList[v].stuName + "</div></td> <td><div>" + stuList[v].stuMajor + "</div></td> <td><div><button name = 'update' onclick = 'updateByStuId(this)' value = '" + stuList[v].stuId + "'>修改</button><span> | </span><button name = 'delete' onclick = 'deleteByStuId(this)' value = '" + stuList[v].stuId + "'>删除</button></div></td></tr>"
$("tr:last").after(newRow);
}
}
}
);
}
//add information to database
function addStuData (stuNo, stuName, stuMajor) {
var data = '';
$.post("http://120.46.143.125:8080/stu/insertStu", { stuNo: stuNo, stuName: stuName, stuMajor: stuMajor },
function (data) {
console.log(data.data);
if (data.msg == '成功') {
$("tr[name = 'tablebody']").remove();
$.get("http://120.46.143.125:8080/stu/list",
function (data, textStatus, jqXHR) {
var stuList = data.data;
for (var v in stuList) {
var newRow = "<tr name = 'tablebody'> <td><div>" + stuList[v].stuNo + "</div></td> <td><div>" + stuList[v].stuName + "</div></td> <td><div>" + stuList[v].stuMajor + "</div></td> <td><div><button name = 'update' onclick = 'updateByStuId(this)' value = '" + stuList[v].stuId + "'>修改</button><span> | </span><button name = 'delete' onclick = 'deleteByStuId(this)' value = '" + stuList[v].stuId + "'>删除</button></div></td></tr>"
$("tr:last").after(newRow);
}
}
);
}
}
);
return data;
}
//delete stu by stuId
function deleteByStuId(e) {
var stuid = e.value;
$.ajax({
type: "POST",
url: 'http://120.46.143.125:8080/stu/deleteStu/' + stuid,
success: function (response) {
$(e).parent().parent().parent().remove();
}
});
}
//update student information by stuId
function stuUpdate(stuId) {
//get the new stu information
var stuNo = $("#stuNo").val();
var stuName = $("#stuName").val();
var stuMajor = $("#stuMajor").val();
//post new data to update database data
$.post("http://120.46.143.125:8080/stu/updateStu", { stuId: stuId, stuNo: stuNo, stuName: stuName, stuMajor: stuMajor },
function (data) {
if (data.msg == '成功') { //if update database success,update the table's information
$("tr[name = 'tablebody']").remove(); //detele old table's tr
$.get("http://120.46.143.125:8080/stu/list",
function (data, textStatus, jqXHR) {
var stuList = data.data;
for (var v in stuList) {
var newRow = "<tr name = 'tablebody'> <td><div>" + stuList[v].stuNo + "</div></td> <td><div>" + stuList[v].stuName + "</div></td> <td><div>" + stuList[v].stuMajor + "</div></td> <td><div><button name = 'update' onclick = 'updateByStuId(this)' value = '" + stuList[v].stuId + "'>修改</button><span> | </span><button name = 'delete' onclick = 'deleteByStuId(this)' value = '" + stuList[v].stuId + "'>删除</button></div></td></tr>"
$("tr:last").after(newRow);
}
}
);
$("input").val("");
}
}
);
$("#submit").attr("onclick", "stuSubmit()");
}
//add data when the page is rendered
$(document).ready(function () {
getData(); //function getData() :add tr
//get box information of theme boxes
var boxArray = $("div[name = 'color_box']");
//Render the background color by the value of the color div's value
$.each(boxArray, function (indexInArray, valueOfElement) {
var color = valueOfElement.getAttribute("value");
var colorStyle = 'background-color: hsl(' + color + ',40%, 90%)';
valueOfElement.setAttribute('style', colorStyle);
});
//every 1000ms refersh the table'data
setInterval('getData()', '1000');
});
//add data after clicking submit button
function stuSubmit() {
//get stu's data from input boxes
var stuNo = $("#stuNo").val();
var stuName = $("#stuName").val();
var stuMajor = $("#stuMajor").val();
var data = addStuData (stuNo, stuName, stuMajor);
if(data.msg == '成功'){
$("input").val("");
}
}
//get old student information from the table
function updateByStuId(e) {
var stuid = e.value; //Get the value of stuid from the value of the modified tag
var stuNo = $(e).parent().parent().parent("tr").children().eq(0).text(); //get the old stu information in table
var stuName = $(e).parent().parent().parent("tr").children().eq(1).text();
var stuMajor = $(e).parent().parent().parent("tr").children().eq(2).text();
// console.log(stuNo); //Check if the acquisition is successful
// console.log(stuName);
// console.log(stuMajor);
$("#stuNo").val(stuNo); //populate the value into the input box
$("#stuName").val(stuName);
$("#stuMajor").val(stuMajor);
$("#submit").attr("onclick", "stuUpdate(" + stuid + ")");
}
//show and hide the theme selection div
function showThemeDisplay() {
if ($("div[class = 'theme_body']").css("display") === 'none') {
$("div[class = 'theme_body']").css("display", "block");
}
else if ($("div[class = 'theme_body']").css("display") === 'block') {
$("div[class = 'theme_body']").css("display", "none");
}
};
//change the page's background-color
function changeThemeColor(e) {
var color = e.getAttribute("value");
document.documentElement.style.setProperty('--hue-color', color);
showThemeDisplay();
}
本文仅供参靠，请勿照抄。
1619
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
