devbox
繁依Fanyi0
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

Python课设-学生信息管理系统

作者：繁依Fanyi0 | 2024-06-06 04:21:06

赞

踩

python课设

一、效果展示图

二、前端代码

1、HTML代码

<1>index.html
  1. <!DOCTYPE html>
  2. <html lang="en">
  3.  
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  8.     <title>首页</title>
  9.     <link rel="stylesheet" href="../static/css/style.css">
  10.     <script src="../static/js/vue.js"></script>
  11. </head>
  12.  
  13. <body>
  14. <div id='app' class="container">
  15.     <img src="../static/img/bg.jpg"/>
  16.     <div class="panel">
  17.         <div class="content login">
  18.             <div class="switch">
  19.                 <span :class='{"active": active === "login"}' @click='go("login")'>登陆</span>
  20.                 <span>/</span>
  21.                 <span :class='{"active": active === "register"}' @click='go("register")'>注册</span>
  22.             </div>
  23.             <div class='form' id="fromLogin">
  24.                 <template v-if='active === "register"'>
  25.                     <div class="input"><input :class='{ hasValue: registerForm.email }' v-model='registerForm.email'
  26.                                               type="text" name="email" id='email'/><label for="email">邮箱</label></div>
  27.                     <div class="input"><input :class='{ hasValue: registerForm.Username }'
  28.                                               v-model='registerForm.Username' type="text" name="Username"
  29.                                               id="username"/><label for="username">用户名</label></div>
  30.                     <div class="input"><input :class='{ hasValue: registerForm.Password }'
  31.                                               v-model='registerForm.Password' type="password" name="Password"
  32.                                               id="Password"/><label for="Password">密码</label></div>
  33.                     <div class="input"><input :class='{ hasValue: registerForm.repeat }' v-model='registerForm.repeat'
  34.                                               type="password" name="repeat" id="Passwordrepeat"/><label
  35.                             for="Passwordrepeat">重复密码</label></div>
  36.                     <span>忘记?</span>
  37.                     <button type="submit" @click='submitRegister'>注册</button>
  38.                 </template>
  39.  
  40.                 <template v-if='active === "login"'>
  41.                     <div class="input"><input :class='{ hasValue: loginForm.Username }' v-model='loginForm.Username'
  42.                                               type="text" name="Username" id="username"/><label
  43.                             for="username">用户名</label></div>
  44.                     <div class="input"><input :class='{ hasValue: loginForm.Password }' v-model='loginForm.Password'
  45.                                               type="password" name="Password" id="Password"/><label
  46.                             for="Password">密码</label></div>
  47.                     <span>忘记?</span>
  48.                     <button type="submit" @click='submitLogin'>登陆</button>
  49.                 </template>
  50.             </div>
  51.         </div>
  52.     </div>
  53. </div>
  54.  
  55. <script>
  56.     var vue = new Vue({
  57.         el: '#app',
  58.         data: {
  59.             active: 'login',
  60.             registerForm: { email: '', Username: '', Password: '', repeat: '' },
  61.             loginForm: { Username: '', Password: '' },
  62.         },
  63.         methods: {
  64.             go(type) {
  65.                 this.active = type;
  66.             },
  67.             <!-- 在 submitLogin 方法中 -->
  68. async submitLogin() {
  69.     try {
  70.         const response = await fetch('/login', {
  71.             method: 'POST',
  72.             headers: {
  73.                 'Content-Type': 'application/json',
  74.             },
  75.             body: JSON.stringify(this.loginForm),
  76.         });
  77.  
  78.         const data = await response.json();
  79.         console.log('服务器响应:', data);
  80.  
  81.         if (data.success) {
  82.             // 登录成功，重定向到 hall.html
  83.             window.location.href = './hall';
  84.         } else {
  85.             // 登录失败，显示错误信息
  86.             this.errorMessage = '用户名或密码错误';
  87.         }
  88.     } catch (error) {
  89.         console.error('登录时发生错误:', error);
  90.     }
  91. },
  92.  
  93.             async submitRegister() {
  94.                 try {
  95.                     const response = await fetch('/register', {
  96.                         method: 'POST',
  97.                         headers: {
  98.                             'Content-Type': 'application/json',
  99.                         },
  100.                         body: JSON.stringify(this.registerForm),
  101.                     });
  102.  
  103.                     const data = await response.json();
  104.                     console.log('服务器响应:', data);
  105.  
  106.                     // 根据服务器响应处理逻辑
  107.                 } catch (error) {
  108.                     console.error('注册时发生错误:', error);
  109.                 }
  110.             },
  111.         },
  112.     });
  113.  
  114.  
  115. </script>
  116.  
  117. </body>
  118.  
  119. </html>
