如何用具体编程前端代码实现其中的管理员调整毕设结果和导出毕设页面
时间: 2024-03-30 20:37:06 浏览: 27
管理员调整毕设结果和导出毕设页面需要涉及到后端的数据处理和前端的页面展示,下面是一个简单的前端代码实现,需要和后端进行数据交互才能实现完整功能。
管理员调整毕设结果的代码实现:
```html
<!-- 在html文件中添加一个表格,用于展示毕设结果 -->
<table>
<thead>
<tr>
<th>学生姓名</th>
<th>毕设题目</th>
<th>指导教师</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<!-- 使用Javascript动态生成表格 -->
<script>
// 获取后端传来的毕设结果数据
const data = [
{name: '张三', topic: '毕设题目1', teacher: '李老师'},
{name: '李四', topic: '毕设题目2', teacher: '王老师'},
{name: '王五', topic: '毕设题目3', teacher: '张老师'},
];
// 循环遍历数据,生成表格行
data.forEach((item) => {
const tr = document.createElement('tr');
const td1 = document.createElement('td');
const td2 = document.createElement('td');
const td3 = document.createElement('td');
const td4 = document.createElement('td');
td1.innerText = item.name;
td2.innerText = item.topic;
td3.innerText = item.teacher;
td4.innerHTML = '<button onclick="adjustResult()">调整</button>';
tr.appendChild(td1);
tr.appendChild(td2);
tr.appendChild(td3);
tr.appendChild(td4);
document.querySelector('tbody').appendChild(tr);
});
// 调整毕设结果的函数
function adjustResult() {
// 弹出一个模态框,让管理员输入修改后的毕设结果
const result = prompt('请输入修改后的毕设结果');
// 调用后端接口,将修改后的结果保存到数据库中
// 刷新表格,重新展示毕设结果
}
</script>
</tbody>
</table>
```
管理员导出毕设页面的代码实现:
```html
<!-- 在html文件中添加一个按钮,用于导出毕设页面 -->
<button onclick="exportResult()">导出毕设结果</button>
<script>
function exportResult() {
// 调用后端接口,获取毕设结果数据
const data = [
{name: '张三', topic: '毕设题目1', teacher: '李老师'},
{name: '李四', topic: '毕设题目2', teacher: '王老师'},
{name: '王五', topic: '毕设题目3', teacher: '张老师'},
];
// 将数据转换成csv格式,方便导出
const csv = '学生姓名,毕设题目,指导教师\n';
data.forEach((item) => {
csv += `${item.name},${item.topic},${item.teacher}\n`;
});
// 创建一个下载链接,让管理员可以下载csv文件
const link = document.createElement('a');
link.setAttribute('href', `data:text/csv;charset=utf-8,${encodeURIComponent(csv)}`);
link.setAttribute('download', '毕设结果.csv');
link.click();
}
</script>
```
以上代码仅为示例,具体实现方式会因应用场景不同而有所变化。
相关推荐
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)