学生信息管理系统（简化版）

前端部分（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博客

也可在主页找到

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/888855.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

【密码学】分组密码的工作模式

【密码学】分组密码的工作模式

1.电码本模式&#xff08;ECB&#xff09; 优点: 每个数据块独立加密&#xff0c;可并行加密&#xff0c;实现简单。 缺点: 相同明文会产生相同密文&#xff0c;不具备数据完整保护性。 适用于短消息的加密传输 (如一个加密密钥)。 工作流程&#xff1a;用相同的密钥分别对…
阅读更多...
Redis探秘Sentinel（哨兵模式）

Redis探秘Sentinel（哨兵模式）

概述 Redis的高可用机制有持久化、复制、哨兵和集群。其主要的作用和解决的问题分别是&#xff1a; 持久化&#xff1a;持久化是最简单的高可用方法(有时甚至不被归为高可用的手段)&#xff0c;主要作用是数据备份&#xff0c;即将数据存储在硬盘&#xff0c;保证数据不会因进程…
阅读更多...
mysql的索引分类和索引优化

mysql的索引分类和索引优化

索引介绍 索引是帮助MySQL高效获取数据的排好序的数据结构&#xff1b;存储的内容是指向表中数据的指针 mysql有多种索引&#xff0c;Btree索引&#xff0c;全文索引&#xff0c;哈希索引、空间索引。其中以BTree索引应用最为广泛 假设从0到1000中&#xff0c;猜一个数字。结…
阅读更多...
短视频矩阵系统开发|技术源代码部署

短视频矩阵系统开发|技术源代码部署

短视频矩阵系统通过多账号运营管理、多平台视频智能分发等功能&#xff0c;助力企业实现视频引流、粉丝沉淀和转化。 短视频矩阵系统是一种创新的营销工具&#xff0c;它整合了多账号管理、视频智能分发、数据可视化等多种功能&#xff0c;为企业在短视频领域的发展提供了强大…
阅读更多...
计算机网络研究实训室建设方案

计算机网络研究实训室建设方案

一、概述 本方案旨在规划并实施一个先进的计算机网络研究实训室&#xff0c;旨在为学生提供一个深入学习、实践和研究网络技术的平台。实训室将集教学、实验、研究于一体&#xff0c;覆盖网络基础、网络架构、网络安全、网络管理等多个领域&#xff0c;以培养具备扎实理论基础…
阅读更多...
【开源免费】基于SpringBoot+Vue.JS中小型医院网站（JAVA毕业设计）

【开源免费】基于SpringBoot+Vue.JS中小型医院网站（JAVA毕业设计）

博主说明&#xff1a;本文项目编号 T 078 &#xff0c;文末自助获取源码 \color{red}{T078&#xff0c;文末自助获取源码} T078&#xff0c;文末自助获取源码 目录 一、系统介绍二、演示录屏三、启动教程四、功能截图五、文案资料5.1 选题背景5.2 国内外研究现状5.3 可行性分析…
阅读更多...
Wireshark数据抓包分析之传输层协议（TCP协议）

Wireshark数据抓包分析之传输层协议（TCP协议）

根据实验环境&#xff0c;本实验的步骤如下&#xff1a; 1.在测试环境使用发包工具和Wireshark抓取TCP三次握手和四次断开的数据包。 2.详细分析TCP协议的三次握手以及四次断开。 任务描述&#xff1a;安装发包工具&#xff0c;并配置TCP客户端&#xff0c;服务端&#xff0…
阅读更多...
【目标检测】【反无人机目标检测】使用SEB-YOLOv8s实时检测未经授权的无人机

【目标检测】【反无人机目标检测】使用SEB-YOLOv8s实时检测未经授权的无人机

Real-Time Detection of Unauthorized Unmanned Aerial Vehicles Using SEB-YOLOv8s 使用SEB-YOLOv8s实时检测未经授权的无人机 论文链接 0.论文摘要 摘要&#xff1a;针对无人机的实时检测&#xff0c;复杂背景下无人机小目标容易漏检、难以检测的问题。为了在降低内存和计算…
阅读更多...
Flume基础概念

Flume基础概念

目录 作用组件构成ClientFlowAgentSourceSinkEvent 和Log4j的区别与定位事务传出流程输入到sourcesource端输入Channel 接收输入到SinkSink输出 作用 Flume可以从各种来源&#xff08;如日志文件、消息队列、网络数据、文件系统、数据库等&#xff09;收集数据&#xff0c;并将…
阅读更多...
Unity 设计模式-观察者模式（Observer Pattern）详解

Unity 设计模式-观察者模式（Observer Pattern）详解

观察者模式 观察者模式&#xff08;Observer Pattern&#xff09;是一种行为型设计模式&#xff0c;它定义了对象之间的一对多依赖关系。当一个对象的状态发生变化时&#xff0c;它的所有依赖者&#xff08;观察者&#xff09;都会收到通知并自动更新。这种模式用于事件处理系…
阅读更多...
论文：IoU Loss for 2D/3D Object Detection

