【deepseek用例生成平台-12】项目前端-手机软件-PHP中文网

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

星夢妙者

发布： 2025-04-23 21:16:01

原创

877人浏览过

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

需要搞定俩个功能：

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

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

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

立即学习“前端免费学习笔记（深入）”；

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

2. 添加项目功能

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

DeepSeek App

DeepSeek官方推出的AI对话助手App

查看详情

代码语言：javascript代码运行次数：0运行复制

<code class="javascript"><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></code>

登录后复制

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

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

接下来是script中的修改：

代码语言：javascript代码运行次数：0运行复制

<code class="javascript"><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></code>

登录后复制