<2>hall.html
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>功能大厅</title>
  7.     <style>
  8.         body {
  9.             font-family: Arial, sans-serif;
  10.             background-color: #f4f4f4;
  11.             margin: 0;
  12.             padding: 0;
  13.             display: flex;
  14.             justify-content: center;
  15.             align-items: center;
  16.             height: 100vh;
  17.         }
  18.  
  19.         .container {
  20.             text-align: center;
  21.         }
  22.  
  23.         .button {
  24.             display: inline-block;
  25.             padding: 15px 30px;
  26.             font-size: 16px;
  27.             font-weight: bold;
  28.             text-decoration: none;
  29.             color: #fff;
  30.             background-color: #3498db;
  31.             border-radius: 5px;
  32.             margin: 10px;
  33.             transition: background-color 0.3s;
  34.         }
  35.  
  36.         .button:hover {
  37.             background-color: #2980b9;
  38.         }
  39.     </style>
  40. </head>
  41. <body>
  42.     <div class="container">
  43.         <h1>学生成绩管理系统</h1>
  44.         <a href="./gradeList" class="button" id="gradeManagementBtn">成绩管理</a>
  45.         <a href="./sa" class="button" id="subjectAnalysisBtn">学科分析</a>
  46.     </div>
  47. </body>
  48. </html>
<3>sa.html
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>学科分析</title>
  7.     <!-- 引入 layui -->
  8.     <link rel="stylesheet" href="https://www.layuicdn.com/layui/css/layui.css">
  9.     <script src="https://www.layuicdn.com/layui/layui.js"></script>
  10.     <!-- 引入 Chart.js 库 -->
  11.     <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
  12.     <!-- 引入 jQuery -->
  13.     <script src="../static/plugins/jquery-3.7.1.min.js"></script>
  14.     <!-- 引入基本表格插件 -->
  15.     <script type="text/javascript" src="../static/js/jquery.basictable.min.js"></script>
  16.     <!-- 引入响应式表格插件 -->
  17.     <script type="text/javascript" src="../static/js/reponsetable.min.js"></script>
  18.     <!-- 引入 layer 插件 -->
  19.     <script type="text/javascript" src="../static/plugins/layer/layer.js"></script>
  20.     <!-- 引入 layer 默认主题样式 -->
  21.     <link rel="stylesheet" type="text/css" href="../static/plugins/layer/theme/default/layer.css">
  22.     <!-- 引入自定义 CSS 样式 -->
  23.     <link rel="stylesheet" type="text/css" href="../static/css/reponse.css">
  24.     <link rel="stylesheet" type="text/css" href="../static/css/lib/bootstrap.min.css">
  25.     <link rel="stylesheet" type="text/css" href="../static/css/custom.css">
  26.     <style type="text/css">
  27.         /* 新增的样式 */
  28.         body {
  29.             font-family: 'Arial', sans-serif;
  30.             margin: 20px;
  31.         }
  32.  
  33.         h1 {
  34.             color: #333;
  35.         }
  36.  
  37.         table {
  38.             width: 100%;
  39.             border-collapse: collapse;
  40.             margin-top: 20px;
  41.         }
  42.  
  43.         th, td {
  44.             padding: 10px;
  45.             border: 1px solid #ddd;
  46.             text-align: center;
  47.         }
  48.  
  49.         th {
  50.             background-color: #f2f2f2;
  51.         }
  52.  
  53.         tr:hover {
  54.             background-color: #f5f5f5;
  55.         }
  56.  
  57.         .layui-layer {
  58.             background: #fff;
  59.         }
  60.     </style>
  61. </head>
  62. <body>
  63.  
  64. <h1>学科分析</h1>
  65.  
  66. <!-- 基本表格样式 -->
  67. <table class="layui-table">
  68.     <thead>
  69.         <tr>
  70.             <th></th>
  71.             <th>成绩1</th>
  72.             <th>成绩2</th>
  73.             <th>成绩3</th>
  74.             <th>成绩4</th>
  75.             <th>成绩5</th>
  76.             <th>成绩6</th>
  77.         </tr>
  78.     </thead>
  79.     <tbody>
  80.         {% for student in students %}
  81.         {% endfor %}
  82.         <tr>
  83.             <td>最高分</td>
  84.             <td>{{ max_grades.g1 }}</td>
  85.             <td>{{ max_grades.g2 }}</td>
  86.             <td>{{ max_grades.g3 }}</td>
  87.             <td>{{ max_grades.g4 }}</td>
  88.             <td>{{ max_grades.g5 }}</td>
  89.             <td>{{ max_grades.g6 }}</td>
  90.         </tr>
  91.         <tr>
  92.             <td>最低分</td>
  93.             <td>{{ min_grades.g1 }}</td>
  94.             <td>{{ min_grades.g2 }}</td>
  95.             <td>{{ min_grades.g3 }}</td>
  96.             <td>{{ min_grades.g4 }}</td>
  97.             <td>{{ min_grades.g5 }}</td>
  98.             <td>{{ min_grades.g6 }}</td>
  99.         </tr>
  100.         <tr>
  101.             <td>平均分</td>
  102.             <td>{{ avg_grades.g1 }}</td>
  103.             <td>{{ avg_grades.g2 }}</td>
  104.             <td>{{ avg_grades.g3 }}</td>
  105.             <td>{{ avg_grades.g4 }}</td>
  106.             <td>{{ avg_grades.g5 }}</td>
  107.             <td>{{ avg_grades.g6 }}</td>
  108.         </tr>
  109.     </tbody>
  110. </table>
  111.  
  112. </body>
  113. </html>