论文：IoU Loss for 2D/3D Object Detection

摘要&#xff1a;在2D/3D目标检测任务中&#xff0c;IoU (Intersection-over- Union)作为一种评价指标&#xff0c;被广泛用于评价不同探测器在测试阶段的性能。然而&#xff0c;在训练阶段&#xff0c;通常采用常见的距离损失(如L1或L2)作为损失函数&#xff0c;以最小化预测值…
阅读更多...
vue.js学习(day 20)

vue.js学习(day 20)

综合案例&#xff1a;购物车 数据渲染 构建cart购物车模块 准备后端接口服务环境 请求数据存入vuex cart.js // 新建购物车模块 import axios from axios export default {namespaced: true,state () {return {// 购物车数据 [{},{}]list: []}},mutations: {updateList (…
阅读更多...
RAG系统分类、评估方法与未来方向

RAG系统分类、评估方法与未来方向

分享一篇RAG综述&#xff1a;Retrieval-Augmented Generation for Large Language Models: A Survey&#xff0c;主要想了解一下RAG的评估方法&#xff0c;分享给大家。 文章目录 一、RAG分类二、评估方法三、未来方向 一、RAG分类 RAG分类&#xff1a;Navie RAG、Advanced RA…
阅读更多...
美国大选后，用HMM模型做特斯拉股价波动解析

美国大选后，用HMM模型做特斯拉股价波动解析

作者&#xff1a;老余捞鱼 原创不易&#xff0c;转载请标明出处及原作者。 写在前面的话&#xff1a;本文主要探讨如何利用高斯隐马尔可夫模型&#xff08;HMM&#xff09;预测股票价格&#xff0c;我们将分步进行说明&#xff1a;包括数据准备、特征选择、训练 HMM 模型、最后…
阅读更多...
VSCode（四）CMake调试

VSCode（四）CMake调试

1. 工具准备 1.1 C环境插件 1.2 CMake插件 2. Cmake工程 2.1 创建项目文件夹 ex:CMAKE_TEST 2.2 创建CMake工程 &#xff08;shift ctl P), 选择"CMAKE: Quick Start": 2.3 填写project name: (ex: test_cmake) 2.4 选择”Executable“ 项目文件内会自动…
阅读更多...
从 HTML 到 CSS：开启网页样式之旅（七）—— CSS浮动

从 HTML 到 CSS：开启网页样式之旅（七）—— CSS浮动

从 HTML 到 CSS&#xff1a;开启网页样式之旅&#xff08;七&#xff09;—— CSS浮动 前言一、浮动的简介1.没有浮动的代码和效果2.加入浮动的代码和效果 二、元素浮动后的特点1. 脱离文档流2.宽高特性&#xff1a;3.共用一行&#xff1a;4.margin 特性&#xff1a;5.区别于行…
阅读更多...
微信小程序实现图片拖拽调换位置效果 -- 开箱即用

微信小程序实现图片拖拽调换位置效果 -- 开箱即用

在编写类似发布朋友圈功能的功能时&#xff0c;需要实现图片的拖拽排序&#xff0c;删除图片等功能。 一、效果展示 **博主的小程序首页也采用了该示例代码&#xff0c;可以在威信中搜索&#xff1a;我的百宝工具箱 二、示例代码 1.1、在自己的小程序中创建组件 1.2、组件…
阅读更多...
通过 FRP 实现 P2P 通信：控制端与被控制端配置指南

通过 FRP 实现 P2P 通信：控制端与被控制端配置指南

本文介绍了如何通过 FRP 实现 P2P 通信。FRP&#xff08;Fast Reverse Proxy&#xff09;是一款高效的内网穿透工具&#xff0c;能够帮助用户突破 NAT 和防火墙的限制&#xff0c;将内网服务暴露到公网。通过 P2P 通信方式&#xff0c;FRP 提供了更加高效、低延迟的网络传输方式…
阅读更多...
php7.4安装pg扩展-contos7

php7.4安装pg扩展-contos7

今天接到一个需求&#xff0c;就是需要用thinkphp6链接pg(postgresql)数据库。废话不多说&#xff0c;直接上操作步骤 一、安装依赖 yum install -y sqlite-devel libxml2 libxml2-devel openssl openssl-devel bzip2 bzip2-devel libcurl libcurl-devel libjpeg libjpeg-dev…
阅读更多...
CentOS7.X 安装RustDesk自建服务器实现远程桌面控制

CentOS7.X 安装RustDesk自建服务器实现远程桌面控制

参照文章CentOS安装RustDesk自建服务器中间总有几个位置出错&#xff0c;经实践做个记录防止遗忘 一 环境&工具准备 1.1 阿里云轻量服务器、Centos7系统、目前最高1.1.11版本rustdesk-server-linux-amd64.zip 1.2 阿里云轻量服务器–安全组–开放端口&#xff1a;TCP(21…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023