本节课的目标是实现项目详情页的子页面。我们将按照第一稿的设计进行开发，首先从项目基础信息设置页面开始。
第一稿设计概述：
项目基础信息设置：包括项目名称等字段，内容存储在DB_project表中。进入项目后默认进入此页面。项目需求页面：包括需求粘贴框、分解需求、优化需求。内容存储在DB_srs表中，每个大需求被分解为多个小功能，通过项目ID关联。用例生成页面：包括多种黑盒设计方法，按照小需求生成用例。可导出Excel，用例结果即时生成，不做永久存储。其他页面：包括未来会添加的备注等内容。开发步骤：
创建子页面框架： 打开ProjectDetail.vue，添加四个el-tab-pane标签，用于承载四个子页面。
<template>
<el-tabs v-model="activeName" @tab-click="handleTabClick">
<el-tab-pane label="项目设置" name="projectSet">
<!-- 项目设置内容 -->
</el-tab-pane>
<el-tab-pane label="项目需求" name="projectRequirements">
<!-- 项目需求内容 -->
</el-tab-pane>
<el-tab-pane label="用例生成" name="useCaseGeneration">
<!-- 用例生成内容 -->
</el-tab-pane>
<el-tab-pane label="其他" name="others">
<!-- 其他内容 -->
</el-tab-pane>
</el-tabs>
</template>登录后复制
效果如下：
实现项目设置子页面： 在components文件夹中新建ProjectSet.vue组件，用于展示和修改项目名称。
<template>
<div class="input-wrap">
<span class="label">项目名字：</span>
<el-input class="short-input" placeholder="请输入项目名称" v-model="name"></el-input>
</div>
</template>
<p><script>
export default {
name: "ProjectSet",
props: ["project"],
computed: {
name: {
get() {
return this.project.name;
},
set(newValue) {
this.$emit('update:name', newValue);
}
}
}
}
</script></p><p><style scoped>
.input-wrap {
display: flex;
align-items: center;
}
.label {
margin-right: 12px;
min-width: 80px;
}
.short-input {
width: 300px;
}
</style>登录后复制在ProjectDetail.vue中，传递项目信息给ProjectSet组件：
<template>
<el-tab-pane label="项目设置" name="projectSet">
<ProjectSet :project="project" @update:name="handleNameUpdate" />
</el-tab-pane>
</template></p><p><script>
import ProjectSet from '@/components/ProjectSet.vue';</p><p>export default {
components: { ProjectSet },
data() {
return {
project: {
name: '旧项目名称'
}
};
},
methods: {
handleNameUpdate(newName) {
this.project.name = newName;
// 调用API更新数据库
this.updateProjectName(newName);
},
updateProjectName(newName) {
// 这里添加API调用代码
}
}
}
</script>登录后复制效果如下：
实现自动更新功能： 在ProjectSet.vue中，监控name变量的变化，并将新值传递给父组件。
<script>
export default {
name: "ProjectSet",
props: ["project"],
computed: {
name: {
get() {
return this.project.name;
},
set(newValue) {
this.$emit('update:name', newValue);
}
}
}
}
</script>登录后复制在ProjectDetail.vue中，接收新值并更新数据库。
<script>
import ProjectSet from '@/components/ProjectSet.vue';</p><p>export default {
components: { ProjectSet },
data() {
return {
project: {
name: '旧项目名称'
}
};
},
methods: {
handleNameUpdate(newName) {
this.project.name = newName;
this.updateProjectName(newName);
},
updateProjectName(newName) {
// 调用API更新数据库
axios.post('/api/update-project-name/', {
id: this.project.id,
name: newName
}).then(response => {
console.log('项目名称更新成功', response.data);
}).catch(error => {
console.error('项目名称更新失败', error);
});
}
}
}
</script>登录后复制在Django中，添加更新项目名称的API：
在urls.py中：
from django.urls import path
from . import views</p><p>urlpatterns = [
path('api/update-project-name/', views.update_project_name, name='update_project_name'),
]登录后复制在views.py中：
from django.http import JsonResponse
from .models import Project</p><p>def update_project_name(request):
if request.method == 'POST':
project_id = request.POST.get('id')
new_name = request.POST.get('name')
try:
project = Project.objects.get(id=project_id)
project.name = new_name
project.save()
return JsonResponse({'status': 'success', 'message': '项目名称更新成功'})
except Project.DoesNotExist:
return JsonResponse({'status': 'error', 'message': '项目不存在'}, status=404)
return JsonResponse({'status': 'error', 'message': '无效请求'}, status=400)登录后复制效果如下：
本节内容到此结束，欢迎继续关注下一节的更新。
以上就是【deepseek用例生成平台-14】核心内容开始！项目详情页tab子页面设计和实现的详细内容，更多请关注楠楠科技社其它相关文章！
