node-vue-mongodb全栈项目-创建后台管理界面-分类编辑(五)

254 阅读1分钟

在分类列表页面创建分类表格

admin->src->views/CategoriesList.vue中的表格里添加操作按钮:

image.png

image.png

点击编辑按钮后,跳转到对应路径:

image.png

配置路径对应路由关系:

image.png

修改一下新建分类的页面组件,使编辑和新建共用一个页面组件:

image.png 注意: 此时会出现一个问题:当点击编辑跳转页面后在点击左侧新建分类菜单,虽然路径边了,但由于默认组件复用,页面并不会刷新,此时仍然显示“编辑分类”,解决方法:

image.png

完成当“编辑分类”时,页面展示该条分类信息

image.png

编写服务端接口-当“编辑分类”时获取该条分类信息

image.png

后台管理界面请求服务端接口

image.png

后台管理界面 完成编辑分类后 点击按钮 提交数据请求

image.png

编写服务端 编辑分类 提交接口

serve->router->admin->index.js

image.png 注意:服务端提供和后台管理请求接口一定要对应起来。

在浏览器编辑分类并提交,一切正常。