<4>gradeList.html

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>学生信息管理</title>
  7.     <link rel="stylesheet" href="https://www.layuicdn.com/layui/css/layui.css">
  8.     <script src="https://www.layuicdn.com/layui/layui.js"></script>
  9.     <!-- 引入 Chart.js 库 -->
  10.     <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
  11.     <script src="../static/plugins/jquery-3.7.1.min.js"></script>
  12.     <script type="text/javascript" src="../static/js/jquery.basictable.min.js"></script>
  13.     <script type="text/javascript" src="../static/js/reponsetable.min.js"></script>
  14.     <script type="text/javascript" src="../static/plugins/layer/layer.js"></script>
  15.     <link rel="stylesheet" type="text/css" href="../static/plugins/layer/theme/default/layer.css">
  16.     <link rel="stylesheet" type="text/css" href="../static/css/reponse.css">
  17.     <link rel="stylesheet" type="text/css" href="../static/css/lib/bootstrap.min.css">
  18.     <link rel="stylesheet" type="text/css" href="../static/css/custom.css">
  19.     <style type="text/css">
  20.         .alertceng {
  21.             background: #FFFFFF;
  22.             padding: 10px;
  23.             display: none;
  24.         }
  25.  
  26.         .alertceng span.title {
  27.             margin-right: 10px;
  28.         }
  29.     </style>
  30. </head>
  31. <body>
  32. <div class="layui-fluid layadmin-homepage-fluid" style="background: #fff;width:90%;margin:0 auto;">
  33.     <div id="page">
  34.         <h1>学生成绩信息管理</h1>
  35.         <table id="table" class="reponsetable"></table>
  36.         <script type="text/html" id="editer">
  37.             <a class="layui-btn layui-btn-xs" onclick="scatterPlot(this)">散点图</a>
  38.             <a class="layui-btn layui-btn-xs" onclick="radarChart(this)">雷达图</a>
  39.             <a class="layui-btn layui-btn-xs" onclick="careerPlan(this)">职业规划</a>
  40.             <a class="layui-btn layui-btn-xs" onclick="edittr(this)">修改</a>
  41.             <a class="layui-btn layui-btn-xs" onclick="deleteRecord(this)">删除</a>
  42.         </script>
  43.         <div class="btn-container">
  44.             <button class="layui-btn" onclick="addNew();">新增信息</button>
  45.         </div>
  46.     </div>
  47. </div>
  48. <div id="editcontent" class="alertceng">
  49.     <p><span class="title">姓名:</span><input type="text" id="name"/></p>
  50.     <p><span class="title">成绩1:</span><input type="text" id="g1"/></p>
  51.     <p><span class="title">成绩2:</span><input type="text" id="g2"/></p>
  52.     <p><span class="title">成绩3:</span><input type="text" id="g3"/></p>
  53.     <p><span class="title">成绩4:</span><input type="text" id="g4"/></p>
  54.     <p><span class="title">成绩5:</span><input type="text" id="g5"/></p>
  55.     <p><span class="title">成绩6:</span><input type="text" id="g6"/></p>
  56.     <button id="saveBtn">保存</button>
  57.     <button id="cancelBtn">取消</button>
  58. </div>
  59.  
  60. <script type="text/javascript">
  61.     $(document).ready(function () {
  62.         // 使用后端传递的数据
  63.         fetch("/get_student_data")
  64.             .then(response => response.json())
  65.             .then(data => {
  66.                 // 获取从后端获取的学生信息数据
  67.                 var studentData = data.data;
  68.  
  69.                 // 原始数据，json构建
  70.                 $('#table').basictable({
  71.                     breakpoint: 768
  72.                 });
  73.  
  74.                 // 使用后端传递的数据
  75.                 $("#table").reponsetable({
  76.                     "id": "table",
  77.                     "operation": "editer",
  78.                     "type": "numbers",
  79.                     "colum": [
  80.                         {"field": "name", "title": "姓名"},
  81.                         {"field": "g1", "title": "成绩1"},
  82.                         {"field": "g2", "title": "成绩2"},
  83.                         {"field": "g3", "title": "成绩3"},
  84.                         {"field": "g4", "title": "成绩4"},
  85.                         {"field": "g5", "title": "成绩5"},
  86.                         {"field": "g6", "title": "成绩6"}
  87.                     ],
  88.                     "data": studentData  // 使用后端传递的数据
  89.                 });
  90.  
  91.                 // 定义按钮事件
  92.                 layui.use('layer', function () {
  93.                     layer = layui.layer;
  94.                 });
  95.             })
  96.             .catch(error => console.error('获取学生信息数据时发生错误:', error));
  97.  
  98.         // 显示表单
  99.         window.addNew = function () {
  100.             $('#editcontent').show();
  101.         }
  102.  
  103.         // 保存按钮点击事件
  104.         $('#saveBtn').on('click', function () {
  105.             // 保存操作
  106.             var newData = {
  107.                 "name": $("#name").val(),
  108.                 "g1": $("#g1").val(),
  109.                 "g2": $("#g2").val(),
  110.                 "g3": $("#g3").val(),
  111.                 "g4": $("#g4").val(),
  112.                 "g5": $("#g5").val(),
  113.                 "g6": $("#g6").val()
  114.             };
  115.  
  116.             // 发送异步请求保存到数据库
  117.             $.ajax({
  118.                 type: 'POST',
  119.                 url: '/saveDataToDatabase',
  120.                 data: JSON.stringify(newData),
  121.                 contentType: 'application/json',
  122.                 success: function (response) {
  123.                     // 处理保存成功的逻辑
  124.                     if (response.success) {
  125.                         // 这里可以根据实际情况做一些提示或者刷新表格等操作
  126.                         console.log('数据保存成功');
  127.                         // 隐藏表单
  128.                         $('#editcontent').hide();
  129.                         // 清空输入框
  130.                         $('#editcontent input').val('');
  131.                         // 刷新表格数据
  132.                         refreshTable();
  133.                     } else {
  134.                         console.error('数据保存失败');
  135.                     }
  136.                 },
  137.                 error: function (error) {
  138.                     console.error('保存数据时发生错误:', error);
  139.                 }
  140.             });
  141.         });
  142.  
  143.         // 取消按钮点击事件
  144.         $('#cancelBtn').on('click', function () {
  145.             // 隐藏表单
  146.             $('#editcontent').hide();
  147.             // 清空输入框
  148.             $('#editcontent input').val('');
  149.         });
  150.  
  151.         // 定义刷新表格数据的函数
  152.         function refreshTable() {
  153.             fetch("/get_student_data")
  154.                 .then(response => response.json())
  155.                 .then(data => {
  156.                     // 获取从后端获取的学生信息数据
  157.                     var studentData = data.data;
  158.                     $("#table").reponsetable("setData", studentData);
  159.                 })
  160.                 .catch(error => console.error('获取学生信息数据时发生错误:', error));
  161.         }
  162.         // 散点图按钮点击事件
  163.         function scatterPlot(obj) {
  164.             // 散点图按钮点击事件处理逻辑
  165.             // ...
  166.         }
  167.  
  168.         // 雷达图按钮点击事件
  169.         function radarChart(obj) {
  170.             // 雷达图按钮点击事件处理逻辑
  171.             // ...
  172.         }
  173.  
  174.         // 职业规划按钮点击事件
  175.         function careerPlan(obj) {
  176.             // 职业规划按钮点击事件处理逻辑
  177.             // ...
  178.         }
  179.         //删除
  180.         // 删除按钮点击事件
  181. window.deleteRecord = function (obj) {
  182.     var currentRowData = getCurrentRowData(obj);
  183.  
  184.     // 发送删除请求
  185.     $.ajax({
  186.         type: 'POST',
  187.         url: '/deleteRecord',
  188.         data: JSON.stringify(currentRowData),
  189.         contentType: 'application/json',
  190.         success: function (response) {
  191.             if (response.success) {
  192.                 console.log('数据删除成功');
  193.                 // 刷新表格数据
  194.                 refreshTable();
  195.             } else {
  196.                 console.error('数据删除失败');
  197.             }
  198.         },
  199.         error: function (error) {
  200.             console.error('删除数据时发生错误:', error);
  201.         }
  202.     });
  203. }
  204.  
  205. // 获取当前行的学生信息
  206. function getCurrentRowData(obj) {
  207.     var currentRow = $(obj).closest('tr');
  208.     var rowData = {
  209.         name: currentRow.find('td[data-field="name"]').text(),
  210.         g1: currentRow.find('td[data-field="g1"]').text(),
  211.         g2: currentRow.find('td[data-field="g2"]').text(),
  212.         // 添加其他成绩项
  213.     };
  214.     return rowData;
  215. }
  216.  
  217.  
  218.     // 修改按钮点击事件
  219.     window.edittr=function (obj) {
  220.         // 获取当前行的数据
  221.          // 获取当前行的数据
  222.     var currentRowData = getCurrentRowData(obj);
  223.  
  224.     // 将数据填充到表单中
  225.     $('#name').val(currentRowData.name).prop('readonly', true); // 设置为只读
  226.     $('#g1').val(currentRowData.g1);
  227.     $('#g2').val(currentRowData.g2);
  228.     $('#g3').val(currentRowData.g3);
  229.     $('#g4').val(currentRowData.g4);
  230.     $('#g5').val(currentRowData.g5);
  231.     $('#g6').val(currentRowData.g6);
  232.  
  233.     // 显示表单
  234.     $('#editcontent').show();
  235.     }
  236.     // 保存按钮点击事件
  237. $('#saveBtn').on('click', function () {
  238.     // 保存操作
  239.     var newData = {
  240.         "name": $("#name").val(),
  241.         "g1": $("#g1").val(),
  242.         "g2": $("#g2").val(),
  243.         "g3": $("#g3").val(),
  244.         "g4": $("#g4").val(),
  245.         "g5": $("#g5").val(),
  246.         "g6": $("#g6").val()
  247.     };
  248.  
  249.     // 发送异步请求保存到数据库
  250.     $.ajax({
  251.         type: 'POST',
  252.         url: '/updateRecord',  // 修改为更新路由
  253.         data: JSON.stringify(newData),
  254.         contentType: 'application/json',
  255.         success: function (response) {
  256.             // 处理更新成功的逻辑
  257.             if (response.success) {
  258.                 console.log('数据更新成功');
  259.                 // 隐藏表单
  260.                 $('#editcontent').hide();
  261.                 // 清空输入框
  262.                 $('#editcontent input').val('');
  263.                 // 刷新表格数据
  264.                 refreshTable();
  265.             } else {
  266.                 console.error('数据更新失败');
  267.             }
  268.         },
  269.         error: function (error) {
  270.             console.error('更新数据时发生错误:', error);
  271.         }
  272.     });
  273. });
  274.  
  275. //散点图
  276.  
  277.     window.scatterPlot=function (obj) {
  278.             // 获取当前行的数据
  279.             // 获取当前行的数据
  280.             var currentRowData = getCurrentRowData(obj);
  281.  
  282.             // 构建散点图数据
  283.             var scatterChartData = {
  284.                 datasets: [{
  285.                     label: '散点图',
  286.                     data: [{
  287.                         x: '成绩1',
  288.                         y: currentRowData.g1
  289.                     }, {
  290.                         x: '成绩2',
  291.                         y: currentRowData.g2
  292.                     }, {
  293.                         x: '成绩3',
  294.                         y: currentRowData.g3
  295.                     }, {
  296.                         x: '成绩4',
  297.                         y: currentRowData.g4
  298.                     }, {
  299.                         x: '成绩5',
  300.                         y: currentRowData.g5
  301.                     }, {
  302.                         x: '成绩6',
  303.                         y: currentRowData.g6
  304.                     }],
  305.                     backgroundColor: 'rgba(255, 99, 132, 1)' // 颜色
  306.                 }]
  307.             };
  308.  
  309.             // 创建 canvas 元素
  310.             var canvas = document.createElement('canvas');
  311.             canvas.width = 400; // 设置宽度
  312.             canvas.height = 400; // 设置高度
  313.  
  314.             // 将 canvas 元素添加到页面
  315.             document.body.appendChild(canvas);
  316.  
  317.             // 创建散点图
  318.             var ctx = canvas.getContext('2d');
  319.             new Chart(ctx, {
  320.                 type: 'scatter',
  321.                 data: scatterChartData,
  322.                 options: {
  323.                     responsive: false,
  324.                     scales: {
  325.                         x: {
  326.                             type: 'category', // 设置 x 轴类型为分类
  327.                             labels: ['成绩1', '成绩2', '成绩3', '成绩4', '成绩5', '成绩6'],
  328.                             position: 'bottom'
  329.                         },
  330.                         y: {
  331.                             type: 'linear',
  332.                             position: 'left'
  333.                         }
  334.                     }
  335.                 }
  336.             });
  337.         }
  338.  
  339.         // 获取当前行的学生信息
  340.         function getCurrentRowData(obj) {
  341.             var currentRow = obj.closest('tr');
  342.             var rowData = {
  343.                 name: currentRow.querySelector('td[data-field="name"]').textContent,
  344.                 g1: parseFloat(currentRow.querySelector('td[data-field="g1"]').textContent),
  345.                 g2: parseFloat(currentRow.querySelector('td[data-field="g2"]').textContent),
  346.                 g3: parseFloat(currentRow.querySelector('td[data-field="g3"]').textContent),
  347.                 g4: parseFloat(currentRow.querySelector('td[data-field="g4"]').textContent),
  348.                 g5: parseFloat(currentRow.querySelector('td[data-field="g5"]').textContent),
  349.                 g6: parseFloat(currentRow.querySelector('td[data-field="g6"]').textContent)
  350.             };
  351.             return rowData;
  352.         }
  353.  
  354.         //雷达图
  355.           window.radarChart=function (obj) {
  356.             // 获取当前行的数据
  357.             var currentRowData = getCurrentRowData(obj);
  358.  
  359.             // 构建雷达图数据
  360.             var radarChartData = {
  361.                 labels: ['成绩1', '成绩2', '成绩3', '成绩4', '成绩5', '成绩6'],
  362.                 datasets: [{
  363.                     label: '雷达图',
  364.                     data: [currentRowData.g1, currentRowData.g2, currentRowData.g3, currentRowData.g4, currentRowData.g5, currentRowData.g6],
  365.                     backgroundColor: 'rgba(75, 192, 192, 0.2)', // 填充颜色
  366.                     borderColor: 'rgba(75, 192, 192, 1)', // 边框颜色
  367.                     borderWidth: 1 // 边框宽度
  368.                 }]
  369.             };
  370.  
  371.             // 创建 canvas 元素
  372.             var canvas = document.createElement('canvas');
  373.             canvas.width = 400; // 设置宽度
  374.             canvas.height = 400; // 设置高度
  375.  
  376.             // 将 canvas 元素添加到页面
  377.             document.body.appendChild(canvas);
  378.  
  379.             // 创建雷达图
  380.             var ctx = canvas.getContext('2d');
  381.             new Chart(ctx, {
  382.                 type: 'radar',
  383.                 data: radarChartData,
  384.                 options: {
  385.                     responsive: false,
  386.                     scales: {
  387.                         r: {
  388.                             beginAtZero: true
  389.                         }
  390.                     }
  391.                 }
  392.             });
  393.         }
  394.  
  395.         // 获取当前行的学生信息
  396.         function getCurrentRowData(obj) {
  397.             var currentRow = obj.closest('tr');
  398.             var rowData = {
  399.                 name: currentRow.querySelector('td[data-field="name"]').textContent,
  400.                 g1: parseFloat(currentRow.querySelector('td[data-field="g1"]').textContent),
  401.                 g2: parseFloat(currentRow.querySelector('td[data-field="g2"]').textContent),
  402.                 g3: parseFloat(currentRow.querySelector('td[data-field="g3"]').textContent),
  403.                 g4: parseFloat(currentRow.querySelector('td[data-field="g4"]').textContent),
  404.                 g5: parseFloat(currentRow.querySelector('td[data-field="g5"]').textContent),
  405.                 g6: parseFloat(currentRow.querySelector('td[data-field="g6"]').textContent)
  406.             };
  407.             return rowData;
  408.         }
  409.  
  410.         //职业规划
  411.         // 职业规划按钮点击事件
  412. window.careerPlan=function (obj) {
  413.     // 获取当前行的数据
  414.     var currentRowData = getCurrentRowData(obj);
  415.  
  416.     // 向后端发送请求，获取职业规划结果
  417.     $.ajax({
  418.         type: 'POST',
  419.         url: '/careerPlan',
  420.         data: JSON.stringify({ g6: currentRowData.g6 }),
  421.         contentType: 'application/json',
  422.         success: function (response) {
  423.             if (response.success) {
  424.                 // 显示职业规划结果
  425.                 showCareerPlanDialog(response.message);
  426.             } else {
  427.                 console.error('获取职业规划结果失败');
  428.             }
  429.         },
  430.         error: function (error) {
  431.             console.error('获取职业规划结果时发生错误:', error);
  432.         }
  433.     });
  434. }
  435.  
  436. // 显示职业规划结果的对话框
  437. function showCareerPlanDialog(message) {
  438.     layer.open({
  439.         title: '职业规划结果',
  440.         content: message,
  441.         btn: ['确定'],
  442.         yes: function (index, layero) {
  443.             // 点击确定按钮的回调，可以根据需要添加其他操作
  444.             layer.close(index);
  445.         }
  446.     });
  447. }
  448.  
  449.     });
  450. </script>
  451. </body>
  452. </html>

 2、其他前端代码略

