feat: add chenxiaoxuezi paper and database pages
陈潇雪子
parent
cd9aa4d3be
commit
b24555272d
|
|
@ -97,6 +97,12 @@ export const constantRoutes = [
|
|||
component: () => import('@/views/paper/zhangjialin/index'),
|
||||
name: 'ZhangjialinPaper',
|
||||
meta: { title: '论文首页（张佳琳）', icon: 'user' }
|
||||
},
|
||||
{
|
||||
path: 'chenxiaoxuezi',
|
||||
component: () => import('@/views/paper/chenxiaoxuezi/index'),
|
||||
name: 'ChenxiaoxueziPaper',
|
||||
meta: { title: '论文首页（陈潇雪子）', icon: 'user' }
|
||||
}
|
||||
]
|
||||
},
|
||||
|
|
@ -130,6 +136,12 @@ export const constantRoutes = [
|
|||
component: () => import('@/views/database/wangbingyan/index'),
|
||||
name: 'Wangbingyan',
|
||||
meta: { title: '王冰堰', icon: 'user' }
|
||||
},
|
||||
{
|
||||
path: 'chenxiaoxuezi',
|
||||
component: () => import('@/views/database/chenxiaoxuezi/index'),
|
||||
name: 'Chenxiaoxuezi',
|
||||
meta: { title: '陈潇雪子', icon: 'user' }
|
||||
}
|
||||
]
|
||||
},
|
||||
|
|
|
|||
|
|
@ -0,0 +1,204 @@
|
|||
<template>
|
||||
<div class="database-manage-page">
|
||||
<!-- 搜索区域 -->
|
||||
<div class="search-container">
|
||||
<el-form :inline="true" class="search-form">
|
||||
<el-form-item label="数据库名称">
|
||||
<el-input
|
||||
v-model="searchForm.dbName"
|
||||
placeholder="输入数据库名称"
|
||||
clearable
|
||||
style="width: 200px;"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" icon="el-icon-search" @click="handleSearch">搜索</el-button>
|
||||
<el-button icon="el-icon-refresh" @click="handleReset">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
|
||||
<!-- 操作按钮区域 -->
|
||||
<div class="btn-container">
|
||||
<el-button type="primary" icon="el-icon-plus" @click="handleAdd">+ 新增</el-button>
|
||||
<el-button type="warning" icon="el-icon-edit" @click="handleEdit">修改</el-button>
|
||||
<el-button type="danger" icon="el-icon-delete" @click="handleDelete">删除</el-button>
|
||||
<el-button type="success" icon="el-icon-download" @click="handleExport">导出</el-button>
|
||||
</div>
|
||||
|
||||
<!-- 数据表格区域 -->
|
||||
<div class="table-container">
|
||||
<el-table
|
||||
v-loading="loading"
|
||||
:data="dbList"
|
||||
border
|
||||
style="width: 100%"
|
||||
@selection-change="handleSelectionChange"
|
||||
>
|
||||
<el-table-column type="selection" width="55" align="center" />
|
||||
<el-table-column type="index" label="产品ID" width="80" align="center" />
|
||||
<el-table-column prop="dbName" label="数据库名称" min-width="120" />
|
||||
<el-table-column prop="icon" label="图标" width="80" align="center">
|
||||
<template slot-scope="scope">
|
||||
<svg-icon :icon-class="scope.row.icon" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="type" label="类型" min-width="100" />
|
||||
<el-table-column prop="description" label="数据库描述" min-width="200" show-overflow-tooltip />
|
||||
<el-table-column prop="createTime" label="创建时间" min-width="150" align="center" />
|
||||
</el-table>
|
||||
</div>
|
||||
|
||||
<!-- 分页区域 -->
|
||||
<div class="pagination-container">
|
||||
<el-pagination
|
||||
background
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
:total="total"
|
||||
:page-size.sync="pagination.pageSize"
|
||||
:current-page.sync="pagination.currentPage"
|
||||
@size-change="handleSizeChange"
|
||||
@current-change="handleCurrentChange"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "ChenxiaoxueziDatabaseManage",
|
||||
data() {
|
||||
return {
|
||||
searchForm: {
|
||||
dbName: ""
|
||||
},
|
||||
dbList: [
|
||||
{
|
||||
id: 200,
|
||||
dbName: "mysql",
|
||||
icon: "database",
|
||||
type: "关系型数据库",
|
||||
description: "MySQL是一个开源的关系型数据库管理系统",
|
||||
createTime: "2024-01-20 10:00:00"
|
||||
},
|
||||
{
|
||||
id: 201,
|
||||
dbName: "oracle",
|
||||
icon: "database",
|
||||
type: "关系型数据库",
|
||||
description: "Oracle是一个功能强大的商业关系型数据库",
|
||||
createTime: "2024-01-20 10:00:00"
|
||||
},
|
||||
{
|
||||
id: 202,
|
||||
dbName: "sqlserver",
|
||||
icon: "database",
|
||||
type: "关系型数据库",
|
||||
description: "SQL Server是微软开发的关系型数据库管理系统",
|
||||
createTime: "2024-01-20 10:00:00"
|
||||
}
|
||||
],
|
||||
selectedRows: [],
|
||||
loading: false,
|
||||
pagination: {
|
||||
currentPage: 1,
|
||||
pageSize: 10
|
||||
},
|
||||
total: 3
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
handleSearch() {
|
||||
this.loading = true;
|
||||
setTimeout(() => {
|
||||
this.loading = false;
|
||||
}, 500);
|
||||
},
|
||||
handleReset() {
|
||||
this.searchForm = {
|
||||
dbName: ""
|
||||
};
|
||||
this.handleSearch();
|
||||
},
|
||||
handleAdd() {
|
||||
this.$message("新增功能");
|
||||
},
|
||||
handleEdit() {
|
||||
if (this.selectedRows.length !== 1) {
|
||||
this.$message.warning("请选择一条记录进行修改");
|
||||
return;
|
||||
}
|
||||
this.$message("修改功能");
|
||||
},
|
||||
handleDelete() {
|
||||
if (this.selectedRows.length === 0) {
|
||||
this.$message.warning("请选择要删除的记录");
|
||||
return;
|
||||
}
|
||||
this.$confirm("确定要删除选中的记录吗?", "警告", {
|
||||
confirmButtonText: "确定",
|
||||
cancelButtonText: "取消",
|
||||
type: "warning"
|
||||
})
|
||||
.then(() => {
|
||||
this.loading = true;
|
||||
setTimeout(() => {
|
||||
this.loading = false;
|
||||
this.selectedRows = [];
|
||||
this.$message.success("删除成功");
|
||||
}, 500);
|
||||
})
|
||||
.catch(() => {
|
||||
this.$message("已取消删除");
|
||||
});
|
||||
},
|
||||
handleExport() {
|
||||
this.$message("导出功能");
|
||||
},
|
||||
handleSelectionChange(selection) {
|
||||
this.selectedRows = selection;
|
||||
},
|
||||
handleSizeChange(val) {
|
||||
this.pagination.pageSize = val;
|
||||
this.handleSearch();
|
||||
},
|
||||
handleCurrentChange(val) {
|
||||
this.pagination.currentPage = val;
|
||||
this.handleSearch();
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.database-manage-page {
|
||||
padding: 20px;
|
||||
background-color: #f5f7fa;
|
||||
}
|
||||
|
||||
.search-container {
|
||||
background-color: #fff;
|
||||
padding: 15px;
|
||||
border-radius: 4px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.btn-container {
|
||||
background-color: #fff;
|
||||
padding: 15px;
|
||||
border-radius: 4px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.table-container {
|
||||
background-color: #fff;
|
||||
padding: 15px;
|
||||
border-radius: 4px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.pagination-container {
|
||||
text-align: right;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
|
@ -0,0 +1,195 @@
|
|||
<template>
|
||||
<div class="paper-container">
|
||||
<!-- 个人信息展示区 -->
|
||||
<el-card class="info-card" style="margin-bottom: 20px;">
|
||||
<div class="personal-info">
|
||||
<div class="avatar">
|
||||
<img src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png" alt="陈潇雪子头像" />
|
||||
</div>
|
||||
<div class="info-content">
|
||||
<h3>陈潇雪子</h3>
|
||||
<div class="info-item">
|
||||
<svg-icon icon-class="user" class="info-icon" />
|
||||
<span>学号：116420220066</span>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<svg-icon icon-class="phone" class="info-icon" />
|
||||
<span>联系电话：1830583962</span>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<svg-icon icon-class="building" class="info-icon" />
|
||||
<span>学院：工程技术学院</span>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<svg-icon icon-class="email" class="info-icon" />
|
||||
<span>邮箱：chenxiaoxuezi@example.com</span>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<svg-icon icon-class="peoples" class="info-icon" />
|
||||
<span>专业：数据科学与大数据技术</span>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<svg-icon icon-class="tree" class="info-icon" />
|
||||
<span>班级：226402</span>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<svg-icon icon-class="edit" class="info-icon" />
|
||||
<span>指导老师：张展</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
|
||||
<!-- 毕业论文基本信息板块 -->
|
||||
<el-card class="info-card" style="margin-bottom: 20px;">
|
||||
<div slot="header" class="card-header">
|
||||
<span>毕业论文基本信息</span>
|
||||
</div>
|
||||
<el-form :model="paperInfo" label-width="100px" size="small">
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="12">
|
||||
<el-form-item label="论文题目">
|
||||
<span>{{ paperInfo.paperTitle }}</span>
|
||||
</el-form-item>
|
||||
<el-form-item label="论文类型">
|
||||
<span>{{ paperInfo.paperType }}</span>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="提交日期">
|
||||
<span>{{ paperInfo.submitDate }}</span>
|
||||
</el-form-item>
|
||||
<el-form-item label="论文状态">
|
||||
<el-tag type="success">{{ paperInfo.status }}</el-tag>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="24">
|
||||
<el-form-item label="论文摘要">
|
||||
<p style="line-height: 1.6;">{{ paperInfo.paperAbstract }}</p>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<div style="text-align: right; margin-top: 10px;">
|
||||
<el-button type="primary" size="small">编辑论文信息</el-button>
|
||||
<el-button type="success" size="small" style="margin-left: 10px;">上传论文</el-button>
|
||||
</div>
|
||||
</el-form>
|
||||
</el-card>
|
||||
|
||||
<!-- 论文成果介绍部分 -->
|
||||
<el-card class="info-card">
|
||||
<div slot="header" class="card-header">
|
||||
<span>毕业论文成果详细介绍</span>
|
||||
</div>
|
||||
<el-tabs v-model="activeTab">
|
||||
<el-tab-pane label="研究内容">
|
||||
<div class="tab-content">
|
||||
<p>{{ paperInfo.researchContent }}</p>
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="研究方法">
|
||||
<div class="tab-content">
|
||||
<p>{{ paperInfo.researchMethod }}</p>
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="创新点">
|
||||
<div class="tab-content">
|
||||
<p>{{ paperInfo.innovationPoints }}</p>
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</el-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'ChenxiaoxueziPaper',
|
||||
data() {
|
||||
return {
|
||||
activeTab: '0',
|
||||
paperInfo: {
|
||||
paperTitle: '基于Python的音乐个性化推荐系统',
|
||||
paperType: '毕业设计（论文）',
|
||||
submitDate: '2026-01-10',
|
||||
status: '撰写中',
|
||||
paperAbstract: '随着在线音乐平台的快速发展，用户可选择的曲库规模持续扩大，传统的基于检索与榜单的内容获取方式已难以满足用户快速发现符合个人兴趣音乐的需求。本文面向音乐平台个性化推荐场景，设计并实现了一套基于Python的音乐个性化推荐系统。系统以用户-歌曲交互数据与歌曲内容特征为基础，综合采用协同过滤与内容推荐方法，构建混合推荐策略；通过数据清洗、特征工程、相似度计算与排序融合，实现对用户兴趣的建模与推荐结果的生成。系统后端采用Python完成离线训练与在线推断接口，前端提供推荐展示与反馈入口。实验基于公开数据集从准确率、召回率与覆盖率等指标进行评估，结果表明所提系统在冷启动与数据稀疏条件下具有更稳定的推荐效果，并能在保证准确性的同时提升推荐多样性。',
|
||||
researchContent: '本课题围绕“音乐个性化推荐”展开，主要研究内容包括：\n1) 需求分析与总体方案设计：明确系统用户画像、交互流程、推荐场景与评价指标，形成系统整体架构。\n2) 数据获取与预处理：对用户播放/收藏/点赞等行为数据进行清洗与标准化；对歌曲元数据（歌手、专辑、风格标签、歌词等）进行结构化处理。\n3) 推荐模型设计：实现基于物品的协同过滤（ItemCF）以捕捉群体偏好；实现基于内容的相似度推荐以利用歌曲特征；提出加权融合的混合推荐策略以兼顾准确性与可解释性。\n4) 系统实现：使用Python完成训练、召回与排序模块，提供可复用的推荐服务接口；实现推荐列表展示、用户反馈收集与结果更新机制。\n5) 实验评估与分析：对比不同模型在Top-N推荐任务上的表现，分析冷启动、长尾歌曲覆盖与多样性表现，给出可改进方向。',
|
||||
researchMethod: '研究采用的方法主要包括：\n1) 文献研究法：梳理协同过滤、矩阵分解、内容推荐与混合推荐等主流方法与工程实践。\n2) 数据分析与特征工程：通过统计分析识别数据稀疏性与长尾分布特征，构造用户偏好向量与歌曲内容向量。\n3) 算法实现与对比实验：实现ItemCF、内容相似度推荐与融合策略，在相同数据集与统一评价指标下进行对比。\n4) 系统工程方法：采用模块化设计，将数据层、算法层与服务层解耦；通过离线训练+在线推断实现可扩展部署。\n5) 指标评估与误差分析：使用Precision@K、Recall@K、Coverage、Diversity等指标量化效果，并对不佳样本进行原因分析。',
|
||||
innovationPoints: '本研究的主要创新点与特色包括：\n1) 面向音乐场景的混合推荐：将ItemCF与内容相似度召回进行加权融合，并通过简单可控的策略提升冷启动下的可用性。\n2) 可解释的推荐结果展示：基于“相似歌曲/相似用户行为/相同风格标签”等维度生成解释信息，增强用户信任与交互转化。\n3) 兼顾多样性与覆盖率的排序策略：在保证相关性的前提下引入多样性约束，改善热门歌曲垄断带来的体验问题。\n4) Python工程化落地：将数据处理、训练评估与在线服务接口统一到Python生态中，降低迭代成本并便于扩展为深度学习推荐模型。'
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.paper-container {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.personal-info {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.avatar {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
border-radius: 50%;
|
||||
overflow: hidden;
|
||||
margin-right: 20px;
|
||||
}
|
||||
|
||||
.avatar img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.info-content {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.info-content h3 {
|
||||
margin: 0 0 15px 0;
|
||||
font-size: 20px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.info-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 10px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.info-icon {
|
||||
margin-right: 8px;
|
||||
color: #409EFF;
|
||||
}
|
||||
|
||||
.card-header {
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.tab-content {
|
||||
padding: 10px 0;
|
||||
line-height: 1.8;
|
||||
}
|
||||
|
||||
.tab-content p {
|
||||
margin: 0 0 10px 0;
|
||||
}
|
||||
|
||||
.tab-content ol {
|
||||
margin: 10px 0;
|
||||
padding-left: 20px;
|
||||
}
|
||||
|
||||
.tab-content li {
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
</style>
|
||||
|
||||
Loading…
Reference in New Issue