本节课的目标是实现项目详情页的子页面。我们将按照第一稿的设计进行开发，首先从项目基础信息设置页面开始。
第一稿设计概述：
- 项目基础信息设置：包括项目名称等字段，内容存储在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)效果如下：
本节内容到此结束，欢迎继续关注下一节的更新。
