学生信息管理系统（简化版）
前端部分（vue2）
！！前端采用vue2框架，下面只写出必要的代码文件，想要使用需自行先创建vue项目
部分截图
下面是目录结构
下面是public文件夹里面的html文件
<!DOCTYPE html>
<html lang=""><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"><link rel="icon" href="<%= BASE_URL %>favicon.ico"><title>吃西瓜不吐籽</title></head><body><noscript><strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id="app"></div></body>
</html>
下面是src文件夹
assets文件夹
图片可以随便添加，要求格式是
下面给出几张图片，上传的时候大小是对的，如果下载下来不对还需自己调整
pages文件夹
components中没有文件
MyAdmin.vue
<template><el-container><el-header> 管理员 </el-header><el-container><el-aside width="200px"><el-menudefault-active="2"class="el-menu-vertical-demo"background-color="#545c64"text-color="#fff"active-text-color="#ffd04b"><el-submenu index="1"><template slot="title"><i class="el-icon-location"></i><span>导航一</span></template><el-menu-item-group><template slot="title">分组一</template><el-menu-item index="1-1">选项1</el-menu-item><el-menu-item index="1-2">选项2</el-menu-item></el-menu-item-group><el-menu-item-group title="分组2"><el-menu-item index="1-3">选项3</el-menu-item></el-menu-item-group><el-submenu index="1-4"><template slot="title">选项4</template><el-menu-item index="1-4-1">选项1</el-menu-item></el-submenu></el-submenu><el-menu-item index="2" @click="goToClass"><i class="el-icon-menu"></i><span slot="title">班级</span></el-menu-item><el-menu-item index="3" @click="goToScore"><i class="el-icon-document"></i><span slot="title">成绩</span></el-menu-item><el-menu-item index="4" @click="goToStudent"><i class="el-icon-setting"></i><span slot="title">学籍</span></el-menu-item></el-menu></el-aside><el-main><router-view></router-view></el-main></el-container></el-container>
</template><script>
export default {name: "MyAdmin",methods: {goToClass() {this.$router.push("/MyAdmin/MyClass");},goToScore() {this.$router.push("/MyAdmin/MyScore");},goToStudent() {this.$router.push("/MyAdmin/MyStudents");},},
};
</script><!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.el-header,
.el-footer {background-color: #b3c0d1;color: #333;text-align: center;line-height: 60px;
}.el-aside {background-color: #d3dce6;color: #333;text-align: center;line-height: 200px;height: 75vh;
}.el-main {background-color: #e9eef3;color: #333;text-align: center;height: 75vh;
}body > .el-container {margin-bottom: 40px;
}.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {line-height: 260px;
}.el-container:nth-child(7) .el-aside {line-height: 320px;
}
</style>
MyClass.vue
<template><el-main><!-- 顶部Header --><el-header><!-- 使用 el-row 和 el-col 来布局按钮，并添加自定义样式 --><el-rowtype="flex"justify="end"style="width: 100%; padding-right: 20px"class="row-style"><spanstyle="flex-grow: 1;margin-right: 20px;text-align: center;display: block;">班级信息</span><el-button type="primary" @click="showAddDialog = true">添加</el-button><el-button type="danger" @click="showBatchDelete = !showBatchDelete">批量删除</el-button><el-buttonv-if="showBatchDelete"type="danger"@click="confirmBatchDelete">删除</el-button></el-row></el-header><!-- 添加班级对话框 --><el-dialog title="添加班级" :visible.sync="showAddDialog" width="30%"><el-form ref="addClassForm" :model="addFormData" label-width="100px"><el-form-item label="班级班号"><el-input v-model="addFormData.class_id"></el-input></el-form-item><el-form-item label="班级排名"><el-input v-model="addFormData.cls_rank"></el-input></el-form-item><el-form-item label="班主任"><el-input v-model="addFormData.head_teacher"></el-input></el-form-item><el-form-item label="学生总数"><el-input-numberv-model="addFormData.student_count":controls-position="right":min="0"></el-input-number></el-form-item></el-form><span slot="footer" class="dialog-footer"><el-button @click="showAddDialog = false">取消</el-button><el-button type="primary" @click="addClass">确定</el-button></span></el-dialog><!-- 数据表格 --><el-tablev-if="tableData.length > 0":data="tableData"style="width: 100%"@selection-change="handleSelectionChange"row-key="class_id"><el-table-columnv-if="showBatchDelete"type="selection"width="55"></el-table-column><el-table-column prop="class_id" label="班级班号" width="140"></el-table-column><el-table-column prop="cls_rank" label="班级排名" width="120"></el-table-column><el-table-column prop="head_teacher" label="班主任"> </el-table-column><el-table-column prop="student_count" label="学生总数"> </el-table-column><el-table-column label="操作" width="120"><template slot-scope="scope"><el-buttontype="danger"size="mini"@click="confirmDelete(scope.row.class_id)">删除</el-button></template></el-table-column></el-table><!-- 无数据提示 --><el-alertv-if="message === 'No data available'"title="暂无数据"type="info"></el-alert><!-- 错误提示 --><el-alert v-if="error" :title="error" type="error" show-icon> </el-alert><!-- 删除确认对话框 --><el-dialogtitle="删除确认":visible.sync="deleteDialogVisible"width="30%":before-close="handleClose"><span>确定要删除选中的班级吗？</span><span slot="footer" class="dialog-footer"><el-button @click="deleteDialogVisible = false">取消</el-button><el-button type="danger" @click="deleteSelected">确定删除</el-button></span></el-dialog></el-main>
</template><script>
export default {name: "MyClass",data() {return {tableData: [],message: "",error: null,selectedRows: [],showBatchDelete: false, // 控制批量删除按钮的显示deleteDialogVisible: false, // 控制删除确认对话框的显示currentDeleteId: null, // 当前要删除的学号showAddDialog: false, // 控制添加对话框的显示addFormData: {class_id: "",cls_rank: "",head_teacher: "",student_count: 0,},};},created() {this.fetchClasses();},methods: {async fetchClasses() {try {// 注意：确保这里的URL与后端接口匹配const response = await fetch("http://127.0.0.1:8000/WJH/classes");if (!response.ok) {throw new Error("连接到服务器失败");}const data = await response.json();if (data.success) {this.tableData = data.data;this.message = data.message || "";if (this.tableData.length === 0 && !this.error) {this.message = "No data available"; // 设置无数据消息}} else {this.error = data.message || "未知错误";}} catch (error) {this.error = error.message || "请求数据时发生错误";}},confirmDelete(class_id) {this.currentDeleteId = class_id;this.deleteDialogVisible = true;},deleteSelected() {if (this.showBatchDelete) {this.sendDeleteRequest(this.selectedRows.map((row) => row.student_id));} else {this.sendDeleteRequest([this.currentDeleteId]);}this.deleteDialogVisible = false;this.selectedRows = [];},handleSelectionChange(val) {this.selectedRows = val;},confirmBatchDelete() {this.deleteDialogVisible = true;},// 发送删除请求到后端async sendDeleteRequest(classIds) {try {// 注意：确保这里的URL与后端接口匹配const response = await fetch("http://127.0.0.1:8000/WJH/classes", {method: "DELETE",headers: {"Content-Type": "application/json",},body: JSON.stringify({ class_ids: classIds }), // 将班级ID列表作为字典传递});if (!response.ok) {throw new Error("请求失败");}const data = await response.json();if (data.success) {this.$message({message: "删除成功",type: "success",});// 刷新表格数据this.fetchClasses();} else {this.$message.error(data.message || "删除操作失败");}} catch (error) {this.$message.error(error.message || "删除操作异常");}},handleClose(done) {this.$confirm("确认关闭？").then(() => {done();}).catch(() => {});},addClass() {// 调用添加函数，将 addFormData 发送给后端this.addClassData(this.addFormData);this.showAddDialog = false; // 关闭对话框},// 添加学生数据的方法async addClassData(classData) {try {// 使用 fetch 发送 POST 请求到后端const response = await fetch("http://127.0.0.1:8000/WJH/classes", {// 确保这里的URL与后端接口匹配method: "POST",headers: {"Content-Type": "application/json",},body: JSON.stringify(classData), // 将班级数据转换为 JSON 字符串});if (!response.ok) {throw new Error("添加请求失败");}const data = await response.json();if (data.success) {this.$message({message: "添加成功",type: "success",});// 刷新表格数据this.fetchClasses();} else {// 检查是否有特定的错误信息if (data.error === "班级ID已存在") {this.$message.error("班级ID已存在");} else {this.$message.error(data.message || "添加操作失败");}}} catch (error) {this.$message.error(error.message || "添加操作异常");}},},
};
</script><style>
.el-header {background-color: #b3c0d1;color: #333;line-height: 60px;
}.row-style {padding-top: 10px; /* 自定义上边距 */padding-bottom: 10px; /* 自定义下边距 */
}.row-style {align-items: center; /* 垂直居中 */height: 100%; /* 确保占满整个header的高度 */
}
.el-aside {color: #333;
}
</style>
MyHome.vue
<template><div class="container"><header><!-- 顶部部分 --></header><div class="home-intro"><h1>吃西瓜不吐籽</h1><h1>斯人若彩虹，遇上方知有</h1><p v-if="isLoading">Loading...</p><p v-else>{{ hitokoto }}</p></div><div class="image-row"><!-- 第一个部分，三张图片 --><div class="image-overlay"><imgsrc="../assets/picture/11.jpg"alt="Image 111"loading="lazy"width="600"height="444"/><div class="overlay-text">在我心里</div></div><div class="image-overlay"><imgsrc="../assets/picture/2.jpg"alt="Image 2"loading="lazy"width="600"height="444"/><div class="overlay-text">你真的</div></div><div class="image-overlay"><imgsrc="../assets/picture/8.jpg"alt="Image 3"loading="lazy"width="600"height="444"/><div class="overlay-text">很特别</div></div></div><div class="image-row"><!-- 第二个部分，四张图片 --><div class="image-overlay"><imgsrc="../assets/picture/4.jpg"alt="Image 4"loading="lazy"width="600"height="444"/><div class="overlay-text">要是</div></div><div class="image-overlay"><imgsrc="../assets/picture/5.jpg"alt="Image 5"loading="lazy"width="600"height="444"/><div class="overlay-text">能和你</div></div><div class="image-overlay"><imgsrc="../assets/picture/6.jpg"alt="Image 6"loading="lazy"width="600"height="444"/><div class="overlay-text">在一起</div></div><div class="image-overlay"><imgsrc="../assets/picture/7.jpg"alt="Image 7"loading="lazy"width="600"height="444"/><div class="overlay-text">就好了</div></div></div><!-- 随便写点内容 --><!-- 文字介绍盒子 --><div class="intro-box"><p>《唐多令·芦叶满汀洲》</p><p>宋代 刘过</p><p>芦叶满汀洲，寒沙带浅流。</p><p>二十年重过南楼。</p><p>柳下系船犹未稳，能几日，又中秋。</p><p>黄鹤断矶头，故人今在否？</p><p>旧江山浑是新愁。</p><p>欲买桂花同载酒，终不似，少年游。</p></div><!-- 登录按钮 --><div class="login-button"><router-link to="/login">登录</router-link></div></div>
</template><script>
export default {name: "MyHome",data() {return {hitokoto: "",isLoading: true,loadingMessage: "加载中...",};},created() {this.fetchHitokoto();},methods: {fetchHitokoto() {// 请确保网络环境允许访问该 API，如果无法访问，请检查链接的合法性，并在网络稳定的情况下重试。fetch("https://v1.hitokoto.cn").then((res) => res.json()).then((data) => {this.hitokoto = data.hitokoto;this.isLoading = false;}).catch((err) => {console.error(err);this.isLoading = false;});},},
};
</script><style scoped>
/* 全局容器样式 */
.container {margin: 0; /* 移除默认外边距 */padding: 0; /* 移除默认内边距 */font-family: Arial, sans-serif; /* 设置字体为Arial，无Arial时使用系统默认无衬线字体 */background-color: #2c2c2c; /* 设置背景颜色为深沉黑灰色 */color: #f5f5f5; /* 设置字体颜色为浅灰色 */width: 100vw; /* 设置宽度为视口宽度的100% */min-height: 100vh; /* 设置最小高度为视口高度的100% */padding: 20px; /* 设置内边距为20px */
}/* 容器样式，确保最大宽度为100%并居中 */
.container {max-width: 100%;margin: 0 auto; /* 垂直方向0，水平方向自动，实现居中 */padding: 20px;
}/* 头部样式 */
header {border-bottom: 1px solid #6b6b6b; /* 设置底部边框为1px的深灰色 */padding-top: 120px; /* 设置顶部内边距为120px */height: 100px; /* 设置header的高度为100px */margin-top: 300px; /* 添加20px的顶部外边距 */
}/* 首页介绍区域样式 */
.home-intro {text-align: center; /* 文本居中 */padding: 20px 0; /* 设置顶部和底部内边距为20px */
}/* 首页介绍区域标题样式 */
.home-intro h1 {color: #eae8f1; /* 设置标题颜色为高贵的紫色 */
}/* 图片容器样式 */
.image-row {display: flex; /* 使用弹性盒子布局 */justify-content: center; /* 水平居中 */margin: 30px auto; /* 垂直方向30px外边距，水平方向自动外边距实现居中 */gap: 40px; /* 保持图片间隔为40px */width: 60%; /* 设置宽度为屏幕宽度的三分之二 */
}/* 计算最大图片宽度 */
.max-image-width {max-width: calc(60vw / 3 - 70px); /* 基于图片盒子宽度的三分之一减去70px */
}/* 图片样式 */
.image-row img {width: 100%; /* 图片宽度填满容器 */height: 56.25%; /* 图片高度设置为宽度的56.25%，以实现3:4的宽高比 */object-fit: cover; /* 保持图片宽高比，裁剪超出部分 */transition: filter 0.3s ease; /* 平滑过渡效果 */
}/* 第二行图片样式，与第一行图片宽度一致 */
.image-row:nth-child(2) img {width: 100%; /* 图片宽度填满容器 */height: 56.25%; /* 图片高度设置为宽度的56.25% */
}/* 图片覆盖层样式 */
.image-overlay {position: relative; /* 相对定位 */display: inline-block; /* 内联块级元素 */
}/* 图片覆盖层中的图片样式 */
.image-overlay img {display: block; /* 块级元素 */width: 100%; /* 图片宽度填满容器 */height: auto; /* 高度自动 */transition: filter 0.3s ease; /* 平滑过渡效果 */
}/* 鼠标悬停在图片覆盖层上的图片样式 */
.image-overlay:hover img {filter: blur(11px); /* 模糊效果 */
}/* 图片覆盖层上的文字样式 */
.overlay-text {position: absolute; /* 绝对定位 */top: 50%; /* 顶部距离为父元素高度的50% */left: 50%; /* 左侧距离为父元素宽度的50% */transform: translate(-50%, -50%); /* 居中定位 */color: #ffffff; /* 字体颜色 */font-size: 24px; /* 字体大小 */opacity: 0; /* 初始透明度 */transition: opacity 0.3s ease; /* 透明度过渡效果 */text-align: center; /* 文本居中 */
}/* 鼠标悬停在图片覆盖层上的文字样式 */
.image-overlay:hover .overlay-text {opacity: 1; /* 透明度为1，显示文字 */
}@media (max-width: 768px) {.image-row img {width: calc(50% - 20px); /* 小屏幕下图片宽度 */}
}/* 媒体查询，适用于较小屏幕（例如平板和部分大手机） */
@media (max-width: 768px) {.image-row {gap: 20px; /* 在较小屏幕上，间隔减少为20px */width: 100%; /* 图片盒子宽度占满屏幕宽度 */}.image-row img {width: calc(50% - 20px); /* 小屏幕下图片宽度 */height: auto; /* 高度自动调节 */object-fit: cover; /* 保持图片比例，裁剪超出部分 */}
}/* 媒体查询，适用于较小屏幕（例如手机） */
@media (max-width: 480px) {.image-row {gap: 10px; /* 在非常小的屏幕上，间隔减少为10px */width: 100%; /* 图片盒子宽度占满屏幕宽度 */}.image-row img {width: 100%; /* 超小屏幕下图片占满宽度 */height: auto; /* 高度自动调节 */object-fit: cover; /* 保持图片比例，裁剪超出部分 */}header {border-bottom: 1px solid #6b6b6b; /* 设置底部边框为1px的深灰色 */padding-top: 120px; /* 设置顶部内边距为120px */height: 100px; /* 设置header的高度为100px */margin-top: 30px; /* 添加20px的顶部外边距 */}
}/* 文字介绍盒子样式 */
.intro-box {width: 66.666%; /* 与图片容器相同的宽度 */margin: 30px auto; /* 垂直方向30px外边距，水平方向自动外边距实现居中 */padding: 20px;background-color: #333; /* 深色背景 */color: #f5f5f5; /* 字体颜色与页面一致 */text-align: center; /* 文本居中 */
}.intro-box p {font-size: 16px;line-height: 1.6;color: #d8dade;margin-bottom: 8px;
}.intro-box p:not(:last-child) {margin-bottom: 8px;
}/* 登录按钮样式 */
.login-button {margin: 30px auto; /* 垂直方向30px外边距，水平方向自动外边距实现居中 */text-align: center; /* 文本居中 */
}/* 路由链接样式 */
.login-button router-link {display: inline-block;padding: 10px 20px;background-color: #b388ff; /* 高贵紫作为按钮颜色 */color: #ffffff; /* 白色字体 */text-decoration: none; /* 移除下划线 */border-radius: 5px; /* 圆角边框 */transition: background-color 0.3s ease; /* 平滑背景颜色变化 */
}/* 登录按钮悬停效果 */
.login-button router-link:hover {background-color: #9a67e6; /* 悬停时的背景颜色 */
}
</style>
MyIndex.vue
这是当时测试用的，可以不要
<template><div class="container"><h1>登录成功</h1></div>
</template><script>
export default {name: "MyIndex",
};
</script><style></style>
MyLogin.vue
<template><div class="container"><div class="header">登录</div><div class="form-wrapper"><inputtype="text"v-model="username"placeholder="Username"class="input-item"@input="checkInputLength"/><inputtype="password"v-model="password"placeholder="Password"class="input-item"@input="checkInputLength"/><button type="button" class="btn" @click="login">登录</button></div><div class="msg"><!-- 没有账户？ <a href="#">注册</a> --><router-link to="/enroll">注册</router-link></div></div>
</template><script>
export default {name: "MyLogin",data() {return {username: "",password: "",};},methods: {async login() {if (this.username.length > 16 || this.password.length > 16) {alert("用户名和密码均不得超过16个字符");return;}if (!this.username || !this.password) {alert("用户名和密码不能为空");return;}try {const response = await fetch("http://127.0.0.1:8000/WJH/login", {method: "POST",headers: {"Content-Type": "application/json",},body: JSON.stringify({username: this.username,password: this.password,}),});if (!response.ok) {throw new Error("连接失败");}const result = await response.json();if (!result.success) {alert("不存在此用户或密码错误");} else {// 处理登录成功的逻辑，例如跳转到另一个页面if (result.user_type === "admin") {this.$router.push("/MyAdmin"); // 管理员页面} else {this.$router.push("/MyOrdinary"); // 普通用户页面}}} catch (error) {alert(`连接失败: ${error.message}`);}},checkInputLength(event) {const maxLength = 16;if (event.target.value.length > maxLength) {alert(`输入内容不得超过${maxLength}个字符`);event.target.value = event.target.value.substring(0, maxLength);}},},
};
</script><style>
* {margin: 0;padding: 0;box-sizing: border-box;
}
html,
body {height: 100%;font-family: Arial, sans-serif;
}
body {background-color: #f7f7f7;display: flex;justify-content: center;align-items: center;
}
.container {background-color: white;width: 100%;max-width: 400px;padding: 40px;border-radius: 8px;box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
.header {font-size: 24px;font-weight: bold;text-align: center;margin-bottom: 20px;
}
.input-item {width: 100%;margin-bottom: 15px;padding: 12px;border: 1px solid #ddd;border-radius: 4px;font-size: 16px;
}
.input-item::placeholder {color: #aaa;
}
.btn {display: block;width: 100%;padding: 15px;margin-top: 20px;background-color: #5c67f2;color: white;border: none;border-radius: 4px;font-size: 18px;cursor: pointer;transition: background-color 0.3s ease;
}
.btn:hover {background-color: #4a54e1;
}
.msg {text-align: center;margin-top: 15px;font-size: 14px;
}
a {color: #5c67f2;text-decoration: none;
}
</style>
MyOrdinary.vue
<template><el-container><el-header> 普通用户 </el-header><el-container><el-aside width="200px"><el-menudefault-active="2"class="el-menu-vertical-demo"background-color="#545c64"text-color="#fff"active-text-color="#ffd04b"><el-menu-item index="2" @click="goToClass"><i class="el-icon-menu"></i><span slot="title">班级</span></el-menu-item><el-menu-item index="3" @click="goToScore"><i class="el-icon-document"></i><span slot="title">成绩</span></el-menu-item><el-menu-item index="4" @click="goToStudent"><i class="el-icon-setting"></i><span slot="title">学籍</span></el-menu-item></el-menu></el-aside><el-main><router-view></router-view></el-main></el-container></el-container>
</template><script>
export default {name: "MyOrdinary",methods: {goToClass() {this.$router.push("/MyOrdinary/OrdinaryClass");},goToScore() {this.$router.push("/MyOrdinary/OrdinaryScore");},goToStudent() {this.$router.push("/MyOrdinary/OrdinaryStudent");},},
};
</script><!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.el-header,
.el-footer {background-color: #48959ba9;color: #161515;text-align: center;line-height: 60px;
}.el-aside {background-color: #48959ba9;color: #333333;text-align: center;line-height: 200px;height: 75vh;
}.el-main {background-color: #e9eef3;color: #201c1c;text-align: center;height: 75vh;
}body > .el-container {margin-bottom: 40px;
}.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {line-height: 260px;
}.el-container:nth-child(7) .el-aside {line-height: 320px;
}
</style>
MyScore.vue
<template><el-main><!-- 顶部Header --><el-header><!-- 使用 el-row 和 el-col 来布局按钮，并添加自定义样式 --><el-rowtype="flex"justify="end"style="width: 100%; padding-right: 20px"class="row-style"><spanstyle="flex-grow: 1;margin-right: 20px;text-align: center;display: block;">学生成绩信息</span><el-button type="primary" @click="showAddDialog = true">添加</el-button><el-button type="danger" @click="showBatchDelete = !showBatchDelete">批量删除</el-button><el-buttonv-if="showBatchDelete"type="danger"@click="confirmBatchDelete">删除</el-button></el-row></el-header><!-- 添加学生对话框 --><el-dialog title="添加学生" :visible.sync="showAddDialog" width="30%"><el-form ref="addForm" :model="addFormData" label-width="100px"><el-form-item label="学号"><el-input v-model="addFormData.student_id"></el-input></el-form-item><el-form-item label="姓名"><el-input v-model="addFormData.stu_name"></el-input></el-form-item><el-form-item label="总成绩"><el-input v-model="addFormData.total_score"></el-input></el-form-item><el-form-item label="分数排名"><el-input v-model="addFormData.score_rank"></el-input></el-form-item><el-form-item label="班级"><el-input v-model="addFormData.class_"></el-input></el-form-item></el-form><span slot="footer" class="dialog-footer"><el-button @click="showAddDialog = false">取消</el-button><el-button type="primary" @click="addStudent">确定</el-button></span></el-dialog><!-- 数据表格 --><el-tablev-if="tableData.length > 0":data="tableData"style="width: 100%"@selection-change="handleSelectionChange"row-key="student_id"><el-table-columnv-if="showBatchDelete"type="selection"width="55"></el-table-column><el-table-column prop="student_id" label="学号" width="140"></el-table-column><el-table-column prop="stu_name" label="姓名" width="120"></el-table-column><el-table-column prop="total_score" label="总成绩"> </el-table-column><el-table-column prop="score_rank" label="分数排名"> </el-table-column><el-table-column prop="class_" label="班级"> </el-table-column><el-table-column label="操作" width="120"><template slot-scope="scope"><el-buttontype="danger"size="mini"@click="confirmDelete(scope.row.student_id)">删除</el-button></template></el-table-column></el-table><!-- 无数据提示 --><el-alertv-if="message === 'No data available'"title="暂无数据"type="info"></el-alert><!-- 错误提示 --><el-alert v-if="error" :title="error" type="error" show-icon> </el-alert><!-- 删除确认对话框 --><el-dialogtitle="删除确认":visible.sync="deleteDialogVisible"width="30%":before-close="handleClose"><span>确定要删除选中的学号吗？</span><span slot="footer" class="dialog-footer"><el-button @click="deleteDialogVisible = false">取消</el-button><el-button type="danger" @click="deleteSelected">确定删除</el-button></span></el-dialog></el-main>
</template><script>
export default {name: "MyScore",data() {return {tableData: [],message: "",error: null,selectedRows: [],showBatchDelete: false, // 控制批量删除按钮的显示deleteDialogVisible: false, // 控制删除确认对话框的显示currentDeleteId: null, // 当前要删除的学号showAddDialog: false, // 控制添加对话框的显示addFormData: {// 用户输入的数据student_id: "",stu_name: "",total_score: "",score_rank: "",class_: "",},};},created() {this.fetchStudentScores();},methods: {async fetchStudentScores() {try {const response = await fetch("http://127.0.0.1:8000/WJH/studentscores");if (!response.ok) {throw new Error("连接到服务器失败");}const data = await response.json();if (data.success) {this.tableData = data.data;this.message = data.message || "";if (this.tableData.length === 0 && !this.error) {this.message = "No data available"; // 设置无数据消息}} else {this.error = data.message || "未知错误";}} catch (error) {this.error = error.message;}},confirmDelete(studentId) {this.currentDeleteId = studentId;this.deleteDialogVisible = true;},deleteSelected() {if (this.showBatchDelete) {this.sendDeleteRequest(this.selectedRows.map((row) => row.student_id));} else {this.sendDeleteRequest([this.currentDeleteId]);}this.deleteDialogVisible = false;this.selectedRows = [];},handleSelectionChange(val) {this.selectedRows = val;},confirmBatchDelete() {this.deleteDialogVisible = true;},// 发送删除请求到后端async sendDeleteRequest(studentIds) {try {const response = await fetch("http://127.0.0.1:8000/WJH/studentscores",{method: "DELETE",headers: {"Content-Type": "application/json",},body: JSON.stringify({ student_ids: studentIds }), // 将学号列表作为字典传递});if (!response.ok) {throw new Error("请求失败");}const data = await response.json();if (data.success) {this.$message({message: "删除成功",type: "success",});// 刷新表格数据this.fetchStudentScores();} else {this.$message.error(data.message || "删除操作失败");}} catch (error) {this.$message.error(error.message || "删除操作异常");}},handleClose(done) {this.$confirm("确认关闭？").then(() => {done();}).catch(() => {});},addStudent() {// 调用添加函数，将 addFormData 发送给后端this.addStudentData(this.addFormData);this.showAddDialog = false; // 关闭对话框},// 添加学生数据的方法async addStudentData(studentData) {try {// 使用 fetch 发送 POST 请求到后端const response = await fetch("http://127.0.0.1:8000/WJH/studentscores",{method: "POST",headers: {"Content-Type": "application/json",},body: JSON.stringify(studentData), // 将学生数据转换为 JSON 字符串});if (!response.ok) {throw new Error("添加请求失败");}const data = await response.json();if (data.success) {this.$message({message: "添加成功",type: "success",});// 刷新表格数据this.fetchStudentScores();} else {// 检查是否有特定的错误信息if (data.error === "学号已存在") {this.$message.error("学号已存在");} else {this.$message.error(data.message || "添加操作失败");}}} catch (error) {this.$message.error(error.message || "添加操作异常");}},},
};
</script><style>
.el-header {background-color: #b3c0d1;color: #333;line-height: 60px;
}.row-style {padding-top: 10px; /* 自定义上边距 */padding-bottom: 10px; /* 自定义下边距 */
}.row-style {align-items: center; /* 垂直居中 */height: 100%; /* 确保占满整个header的高度 */
}
.el-aside {color: #333;
}
</style>
MyStudents.vue
<template><el-main><!-- 顶部Header --><el-header><!-- 使用 el-row 和 el-col 来布局按钮，并添加自定义样式 --><el-rowtype="flex"justify="end"style="width: 100%; padding-right: 20px"class="row-style"><spanstyle="flex-grow: 1;margin-right: 20px;text-align: center;display: block;">学生学籍信息</span><el-button type="primary" @click="showAddDialog = true">添加</el-button><el-button type="danger" @click="showBatchDelete = !showBatchDelete">批量删除</el-button><el-buttonv-if="showBatchDelete"type="danger"@click="confirmBatchDelete">删除</el-button></el-row></el-header><!-- 添加学生对话框 --><el-dialog title="添加学生" :visible.sync="showAddDialog" width="30%"><el-form ref="addForm" :model="addFormData" label-width="100px"><el-form-item label="学号"><el-input v-model="addFormData.student_id"></el-input></el-form-item><el-form-item label="姓名"><el-input v-model="addFormData.stu_name"></el-input></el-form-item><el-form-item label="性别"><el-input v-model="addFormData.gender"></el-input></el-form-item><el-form-item label="班级"><el-input v-model="addFormData.class_"></el-input></el-form-item><el-form-item label="出生日期"><el-input v-model="addFormData.birth_date"></el-input></el-form-item><el-form-item label="学校"><el-input v-model="addFormData.school"></el-input></el-form-item></el-form><span slot="footer" class="dialog-footer"><el-button @click="showAddDialog = false">取消</el-button><el-button type="primary" @click="addStudent">确定</el-button></span></el-dialog><!-- 数据表格 --><el-tablev-if="tableData.length > 0":data="tableData"style="width: 100%"@selection-change="handleSelectionChange"row-key="student_id"><el-table-columnv-if="showBatchDelete"type="selection"width="55"></el-table-column><el-table-column prop="student_id" label="学号" width="140"></el-table-column><el-table-column prop="stu_name" label="姓名" width="120"></el-table-column><el-table-column prop="gender" label="性别"> </el-table-column><el-table-column prop="class_" label="班级"> </el-table-column><el-table-column prop="birth_date" label="出生日期"> </el-table-column><el-table-column prop="school" label="学校"> </el-table-column><el-table-column label="操作" width="120"><template slot-scope="scope"><el-buttontype="danger"size="mini"@click="confirmDelete(scope.row.student_id)">删除</el-button></template></el-table-column></el-table><!-- 无数据提示 --><el-alertv-if="message === 'No data available'"title="暂无数据"type="info"></el-alert><!-- 错误提示 --><el-alert v-if="error" :title="error" type="error" show-icon> </el-alert><!-- 删除确认对话框 --><el-dialogtitle="删除确认":visible.sync="deleteDialogVisible"width="30%":before-close="handleClose"><span>确定要删除选中的学号吗？</span><span slot="footer" class="dialog-footer"><el-button @click="deleteDialogVisible = false">取消</el-button><el-button type="danger" @click="deleteSelected">确定删除</el-button></span></el-dialog></el-main>
</template><script>
export default {name: "MyStudents",data() {return {tableData: [],message: "",error: null,selectedRows: [],showBatchDelete: false, // 控制批量删除按钮的显示deleteDialogVisible: false, // 控制删除确认对话框的显示currentDeleteId: null, // 当前要删除的学号showAddDialog: false, // 控制添加对话框的显示addFormData: {student_id: "",stu_name: "",gender: "", // 新增性别字段class_: "", // 班级birth_date: "", // 新增出生日期字段school: "", // 新增学校字段},};},created() {this.fetchStudentScores();},methods: {async fetchStudentScores() {try {// 注意：确保这里的URL与后端接口匹配const response = await fetch("http://127.0.0.1:8000/WJH/enrollments");if (!response.ok) {throw new Error("连接到服务器失败");}const data = await response.json();if (data.success) {this.tableData = data.data;this.message = data.message || "";if (this.tableData.length === 0 && !this.error) {this.message = "No data available"; // 设置无数据消息}} else {this.error = data.message || "未知错误";}} catch (error) {this.error = error.message || "请求数据时发生错误";}},confirmDelete(studentId) {this.currentDeleteId = studentId;this.deleteDialogVisible = true;},deleteSelected() {if (this.showBatchDelete) {this.sendDeleteRequest(this.selectedRows.map((row) => row.student_id));} else {this.sendDeleteRequest([this.currentDeleteId]);}this.deleteDialogVisible = false;this.selectedRows = [];},handleSelectionChange(val) {this.selectedRows = val;},confirmBatchDelete() {this.deleteDialogVisible = true;},// 发送删除请求到后端async sendDeleteRequest(studentIds) {try {const response = await fetch("http://127.0.0.1:8000/WJH/enrollments", {// 确保这里的URL与后端接口匹配method: "DELETE",headers: {"Content-Type": "application/json",},body: JSON.stringify({ student_ids: studentIds }), // 将学号列表作为字典传递});if (!response.ok) {throw new Error("请求失败");}const data = await response.json();if (data.success) {this.$message({message: "删除成功",type: "success",});// 刷新表格数据this.fetchStudentScores();} else {this.$message.error(data.message || "删除操作失败");}} catch (error) {this.$message.error(error.message || "删除操作异常");}},handleClose(done) {this.$confirm("确认关闭？").then(() => {done();}).catch(() => {});},addStudent() {// 调用添加函数，将 addFormData 发送给后端this.addStudentData(this.addFormData);this.showAddDialog = false; // 关闭对话框},// 添加学生数据的方法async addStudentData(studentData) {try {// 使用 fetch 发送 POST 请求到后端const response = await fetch("http://127.0.0.1:8000/WJH/enrollments", {// 确保这里的URL与后端接口匹配method: "POST",headers: {"Content-Type": "application/json",},body: JSON.stringify(studentData), // 将学生数据转换为 JSON 字符串});if (!response.ok) {throw new Error("添加请求失败");}const data = await response.json();if (data.success) {this.$message({message: "添加成功",type: "success",});// 刷新表格数据this.fetchStudentScores();} else {// 检查是否有特定的错误信息if (data.error === "学号已存在") {this.$message.error("学号已存在");} else {this.$message.error(data.message || "添加操作失败");}}} catch (error) {this.$message.error(error.message || "添加操作异常");}},},
};
</script><style>
.el-header {background-color: #b3c0d1;color: #333;line-height: 60px;
}.row-style {padding-top: 10px; /* 自定义上边距 */padding-bottom: 10px; /* 自定义下边距 */
}.row-style {align-items: center; /* 垂直居中 */height: 100%; /* 确保占满整个header的高度 */
}
.el-aside {color: #333;
}
</style>
OrdinaryClass.vue
<template><el-main><!-- 顶部Header --><el-header><!-- 使用 el-row 和 el-col 来布局按钮，并添加自定义样式 --><spanstyle="flex-grow: 1;margin-right: 20px;text-align: center;display: block;">班级信息</span></el-header><!-- 数据表格 --><el-tablev-if="tableData.length > 0":data="tableData"style="width: 100%"@selection-change="handleSelectionChange"row-key="class_id"><el-table-columnv-if="showBatchDelete"type="selection"width="55"></el-table-column><el-table-column prop="class_id" label="班级班号" width="140"></el-table-column><el-table-column prop="cls_rank" label="班级排名" width="120"></el-table-column><el-table-column prop="head_teacher" label="班主任"> </el-table-column><el-table-column prop="student_count" label="学生总数"> </el-table-column></el-table><!-- 无数据提示 --><el-alertv-if="message === 'No data available'"title="暂无数据"type="info"></el-alert><!-- 错误提示 --><el-alert v-if="error" :title="error" type="error" show-icon> </el-alert><!-- 删除确认对话框 --></el-main>
</template><script>
export default {name: "OrdinaryClass",data() {return {tableData: [],message: "",error: null,addFormData: {class_id: "",cls_rank: "",head_teacher: "",student_count: 0,},};},created() {this.fetchClasses();},methods: {async fetchClasses() {try {// 注意：确保这里的URL与后端接口匹配const response = await fetch("http://127.0.0.1:8000/WJH/classes");if (!response.ok) {throw new Error("连接到服务器失败");}const data = await response.json();if (data.success) {this.tableData = data.data;this.message = data.message || "";if (this.tableData.length === 0 && !this.error) {this.message = "No data available"; // 设置无数据消息}} else {this.error = data.message || "未知错误";}} catch (error) {this.error = error.message || "请求数据时发生错误";}},handleClose(done) {this.$confirm("确认关闭？").then(() => {done();}).catch(() => {});},},
};
</script><style>
.el-header {background-color: #b3c0d1;color: #333;line-height: 60px;
}.row-style {padding-top: 10px; /* 自定义上边距 */padding-bottom: 10px; /* 自定义下边距 */
}.row-style {align-items: center; /* 垂直居中 */height: 100%; /* 确保占满整个header的高度 */
}
.el-aside {color: #333;
}
</style>
OrdinaryScore.vue
<template><el-main><!-- 顶部Header --><el-header><!-- 使用 el-row 和 el-col 来布局按钮，并添加自定义样式 --><spanstyle="flex-grow: 1;margin-right: 20px;text-align: center;display: block;">学生成绩信息</span></el-header><!-- 数据表格 --><el-tablev-if="tableData.length > 0":data="tableData"style="width: 100%"@selection-change="handleSelectionChange"row-key="student_id"><el-table-columnv-if="showBatchDelete"type="selection"width="55"></el-table-column><el-table-column prop="student_id" label="学号" width="140"></el-table-column><el-table-column prop="stu_name" label="姓名" width="120"></el-table-column><el-table-column prop="total_score" label="总成绩"> </el-table-column><el-table-column prop="score_rank" label="分数排名"> </el-table-column><el-table-column prop="class_" label="班级"> </el-table-column></el-table><!-- 无数据提示 --><el-alertv-if="message === 'No data available'"title="暂无数据"type="info"></el-alert><!-- 错误提示 --><el-alert v-if="error" :title="error" type="error" show-icon> </el-alert></el-main>
</template><script>
export default {name: "OrdinaryScore",data() {return {tableData: [],message: "",error: null,addFormData: {// 用户输入的数据student_id: "",stu_name: "",total_score: "",score_rank: "",class_: "",},};},created() {this.fetchStudentScores();},methods: {async fetchStudentScores() {try {const response = await fetch("http://127.0.0.1:8000/WJH/studentscores");if (!response.ok) {throw new Error("连接到服务器失败");}const data = await response.json();if (data.success) {this.tableData = data.data;this.message = data.message || "";if (this.tableData.length === 0 && !this.error) {this.message = "No data available"; // 设置无数据消息}} else {this.error = data.message || "未知错误";}} catch (error) {this.error = error.message;}},},
};
</script><style>
.el-header {background-color: #b3c0d1;color: #333;line-height: 60px;
}.row-style {padding-top: 10px; /* 自定义上边距 */padding-bottom: 10px; /* 自定义下边距 */
}.row-style {align-items: center; /* 垂直居中 */height: 100%; /* 确保占满整个header的高度 */
}
.el-aside {color: #333;
}
</style>
OrdinaryStudent.vue
<template><el-main><!-- 顶部Header --><el-header><spanstyle="flex-grow: 1;margin-right: 20px;text-align: center;display: block;">学生学籍信息</span></el-header><!-- 数据表格 --><el-tablev-if="tableData.length > 0":data="tableData"style="width: 100%"@selection-change="handleSelectionChange"row-key="student_id"><el-table-columnv-if="showBatchDelete"type="selection"width="55"></el-table-column><el-table-column prop="student_id" label="学号" width="140"></el-table-column><el-table-column prop="stu_name" label="姓名" width="120"></el-table-column><el-table-column prop="gender" label="性别"> </el-table-column><el-table-column prop="class_" label="班级"> </el-table-column><el-table-column prop="birth_date" label="出生日期"> </el-table-column><el-table-column prop="school" label="学校"> </el-table-column></el-table><!-- 无数据提示 --><el-alertv-if="message === 'No data available'"title="暂无数据"type="info"></el-alert><!-- 错误提示 --><el-alert v-if="error" :title="error" type="error" show-icon> </el-alert></el-main>
</template><script>
export default {name: "OrdinaryStudent",data() {return {tableData: [],message: "",error: null,addFormData: {student_id: "",stu_name: "",gender: "", // 新增性别字段class_: "", // 班级birth_date: "", // 新增出生日期字段school: "", // 新增学校字段},};},created() {this.fetchStudentScores();},methods: {async fetchStudentScores() {try {// 注意：确保这里的URL与后端接口匹配const response = await fetch("http://127.0.0.1:8000/WJH/enrollments");if (!response.ok) {throw new Error("连接到服务器失败");}const data = await response.json();if (data.success) {this.tableData = data.data;this.message = data.message || "";if (this.tableData.length === 0 && !this.error) {this.message = "No data available"; // 设置无数据消息}} else {this.error = data.message || "未知错误";}} catch (error) {this.error = error.message || "请求数据时发生错误";}},},
};
</script><style>
.el-header {background-color: #b3c0d1;color: #333;line-height: 60px;
}.row-style {padding-top: 10px; /* 自定义上边距 */padding-bottom: 10px; /* 自定义下边距 */
}.row-style {align-items: center; /* 垂直居中 */height: 100%; /* 确保占满整个header的高度 */
}
.el-aside {color: #333;
}
</style>
UserEnroll.vue
<template><div class="container"><div class="header">注册</div><div class="form-wrapper"><inputtype="text"v-model="username"placeholder="Username"class="input-item"@input="checkInputLength"/><inputtype="password"v-model="password"placeholder="Password"class="input-item"@input="checkInputLength"/><button type="button" class="btn" @click="register">马上注册</button></div></div>
</template><script>
export default {name: "UserEnroll",data() {return {username: "",password: "",};},methods: {async register() {if (this.username.length > 16 || this.password.length > 16) {alert("用户名和密码均不得超过16个字符");return;}if (!this.username || !this.password) {alert("用户名和密码不能为空");return;}try {const response = await fetch("http://127.0.0.1:8000/WJH/register", {method: "POST",headers: {"Content-Type": "application/json",},body: JSON.stringify({username: this.username,password: this.password,}),});if (!response.ok) {throw new Error("连接失败");}const result = await response.json();if (result.success) {alert("注册成功");// 可以在这里添加跳转到登录页面的逻辑this.$router.push("/login");} else {alert(result.message || "注册失败");}} catch (error) {alert(`注册失败: ${error.message}`);}},checkInputLength(event) {const maxLength = 16;if (event.target.value.length > maxLength) {alert(`输入内容不得超过${maxLength}个字符`);event.target.value = event.target.value.substring(0, maxLength);}},},
};
</script><style>
* {margin: 0;padding: 0;box-sizing: border-box;
}
html,
body {height: 100%;font-family: Arial, sans-serif;
}
body {background-color: #f7f7f7;display: flex;justify-content: center;align-items: center;
}
.container {background-color: white;width: 100%;max-width: 400px;padding: 40px;border-radius: 8px;box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
.header {font-size: 24px;font-weight: bold;text-align: center;margin-bottom: 20px;
}
.input-item {width: 100%;margin-bottom: 15px;padding: 12px;border: 1px solid #ddd;border-radius: 4px;font-size: 16px;
}
.input-item::placeholder {color: #aaa;
}
.btn {display: block;width: 100%;padding: 15px;margin-top: 20px;background-color: #5c67f2;color: white;border: none;border-radius: 4px;font-size: 18px;cursor: pointer;transition: background-color 0.3s ease;
}
.btn:hover {background-color: #4a54e1;
}
.msg {text-align: center;margin-top: 15px;font-size: 14px;
}
a {color: #5c67f2;text-decoration: none;
}
</style>
router文件夹
// 该文件专门用于创建整个应用的路由器
import VueRouter from 'vue-router'
//引入组件
import MyLogin from '@/pages/MyLogin.vue'
import UserEnroll from '@/pages/UserEnroll.vue'
import MyHome from '@/pages/MyHome.vue'
import MyIndex from '@/pages/MyIndex.vue'
import MyAdmin from '@/pages/MyAdmin.vue'
import MyOrdinary from '@/pages/MyOrdinary.vue'
import MyClass from '@/pages/MyClass.vue'
import MyStudents from '@/pages/MyStudents.vue'
import MyScore from '@/pages/MyScore.vue'
import OrdinaryClass from '@/pages/OrdinaryClass.vue'
import OrdinaryScore from '@/pages/OrdinaryScore.vue'
import OrdinaryStudent from '@/pages/OrdinaryStudent.vue'//创建并暴露一个路由器
export default new VueRouter({routes:[{name:'Enroll',path:'/enroll',component:UserEnroll,},{name:'Login',path:'/login',component:MyLogin,},{name:'MyHome',path:'/MyHome',component:MyHome},{name:'MyIndex',path:'/MyIndex',component:MyIndex},{name:'MyAdmin',path:'/MyAdmin',component:MyAdmin,children: [{path: 'MyClass',name: 'MyClass',component: MyClass},{path: 'MyScore',name: 'MyScore',component: MyScore},{path: 'MyStudents',name: 'MyStudents',component: MyStudents}]},{name:'MyOrdinary',path:'/MyOrdinary',component:MyOrdinary,children: [{path: 'OrdinaryClass',name: 'OrdinaryClass',component: OrdinaryClass},{path: 'OrdinaryScore',name: 'OrdinaryScore',component: OrdinaryScore},{path: 'OrdinaryStudent',name: 'OrdinaryStudent',component: OrdinaryStudent}]},// 添加默认路由{ path: '/',redirect: '/MyHome' } // 重定向根路径到登录页面]
})
App.vue
<template><router-view></router-view></template><script>export default {name: 'App',// components: {// }
}
</script><style></style>
main.js
//引入Vue
import Vue from 'vue'
//引入App
import App from './App.vue'
//引入VueRouter
import VueRouter from 'vue-router'
//引入路由器
import router from './router'import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);// // 按需引入
// import { MenuItemGroup, Row, Col, Button, Input, Dialog, Form,FormItem, Table, TableColumn, Alert, Container, Header, Aside, Main, Menu, Submenu, MenuItem, MessageBox } from 'element-ui';// // 按需引入
// Vue.component(Button.name, Button);
// Vue.component(Input.name, Input);
// Vue.component(Dialog.name, Dialog);
// Vue.component(Form.name, Form);
// Vue.component(FormItem.name, FormItem);
// Vue.component(Table.name, Table);
// Vue.component(TableColumn.name, TableColumn);
// Vue.component(Alert.name, Alert);
// Vue.component(Container.name, Container);
// Vue.component(Header.name, Header);
// Vue.component(Aside.name, Aside);
// Vue.component(Main.name, Main);
// Vue.component(Menu.name, Menu);
// Vue.component(Submenu.name, Submenu);
// Vue.component(MenuItem.name, MenuItem);
// Vue.component(MenuItemGroup.name, MenuItemGroup);// Vue.component(Row.name, Row);
// Vue.component(Col.name, Col);
// Vue.component(MessageBox.name, MessageBox);//关闭Vue的生产提示
Vue.config.productionTip = false
//应用插件
Vue.use(VueRouter)//创建vm
new Vue({el:'#app',render: h => h(App),router:router
})
本项目需安装nodejs，下面是我使用的版本，不用这个版本也行，项目使用了element-ui需要使用npm下载
下面是后端链接：学生信息管理系统（简化版）后端接口-CSDN博客
数据库链接：学生信息管理系统（简化版）数据库部分-CSDN博客
也可在主页找到
相关文章：
学生信息管理系统（简化版）
前端部分（vue2） ！！前端采用vue2框架，下面只写出必要的代码文件，想要使用需自行先创建vue项目 部分截图 下面是目录结构 下面是public文件夹里面的html文件 <!DOCTYPE html> <html lang"&q…...
网易云信荣获“HarmonyOS NEXT SDK星河奖”
近日，鸿蒙生态伙伴 SDK 开发者论坛在北京举行。 网易云信凭借在融合通信领域的技术创新和鸿蒙生态贡献，荣获鸿蒙生态“HarmonyOS NEXT SDK星河奖”。 会上，华为鸿蒙正式推出 SDK 生态繁荣伙伴支持计划，旨在为 SDK 领域伙伴和开发…...
Java版-图论-最小生成树-Prim算法
实现描述 如图： Prim算法的基本思想是从一个顶点开始，逐步构建最小生成树。具体步骤如下： 随机选取一个顶点作为起始点，并将其加入最小生成树的集合中。从该顶点出发，选择一条边连接到其他未被访问的顶点中的最小权值边。将该顶点加入到最小生成树的集合中，并标记为已…...
python-@property 和setter属性
T 一个装饰器，使得类中方法像属性一样被使用。 W 这是原本的类及其属性的访问 class Person():def __init__(self, firstname:str, lastname:str):self.first firstnameself.last lastnameself.full_name self.first self.lastdef printFullname(self):re…...
es有string类型字段吗
在较新的版本的 Elasticsearch (ES) 中，string 类型已经被移除，取而代之的是更具体的 text 和 keyword 类型。这一改变是在 Elasticsearch 5.0 版本引入的，目的是为了提供更好的性能和更明确的数据处理方式。 Text 类型 用途：text 类型用于全文搜索。当你有一个字段需要进…...
shell编程入门之提取字符并设置rtc时间
awk用法 awk是一款文本处理工具，通常在Unix和Linux操作系统中使用，用于以行为单位对文本进行处理和操作。它可以读取输入文本，对其进行处理，生成报表、统计信息等，并将结果输出到标准输出设备中。 它主要有以下特点&…...
数据库进阶教程：结合编程实现动态数据操作
在前一篇文章中，我们了解了数据库的基础知识及其核心操作。这次，我们将通过编程语言（以 Python 为例）与数据库进行交互，进一步提升你的数据库应用能力。我们将学习如何通过代码完成数据的插入、查询、更新和删除&#…...
高效可靠：吉客云数据集成到MySQL技术详解
测试-查询货品供应商报价-dange：吉客云数据集成到MySQL的技术案例分享 在现代企业的数据管理中，如何高效、可靠地实现不同系统之间的数据对接是一个关键问题。本文将聚焦于一个具体的系统对接集成案例——将吉客云的数据集成到MySQL数据库中，…...
docker安装ddns-go（外网连接局域网）
docker先下载镜像，目前最新版是v6.7.6 也可以csdn资源下载 再导入dockers https://download.csdn.net/download/u014756339/90096748 docker load -i ddns-go.tar 启动 docker run -d --name ddns-go --restartalways --nethost -v /opt/ddns-go:/root jeessy/…...
hbuilder 安卓app手机调试中基座如何设置
app端使用基座 手机在线预览功能 1.点击运行 2.点击运行到手机或者模拟器 3.制作自定义调试基座 4.先生成证书【可以看我上一篇文档写的有】，点击打包 5.打包出android自定义调试基座【android_debug.apk】,【就跟app打包一样需要等个几分钟】 6.点击运行到手…...
【pyspark学习从入门到精通23】机器学习库_6
目录 分割连续变量 标准化连续变量 分类 分割连续变量 我们经常处理高度非线性的连续特征，而且只用一个系数很难拟合到我们的模型中。 在这种情况下，可能很难只通过一个系数来解释这样一个特征与目标之间的关系。有时，将值划分到离散的桶中…...
Postman高阶技能：Collection集合批量运行！
01、Collection（集合）介绍 当我们对一个或多个系统中的很多接口用例进行维护时，首先想到的就是对接口用例进行分类管理，同时还希望对这批接口用例做回归测试。 在 Postman 中也提供了这样一个功能，就是 Collection&a…...
ipset搭配iptables实现城市IP访问限制
最近刷了一台飞牛os，但是没有二次验证的功能，裸奔在公网上，看着让人揪心。于是最近研究了一下，设置防火墙只让某些城市能够访问设备，这样大大降低了服务器的风险，因为大多数被黑的原因都是来自国外。 1.下…...
WPF表格控件的列利用模块适配动态枚举类
将枚举列表转化到类内部赋值，在初始化表格行加载和双击事件时，触发类里面的枚举列表的赋值 <c1:Column Header"变更类型" Binding"{Binding ChangeType, ModeTwoWay, ValidatesOnExceptionsTrue, ValidatesOnDataErrorsTrue, NotifyOn…...
java引用相关（四大引用类型，软引用避免oom，弱引用表，虚引用和引用队列，可达性分析算法）
1. 什么是引用？ 问题：什么是引用？Java中的引用是如何工作的？ 答案： 引用 是对象的句柄，用于访问堆内存中的对象。在Java中，引用变量实际上存储的是对象的地址，而不是对象本身。通…...
的宝可梦识别源程序，GUI界面。附详细的运行说明。)
图像识别 | Matlab基于卷积神经网络(CNN)的宝可梦识别源程序，GUI界面。附详细的运行说明。
图像识别 | Matlab基于卷积神经网络(CNN)的宝可梦识别源程序，GUI界面。附详细的运行说明。 目录 图像识别 | Matlab基于卷积神经网络(CNN)的宝可梦识别源程序，GUI界面。附详细的运行说明。预测效果基本介绍程序设计参考资料 预测效果 基本介绍 Matlab基…...
2、开发环境优化与创建第一个插件程序
一、创建测试用例二、vscode优化2.1 修改默认终端为普通cmd2.2 配置一键编译&&运行&&监视一、创建测试用例 使用命令yo code生成一个测试用例，选择或输入下面的内容。2. 命令的最后会提示是否使用vscode打开，选择打开就行。 3. 在当前目录下会产生helloworld…...
Android CoordinatorLayout：打造高效交互界面的利器
目录 一、CoordinatorLayout 介绍及特点 二、使用方法 2.1 创建 CoordinatorLayout 布局 2.2 添加需要协调的子视图 2.3 自定义 Behavior 三、结语 相关推荐 在Android开发中，面对复杂多变的用户界面需求，CoordinatorLayout以其强大的交互管理能力…...
计算机视觉：学习指南
一、引言 计算机视觉作为人工智能领域的一个重要分支，致力于让计算机理解和解释视觉信息，近年来取得了令人瞩目的进展，广泛应用于安防监控、自动驾驶、图像编辑、医学影像分析等众多领域。从入门到精通计算机视觉需要系统地学习一系列知识和…...
创建型设计模式
一、设计模式介绍 1.设计模式是什么 设计模式是指在软件开发中，经过验证的，用于解决在特定环境下，重复出现的，特定问题的解决方案； 2.设计模式怎么来的？ 满足设计原则后，慢慢迭代出来的。 3.设…...
【Ubuntu】使用ip link工具创建虚拟局域网并配置？
🦋🦋🦋如何使用ip link工具创建虚拟局域网？ sudo ip link add link enx888bd66b7000 name enx.120 type vlan id 120 上述命令使用ip link工具在Linux系统中创建了一个新的虚拟局域网（VLAN）接口，…...
川渝地区软件工程考研择校分析
通过最新数据分析,5所高校软件工程专业2025年考研难度从高到低预计为: 电子科技大学 >> 四川大学 > 重庆大学 ≈ 西南交通大学 > 西南大学 对于想考川渝地区985但核心目标为优先上岸的考生,建议重点考虑西南交通大学软件工程学硕。该校24届软件工程学硕实际录取1…...
云原生基础设施指南：精通 Kubernetes 核心与高级用法
1. 云原生的诞生 随着互联网规模的不断增长，以及企业对敏捷开发、快速交付和高可用性的需求日益增强，传统的单体架构逐渐暴露出局限性，难以满足现代业务对动态扩展和高效迭代的要求。为此，云原生应运而生。 云原生是为云计算时代…...
Pyinstaller使用指南以及遇到的问题
一、在cmd命令行执行安装pyinstaller工具 pip install pyinstaller 二、在命令行中执行打包命令即可 格式如下： pyinstaller [opts] yourprogram.py 参数含义 -F 指定打包后只生成一个exe格式的文件(建议写上这个参数) -D –onedir 创建一个目录，包含…...
美图撕掉蔡文胜标签
卖掉比特币的美图不投机了。 作者|周立青 编辑|杨舟 12月5日，比特币突破10万美元大关，曾花费1亿美元购入虚拟货币的美图宣布已出售所有加密货币。 美图在港交所发布公告称，自2024年11月起，公司已开始出售其持有的加密货币&…...
【Spring】IoC和DI，控制反转，Bean对象的获取方式
阿华代码，不是逆风，就是我疯 你们的点赞收藏是我前进最大的动力！！ 希望本文内容能够帮助到你！！ 目录 一：什么是IoC 1：什么是容器 2：什么是IoC 二：IoC应用…...
【015】对文件进行压缩_#py
对文件进行压缩 1. 下载7z软件2. 调用exe文件3. 压缩和分卷压缩4. 完整代码 1. 下载7z软件 从官网下载https://www.7-zip.org/软件。 2. 调用exe文件 主要是通过 subprocess 调用对应的command的命令。 subprocess.run(command, checkTrue)其中 command 的应包含7z软件的ex…...
OD C卷【智能成绩表】
题目 小明来到某学校当老师，需要将学生按考试总分或单科分数进行排名。 输入描述： 第一行输入学生人数n、科目数量m; 0<n<100; 0<m<10 第二行输入m个科目名称，以空格分开；科目只由英文字母构成，长度不超过…...
开源架构与云计算的传奇融合
开源架构与云计算的传奇融合 一、引言二、开源架构与云计算的卓越优势（一）成本效益惊世骇俗（二）灵活性与可扩展性无与伦比（三）社区支持与创新活力爆棚 三、震撼应用案例剖析（一）容器…...
【SpringBoot-事件监听】
文章目录 1. 定义事件2. 创建监听器3. 发布事件注意事项 在Spring Boot中，事件监听是一种常用的机制，用于在应用程序的不同部分之间进行松耦合的通信。Spring Boot基于Spring框架，因此它继承了Spring的事件发布和监听机制。以下是如何在Sprin…...
【docker】springboot 服务提交至docker
准备docker （不是docker hub或者harbor，就是可以运行docker run的服务），首先确保docker已经安装。 本文以linux下举例说明： systemctl stats docker ● docker.service - Docker Application Container EngineLoaded…...
Facebook广告突然无消耗？原因解析与解决方案。
在Facebook广告投放中，广告突然无消耗是很多广告主都会遇到的难题。这种情况不仅浪费时间，还可能导致营销活动停滞，影响业务发展。那么，广告无消耗的原因是什么？又该如何解决呢？ 一、Facebook广告无消耗的…...
05 在 Linux 使用 AXI DMA
DMA简介 DMA 是一种采用硬件实现存储器与存储器之间或存储器与外设之间直接进行高速数据传输的技术，传输过程无需 CPU 参与（但是CPU需要提前配置传输规则），可以大大减轻 CPU 的负担。 DMA 存储传输的过程如下： CPU 向…...
android AIDL ipc binder转换
一. 概述 众所周知AIDL并不是所有的数据类型都可以传输。 可以传输的类型包括： 1.原生类型 2.String 3. CharSequence 4. List 5.Map 6. Binder 7. Parcelable 容器类 parcelable传输的时候会分解成成员，数组item的方式，传输完成后再进行…...
)
【docker】12. Docker Volume(存储卷)
什么是存储卷? 存储卷就是将宿主机的本地文件系统中存在的某个目录直接与容器内部的文件系统上的某一目录建立绑定关系。这就意味着，当我们在容器中的这个目录下写入数据时，容器会将其内容直接写入到宿主机上与此容器建立了绑定关系的目录。 在宿主机上…...
——机器学习测试和验证)
1. 机器学习基本知识(4)——机器学习测试和验证
1.6 测试和验证 了解模型对新实例的泛化能力的唯一方法是在新实例上进行实际尝试。 一种方法是将模型部署到生产环境并监控其性能。 这种方法很有效，但如果模型非常糟糕，你的用户就会抱怨，所以这显然不是最好的方法。 更好的选择是将数…...
生成式AI概览与详解
1. 生成式AI概览：什么是大模型，大模型应用场景（文生文，多模态） 生成式AI（Generative AI）是指通过机器学习模型生成新的数据或内容的人工智能技术。生成式AI可以生成文本、图像、音频、视频等多种…...
软件项目标书参考，合同拟制，开发合同制定，开发协议，标书整体技术方案，实施方案，通用套用方案，业务流程，技术架构，数据库架构全资料下载（原件）
1、终止合同协议书 2、项目合作协议 3、合同交底纪要 4、合同管理台账 软件资料清单列表部分文档清单：工作安排任务书，可行性分析报告，立项申请审批表，产品需求规格说明书，需求调研计划，用户需求调查单&…...
C++ extern “C“ 用法
extern “C” 由于c中需要支持函数重载，所以c和c中对同一个函数经过编译后生成的函数名是不相同的 extern “C” 的主要作用就是为了实现c代码能够调用其他 c 语言代码。 1(不常用) //告诉编译器 show() 函数按c语言的方式进行编译和链接 extern "C" voi…...
Node.js（v16.13.2版本）安装及环境配置教程
一、进入官网地址下载安装包 https://nodejs.org/zh-cn/download/ 选择对应你系统的Node.js版本，这里我选择的是Windows系统、64位（v16.13.2版本） 下载后的zip文件 二、解压文件到nodejs，并打开文件夹nodejs，复制解压…...
父组件调用子组件的方法
父组件 在父组件中调用子组件的sayHello()函数 <template><div><button click"getChild(wendu)">触发子组件方法wendu</button><button click"getChild(shidu)">触发子组件方法shidu</button><el-dialog v-model…...
运维排错系列：Excel上传失败，在剪切板有大量信息。是否保存其内容...
问题点 在导入 Excel 数据到 SAP 的时候，某些时刻系统会出现如下的弹窗。 上载 excel 文件时，您会收到错误：“剪贴板上有大量信息。XXX” Microsoft Office Excel 的弹出窗口显示以下信息： 剪贴板上存在大量信息。是否保留其内容…...
【自学】Vues基础
学习目录 Vues基础本地应用网络应用综合应用 工具的准备 我个人比较喜欢使用HTMLDROWNER，学习资料推荐使用VC，仅供选择吧 前置知识 HTMLCSSJSAJAX：这个是学习资料博主推荐的 个人感觉认真学好HTMLCSSJS理解vues基础很容易上手 官方网址…...
ubuntu 7z解压rar文件报错：unsupported method message
问题说明 最近项目需要支持线上上传rar格式，7z来解压缩入库。开发测试过程中发现使用以下命令解压报错， 7z x FileImportTest01.rar -p"123456" -o/home/download -y文件目录内容已列出，但无法解压文件!!! 仔细检查命令没有问题…...
C语言基础六：循环结构及面试上机题
Day06：循环结构 定义 代码的重复执行，就叫做循环 循环的分类 无限循环:其实就是死循环，程序设计中尽量避免无限循环。程序中的无限循环必须可控。有限循环:循环限定循环次数或者循环的条件。 循环的构成 循环条件循环体 当型循环的实现…...
【蓝桥杯每日一题】技能升级
技能升级 2024-12-10 蓝桥杯每日一题 技能升级 二分 题目大意 一个角色有 N 种可以增加攻击力的技能，对于第 i 个技能首次升级可以提升 A i A_i Ai 点攻击力，随后的每次升级增加的攻击力都会减少 B i B_i Bi 。升级 ⌈ A i B i ⌉ \lceil \frac{A…...
C++作业4
1、思维导图 2、Person和Stu的拷贝构造和拷贝赋值函数 #include <iostream> using namespace std; class Person {string name;int *age; public:Person():age(new int(23)){cout << "Person的无参构造" << endl;}//初始化列表 :成员属性1(值),成…...
密码学——密码学基础、散列函数与数字签名
1.密码学概述 是信息安全的基础和核心，是防范各种安全威胁的重要手段，信息安全的许多相关知识都与密码学相关。 密码学发展 密码学是一门古老而又年轻的学科 ，几千年以前就存在，至今仍在发展演进。地位非常重要甚至起决定性作用…...
鹦鹉的饮食偏好：探索多彩的食物世界
鹦鹉，作为聪明且迷人的鸟类，其饮食习性一直是鸟类爱好者关注的焦点。了解鹦鹉喜欢吃什么食物，对于确保它们的健康与幸福至关重要。 鹦鹉的食物种类丰富多样，首先是各类种子与谷物。例如，葵花籽富含脂肪和蛋白质&#…...
AtCoder Beginner Contest 383
C - Humidifier 3 Description 一个 h w h \times w hw 的网格，每个格子可能是墙、空地或者城堡。 一个格子是好的，当且仅当从至少一个城堡出发，走不超过 d d d 步能到达。（只能上下左右走，不能穿墙）&…...