【deepseek用例生成平台-14】核心内容开始！项目详情页tab子页面设计和实现

本节课需要做的就是详情页的子页面了。

第一稿的设计如下：

1. 项目基础信息设置，包括（项目名称等各种字段等。）内容含在DB_project表，进入项目后默认进入该页面.

2. 项目需求页面，包括需求粘贴框、分解需求、优化需求。内容会在DB_srs表，每个大需求都会被分解为多段小功能(存在该表，通过关联相同的项目id来链接。)分解时候使用AI，提问包括（总体需求+分解后的功能点单独生成）

3. 用例生成页面，包括多种黑盒设计方法选择，会按照小需求来生成用例。可导出excel，用例结果不做永久存储，为既时生成。但每一段都可按照新要求重新单独生成。

4. 其他页面，包括备注等未来会添加的内容。

好现在来开始开发：

打开ProjectDetail.vue，写上四个el-tab-pane标签，用来承载四个子页面。

效果如下：

接下来搞定第一个页面的功能，虽然只有个项目名称可以更改，但也足够大家训练一下了，再多的字段也是一样的。

这些子页面我建议用小组件来做，正好可以锻炼大家的父子组件互相传参技术，然后引入到这个详情页框架中的el-tab-pane中最好。所以在components文件夹新建 项目设置子组件 PorjectSet.vue。

其中要写的就是一个项目的各个输入而已。但需要考虑的是，这个子组件要默认显示项目的旧参数内容，也就是说要父组件把这个信息传递给子组件才能展示。

所以父组件给子传递这个project所有信息的时候这么写：

(:project是子组件的接收用变量名，"project"是父组件的变量值)

所以接收部分这么写：（上方直接使用{{}}展示来测试）

结果如下：

看来这旧数据已经成功传递给子组件ProjectSet.vue中了。接下来就是弄输入框来展示并修改的功能了，代码如下：

然后我们再优化一下样式展示，毕竟以后会有很多字段，所以要注重想爱样式：

可复制代码如下：

<template>    <div class="input-wrap">        <span class="label">项目名字：</span>        <el-input          v-model="name"          placeholder="请输入项目名称"          class="short-input"        ></el-input>      </div></template><script>    export default {        name: "ProjectSet",        props:["project"],        computed: {            name: {              get() {                return this.project.name; // 从prop获取初始值              },            }          }    }</script><style scoped>.input-wrap {  display: flex;  align-items: center;}.label {  margin-right: 12px;  min-width: 80px;}.short-input {  width: 300px;}</style>

然后看效果：

接下来就是如果用户修改了其中的名字内容，要怎么自动更新呢？

子组件可以监控变量的变化，然后把最新的值传递给父组件，父组件接收到新值后，触发一个请求去后台更新数据库。整个过程虽然看起来麻烦，其实一点也不简单.... 但起码用户交互是很舒服的，不用去点回车也不用去点保存按钮了~

代码如下，子组件修改如下：（get方法用来获取，set方法用来监控更新）

此刻，父组件中这么写：handleNameUpdate就是更新会调用的方法名

这个方法中，我们第一个要做的就是更新父组件的变量project的name的值，这样当你修改子组件的输入框时候，就会看到父组件的项目名也跟着变了起来，怎么样，体验感是不是直接拉满？

但是这只是表面的改动，数据库要想更新，那就必须弄个更新接口了~

这么写吧：用了一个post请求

然后是django的urls.py中：

views.py：直接字典更新方案

效果如下，修改后，即便刷新或者重新进入这个页面，都会看到修改成功了哦~

本节到此结束，欢迎追更