一、逆向工程生成前后端代码
新增菜单
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/1b5268a3437faacfd2f8beec3db025e1.png)
查看表结构
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/88ac8cee2d3e83e24354acb0b08ec1b9.png)
使用人人开源的代码生成器生成代码
注意:这里表要全选
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/05841b890420f46d7dc6d79b8ceed5c9.png)
后端代码全部粘贴进去,前端代码将下面两个文件粘贴到前端代码下
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/eb9dc9f3d2fec05c8e92a66082548745.png)
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/f0ef20dbc784068c95eff4d05d2d32a6.png)
由于我们还没有涉及到权限问题,这里将权限管理函数始终返回true
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/925776084409e0f01df697f0b278979d.png)
页面效果如图
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/a06a4c323d075cb7439ae0d5dfc0e043.png)
二、前端效果优化
显示状态上多余的字段删除
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/68a228e8a6c2af5f72f5b86acfa359fe.png)
显示状态通过开关调控
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/6ee704ca398614aa7e1d65a6c4e1c58c.png)
添加框同样也是用开关显示
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/d8c3768c345cddea0181afd3b995e33d.png)
开关绑定 change 事件
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/0952ca72b31c1ba583c80229706486b9.png)
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/cd0fd9fb62cd2bc83ce9df545dccab87.png)
关于 updateBrandStatus 方法:
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/d0a6d6a369fe4f07922b9ffd3f9a6dc0.png)
即获取新的数据发送请求更新数据库中内容,后台对应的就是这个方法。
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/a78b63caf6cc004bf9650b0bf9acec18.png)
效果如图
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/6a1fc2947bf1d5ab2d5de2fa5b66e7f1.png)
数据库信息:
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/f4bdc36a17f6bca1af76f2f0cbf8415f.png)
设置新增表单宽度
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/8998785bcec8ff87eeac1a83b6bd4dfc.png)