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

需要搞定俩个功能：

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

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

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

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

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

2. 添加项目功能

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

蓝湖代码转vue2.0+element-ui

将静态 Vue 页面(index.vue)改造为动态页面(Custom.vue)；稿源仅限 index.vue、其引用的 CSS 与资源路径，禁止参考仓库内其他文件。Invoke when user wants to transform a static Vue page into a dynamic data-driven page with Element UI components.

下载

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

<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中的修改：

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

<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>

上图中，添加成功后会直接返回最新的全部项目列表，直接再次赋值给projects即可。

效果如下：

添加后：

这里再改一下显示效果：