+
+
学校管理系统
+
+
+
+
+
+
+
+
+
+ 学校编号 |
+
+ 学校名称 |
+
+ 学校地址 |
+
+ 学校电话 |
+ 操作 |
+
+
+
+
+
+
+
+
+
+
+
+```
+
+**styles.css**
+
+```css
+body {
+ font-family: Arial, sans-serif;
+ background-color: #e0f7fa; /* 浅蓝色背景 */
+ margin: 0;
+ padding: 20px;
+}
+
+.container {
+ max-width: 800px;
+ margin: 0 auto;
+ background: #ffffff; /* 保持白色背景,或者可以更改为更浅的蓝色 */
+ padding: 20px;
+ box-shadow: 0 0 10px rgba(0, 123, 255, 0.1); /* 蓝色阴影 */
+}
+
+h1 {
+ text-align: center;
+ color: #007bff; /* 深蓝色标题 */
+}
+
+#search-box {
+ padding: 10px;
+ width: calc(100% - 120px);
+ border: 1px solid #cce5ff; /* 浅蓝色边框 */
+ border-radius: 4px;
+ height: 18px;
+}
+
+#add-book-btn {
+ padding: 10px 20px;
+ background-color: #007bff; /* 深蓝色按钮 */
+ color: white;
+ border: none;
+ height: 40px;
+ border-radius: 4px;
+ cursor: pointer;
+}
+
+#add-book-btn:hover {
+ background-color: #0056b3; /* 深一些的蓝色按钮悬停效果 */
+}
+
+table {
+ width: 100%;
+ border-collapse: collapse;
+ margin-bottom: 20px;
+}
+
+th, td {
+ padding: 10px;
+ border: 1px solid #cce5ff; /* 浅蓝色边框 */
+ text-align: center;
+}
+
+th {
+ background-color: #d1ecf1; /* 浅蓝色表头背景 */
+}
+tr:hover {
+ background-color: #e0f7fa; /* 浅蓝色高亮背景,与页面背景相近但稍浅 */
+}
+.modal {
+ display: none;
+ position: fixed;
+ z-index: 1;
+ left: 0;
+ top: 0;
+ width: 100%;
+ height: 100%;
+ background-color: rgba(0, 0, 0, 0.4); /* 蓝色半透明背景 */
+}
+
+.modal-content {
+ background-color: #fefefe; /* 保持白色背景,或者可以更改为更浅的蓝色 */
+ /* 注意:以下两行原本用于居中的代码是错误的,应该移除或更正 */
+ transform: translate(60%, 40%);
+ /* margin应该用于.modal而不是.modal-content来实现居中 */
+ padding: 35px;
+ border: 1px solid #cce5ff; /* 浅蓝色边框 */
+ width: 40%;
+ box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3); /* 蓝色阴影 */
+ /* 为了实现.modal-content的居中,您可能需要添加额外的CSS或使用JavaScript */
+}
+
+/* 注意:.close-btn的颜色已经在.modal-content之外定义,如果需要更改为蓝色调,可以如下修改 */
+.close-btn {
+ color: #007bff; /* 深蓝色关闭按钮 */
+ float: right;
+ font-size: 28px;
+ font-weight: bold;
+ cursor: pointer;
+}
+
+.close-btn:hover,
+.close-btn:focus {
+ color: #0056b3; /* 深一些的蓝色关闭按钮悬停效果 */
+ text-decoration: none;
+ cursor: pointer;
+}
+
+form {
+ display: flex;
+ flex-direction: column;
+}
+
+label {
+ margin-bottom: 8px;
+ color: #007bff; /* 深蓝色标签 */
+}
+
+input[type="text"], input[type="hidden"] {
+ margin-bottom: 15px;
+ padding: 10px;
+ border: 1px solid #cce5ff; /* 浅蓝色边框 */
+ border-radius: 4px;
+}
+
+button[type="submit"] {
+ padding: 10px 20px;
+ background-color: #007bff; /* 深蓝色提交按钮 */
+ color: white;
+ border: none;
+ border-radius: 4px;
+ cursor: pointer;
+}
+
+button[type="submit"]:hover {
+ background-color: #0056b3; /* 深一些的蓝色提交按钮悬停效果 */
+}
+```
+
+**data.js**
+
+```javascript
+// 私有变量
+const addBtn = document.querySelector('#add-btn');
+const modal = document.querySelector('.modal');
+const closeModalBtn = document.querySelector('#close-form-btn');
+const tbody = document.querySelector('tbody');
+const form = document.querySelector('#item-form');
+const searchBox = document.querySelector("#search-box");
+const formTitle = document.querySelector("#form-title");
+
+// 表单选项
+//#######################改改改################################
+let schoolId = document.querySelector("#schoolId");
+let schoolName = document.querySelector("#schoolName");
+let schoolAddress = document.querySelector("#schoolAddress");
+let schoolPhone = document.querySelector("#schoolPhone");
+//#############################################################
+
+
+let data = [];
+// api接口设置
+// const API_BASE_URL = "http://localhost/book";
+const API_BASE_URL = "http://localhost/school"; // #### 改改改 ####
+
+// 搜索功能
+function search(name) {
+ axios.get(API_BASE_URL + `?schoolName=${name}`).then(res => {
+ data = res.data;
+ renderTable(data);
+ });
+}
+
+// 渲染表格数据 # 修改item.后面的属性名称
+function renderTable(data) {
+ if (data.length === 0) return alert("无内容");
+ tbody.innerHTML = data.map(item => {
+ return `