三、后端代码

  1. from flask import Flask, render_template, request, jsonify
  2. import pymysql
  3. from flask_cors import CORS
  4.  
  5. app = Flask(__name__)
  6. CORS(app)
  7.  
  8. # MySQL数据库连接配置
  9. DATABASE_CONFIG = {
  10.     'host': '127.0.0.1',
  11.     'user': 'root',
  12.     'password': 'Your_Password',
  13.     'database': 'pythonweb',
  14.     'cursorclass': pymysql.cursors.DictCursor,
  15. }
  16.  
  17.  
  18. # 创建MySQL连接
  19. def create_connection():
  20.     return pymysql.connect(**DATABASE_CONFIG)
  21.  
  22.  
  23. # 创建users表（如果不存在）
  24. def create_table():
  25.     conn = create_connection()
  26.     cursor = conn.cursor()
  27.     cursor.execute('''
  28.         CREATE TABLE IF NOT EXISTS users (
  29.             id INT AUTO_INCREMENT PRIMARY KEY,
  30.             username VARCHAR(255) NOT NULL,
  31.             password VARCHAR(255) NOT NULL
  32.         )
  33.     ''')
  34.     conn.commit()
  35.     conn.close()
  36.  
  37.  
  38. # 创建表格（如果不存在）
  39. create_table()
  40.  
  41.  
  42. @app.route("/")
  43. def index():
  44.     return render_template("index.html")
  45.  
  46.  
  47. @app.route("/login", methods=['POST'])
  48. def login():
  49.     data = request.json
  50.     username = data.get('Username')
  51.     password = data.get('Password')
  52.  
  53.     # 在这里执行与数据库的交互逻辑，检查用户名和密码是否匹配
  54.     user = get_user(username, password)
  55.  
  56.     # 在登录成功时返回一个 success 字段
  57.     if user:
  58.         return jsonify({'success': True, 'message': '登录成功'})
  59.     else:
  60.         return jsonify({'success': False, 'message': '无效的用户名或密码'}), 401
  61.  
  62.  
  63. def get_user(username, password):
  64.     conn = create_connection()
  65.     cursor = conn.cursor()
  66.     cursor.execute('SELECT * FROM users WHERE username = %s AND password = %s', (username, password))   #参数化查询，避免sql注入
  67.     user = cursor.fetchone()    #将查询结果这一行数据赋值给user变量，如果未查询到则为空
  68.     conn.close()
  69.     return user                 #返回查询得到的数据
  70.  
  71.  
  72. # 创建grades表（如果不存在）
  73. def create_grades_table():
  74.     conn = create_connection()
  75.     cursor = conn.cursor()
  76.     cursor.execute('''
  77.         create table if not exists grade(
  78.             name varchar(255) not null,
  79.             g1 int not null ,
  80.             g2 int not null ,
  81.             g3 int not null ,
  82.             g4 int not null ,
  83.             g5 int not null ,
  84.             g6 int not null
  85.         )
  86.     ''')
  87.     conn.commit()
  88.     conn.close()
  89.  
  90. # 创建表格（如果不存在）
  91. create_grades_table()
  92.  
  93.  
  94. # 路由用于保存数据到数据库
  95. @app.route("/saveDataToDatabase", methods=['POST'])
  96. def save_data_to_database():
  97.     data = request.json
  98.  
  99.     name = data.get('name')
  100.     g1 = data.get('g1')
  101.     g2 = data.get('g2')
  102.     g3 = data.get('g3')
  103.     g4 = data.get('g4')
  104.     g5 = data.get('g5')
  105.     g6 = data.get('g6')
  106.  
  107.     # 在这里执行与数据库的交互逻辑，将数据保存到数据库
  108.     success = save_data_to_db(name, g1, g2, g3, g4, g5, g6)
  109.  
  110.     # 响应
  111.     if success:
  112.         return jsonify({'success': True, 'message': '数据保存成功'})
  113.     else:
  114.         return jsonify({'success': False, 'message': '数据保存失败'}), 500
  115.  
  116.  
  117. def save_data_to_db(name, g1, g2, g3, g4, g5, g6):
  118.     try:
  119.         conn = create_connection()
  120.         cursor = conn.cursor()
  121.         cursor.execute('INSERT INTO grade (name, g1, g2, g3, g4, g5, g6) VALUES (%s, %s, %s, %s, %s, %s, %s)',
  122.                        (name, g1, g2, g3, g4, g5, g6))
  123.         conn.commit()
  124.         conn.close()
  125.         return True
  126.     except Exception as e:
  127.         print(f"Error saving data to database: {e}")
  128.         return False
  129.  
  130.  
  131. # 跳转hall.html界面的路由函数
  132. @app.route("/hall")
  133. def hall():
  134.     return render_template("hall.html")
  135.  
  136.  
  137. # 跳转gradeList.html界面的路由函数
  138. @app.route("/gradeList")
  139. def gL():
  140.     return render_template("gradeList.html")
  141.  
  142.  
  143. @app.route("/get_student_data")
  144. def get_student_data():
  145.     conn = create_connection()
  146.     cursor = conn.cursor()
  147.     cursor.execute('SELECT name, g1, g2, g3, g4, g5, g6 FROM grade')
  148.     student_data = cursor.fetchall()
  149.     conn.close()
  150.     return jsonify({"data": student_data})
  151.  
  152.  
  153. # 删除路由
  154. # 路由用于删除数据
  155. @app.route("/deleteRecord", methods=['POST'])
  156. def delete_record():
  157.     data = request.json
  158.  
  159.     name = data.get('name')
  160.     g1 = data.get('g1')
  161.     g2 = data.get('g2')
  162.     # 添加其他成绩项
  163.  
  164.     # 在这里执行与数据库的交互逻辑，将数据从数据库中删除
  165.     success = delete_record_from_db(name, g1, g2)
  166.  
  167.     # 响应
  168.     if success:
  169.         return jsonify({'success': True, 'message': '数据删除成功'})
  170.     else:
  171.         return jsonify({'success': False, 'message': '数据删除失败'}), 500
  172.  
  173.  
  174. def delete_record_from_db(name, g1, g2):
  175.     try:
  176.         conn = create_connection()
  177.         cursor = conn.cursor()
  178.         cursor.execute('DELETE FROM grade WHERE name = %s AND g1 = %s AND g2 = %s',
  179.                        (name, g1, g2))
  180.         conn.commit()
  181.         conn.close()
  182.         return True
  183.     except Exception as e:
  184.         print(f"Error deleting data from database: {e}")
  185.         return False
  186.  
  187.  
  188. # 路由用于更新数据
  189. @app.route("/updateRecord", methods=['POST'])
  190. def update_record():
  191.     data = request.json
  192.  
  193.     name = data.get('name')
  194.     g1 = data.get('g1')
  195.     g2 = data.get('g2')
  196.     g3 = data.get('g3')
  197.     g4 = data.get('g4')
  198.     g5 = data.get('g5')
  199.     g6 = data.get('g6')
  200.  
  201.     # 在这里执行与数据库的交互逻辑，将数据更新到数据库
  202.     success = update_record_in_db(name, g1, g2, g3, g4, g5, g6)
  203.  
  204.     # 响应
  205.     if success:
  206.         return jsonify({'success': True, 'message': '数据更新成功'})
  207.     else:
  208.         return jsonify({'success': False, 'message': '数据更新失败'}), 500
  209.  
  210.  
  211. def update_record_in_db(name, g1, g2, g3, g4, g5, g6):
  212.     try:
  213.         conn = create_connection()
  214.         cursor = conn.cursor()
  215.         cursor.execute('UPDATE grade SET g1=%s, g2=%s, g3=%s, g4=%s, g5=%s, g6=%s WHERE name=%s',
  216.                        (g1, g2, g3, g4, g5, g6, name))
  217.         conn.commit()
  218.         conn.close()
  219.         return True
  220.     except Exception as e:
  221.         print(f"Error updating data in database: {e}")
  222.         return False
  223.  
  224.  
  225. # 路由用于职业规划
  226. @app.route("/careerPlan", methods=['POST'])
  227. def career_plan():
  228.     data = request.json
  229.     g6 = data.get('g6')
  230.  
  231.     # 根据成绩6进行职业规划
  232.     career = plan_career(int(g6))
  233.  
  234.     # 响应
  235.     return jsonify({'success': True, 'message': career})
  236.  
  237.  
  238. # 根据成绩6进行职业规划
  239. def plan_career(g6):
  240.     if g6 > 100:
  241.         return '黑客'
  242.     elif 80 <= g6 <= 100:
  243.         return '算法设计师'
  244.     elif 60 <= g6 < 80:
  245.         return '运维工程师'
  246.     elif 40 <= g6 < 60:
  247.         return '电脑维修工'
  248.     else:
  249.         return '板砖'
  250.  
  251.  
  252. @app.route("/sa")
  253. def sa():
  254.     conn = create_connection()
  255.     cursor = conn.cursor()
  256.     cursor.execute('SELECT name, g1, g2, g3, g4, g5, g6 FROM grade')
  257.     students = cursor.fetchall()
  258.  
  259.     # 计算最高分、最低分和平均分
  260.     max_grades = {'g1': max(student['g1'] for student in students),
  261.                   'g2': max(student['g2'] for student in students),
  262.                   'g3': max(student['g3'] for student in students),
  263.                   'g4': max(student['g4'] for student in students),
  264.                   'g5': max(student['g5'] for student in students),
  265.                   'g6': max(student['g6'] for student in students)}
  266.  
  267.     min_grades = {'g1': min(student['g1'] for student in students),
  268.                   'g2': min(student['g2'] for student in students),
  269.                   'g3': min(student['g3'] for student in students),
  270.                   'g4': min(student['g4'] for student in students),
  271.                   'g5': min(student['g5'] for student in students),
  272.                   'g6': min(student['g6'] for student in students)}
  273.  
  274.     avg_grades = {'g1': sum(student['g1'] for student in students) / len(students),
  275.                   'g2': sum(student['g2'] for student in students) / len(students),
  276.                   'g3': sum(student['g3'] for student in students) / len(students),
  277.                   'g4': sum(student['g4'] for student in students) / len(students),
  278.                   'g5': sum(student['g5'] for student in students) / len(students),
  279.                   'g6': sum(student['g6'] for student in students) / len(students)}
  280.  
  281.     conn.close()
  282.     return render_template("sa.html", students=students, max_grades=max_grades, min_grades=min_grades,
  283.                            avg_grades=avg_grades)
  284.  
  285.  
  286. if __name__ == '__main__':
  287.     app.run(debug=True)

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/繁依Fanyi0/article/detail/679479
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号