【deepseek用例生成平台-12】项目前端

我去热饭

发布于 2025-03-13 21:58:04

13200

代码可运行

文章被收录于专栏：测试开发干货测试开发干货

运行总次数：0

代码可运行

前端需要修改的文件是LeftMenu.vue：

需要搞定俩个功能：

1. 首先是自动获取项目列表函数：

script中的改动如下，data声明变量，methods存放获取函数，mounted自动调用函数。

然后在上面中运用这个变量：projects

如此，便可以动态展示所有的项目了。

2. 添加项目功能

先设计好名称提示框：建议手敲

<el-dialog v-model="dialog_visible" title="增加项目" style="width:40%">    <el-form v-model="new_project">        <el-form-item label="项目名称">            <el-input v-model="new_project.name"></el-input>        </el-form-item>    </el-form>    <template #footer>        <div class="dialog-footer">            <el-button @click="add_project">创建</el-button>        </div>    </template></el-dialog>

上图中，我们通过变量dialog_visible来搞定提示框是否显示。再设置了一个字典变量new_project，用来存放项目的各个字段，虽然现在只有一个name，但保不齐之后增加很多。然后一个输入框，一个创建按钮，创建函数：add_project

新增按钮就是用来展示这个对话框的：

接下来是script中的修改：

<script>    import axios from 'axios'    export default {        name: "LeftMenu",        data(){            return{                projects:[],                dialog_visible:false,                new_project:{name:''},            }        },        methods:{            get_projects(){                axios.get('http://localhost:8000/get_projects/').then(res=>{                    this.projects = res.data                })            },            add_project(){                axios.get('http://localhost:8000/add_project/',{                    params:{                        name:this.new_project.name                    }                }).then(res=>{                    this.projects = res.data                    this.new_project = {name:""}                    this.dialog_visible = false                })            }        },        mounted(){            this.get_projects()        }    }</script>