谷粒商城 (十五) --------- 商品服务 API 品牌管理 ① 逆向工程生成前后端代码与前端效果优化

拼搏现实的明天。 2024-04-07 13:48 31阅读 0赞

#### 目录 ####

*  一、逆向工程生成前后端代码
 *  二、前端效果优化

--------------------

## 一、逆向工程生成前后端代码 ##

**新增菜单**

![在这里插入图片描述][6a2595c26e6c4d3f876858b8077573bb.png]

**查看表结构**

![在这里插入图片描述][4f75f2ce1d3946c791447997ef84df89.png]

**使用人人开源的代码生成器生成代码**

注意：这里表要全选

![在这里插入图片描述][5084f723b29e4cb5b0a960627e387fde.png]  
**后端代码全部粘贴进去，前端代码将下面两个文件粘贴到前端代码下**

![在这里插入图片描述][e767a05ac6854c739bd9c71755e4357b.png]

![在这里插入图片描述][98ef76d68ac54e95acaf17c5bd1fdb4c.png]

**由于我们还没有涉及到权限问题，这里将权限管理函数始终返回true**

![在这里插入图片描述][ff54d6d8e19945829c7d474d781b896a.png]  
**页面效果如图**

![在这里插入图片描述][8e6ddf1ccf204d44acc5f2742497ec0f.png]

## 二、前端效果优化 ##

**显示状态上多余的字段删除**

![在这里插入图片描述][6645696366c04d44a6e664431de7d4e5.png]

**显示状态通过开关调控**

![在这里插入图片描述][f91e7799216d4e3e91d2a6e54c9d1cd5.png]

添加框同样也是用开关显示

![在这里插入图片描述][98492ffb8a37462e8462f46cc5dffeaf.png]  
开关绑定 change 事件

![在这里插入图片描述][68490c7d21e74537889a133ea9b20732.png]  
![在这里插入图片描述][bdb2fda4da0c4ebf93583c376acd5917.png]

关于 updateBrandStatus 方法：

![在这里插入图片描述][4c48c8e36b7a46748e1261570e362723.png]  
即获取新的数据发送请求更新数据库中内容，后台对应的就是这个方法。

![在这里插入图片描述][dec508f5c7e24d53917cb7000466a44b.png]  
效果如图

![在这里插入图片描述][5babf9379c8840ec9e7e6dd25446c64b.png]  
数据库信息：

![在这里插入图片描述][0135d4a85bc64f5793ec70c720a6b5c0.png]

**设置新增表单宽度**

![在这里插入图片描述][afc010d19d194759a7660a53890cc7f7.png]

[6a2595c26e6c4d3f876858b8077573bb.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/3d876347c2ce4d14b72e8aed9a335322.png
[4f75f2ce1d3946c791447997ef84df89.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/ce7b4655f6774957920db8373251f174.png
[5084f723b29e4cb5b0a960627e387fde.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/51c96d229af54f53a1426235cc7ea470.png
[e767a05ac6854c739bd9c71755e4357b.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/6517fd4923754d3597694343aa725c61.png
[98ef76d68ac54e95acaf17c5bd1fdb4c.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/9ef38f529e034479a1c33cecfc5e8d93.png
[ff54d6d8e19945829c7d474d781b896a.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/b66f63af98bd4a50a22d25c491b91e41.png
[8e6ddf1ccf204d44acc5f2742497ec0f.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/18e9f755a10549bd9e25f9dd5c19b1d2.png
[6645696366c04d44a6e664431de7d4e5.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/dab95fbbd8d64c5eb7319739789b1dfd.png
[f91e7799216d4e3e91d2a6e54c9d1cd5.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/19946a7f781c456c8b4edd6a5528470d.png
[98492ffb8a37462e8462f46cc5dffeaf.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/280792c6be644b44837851647a9549d4.png
[68490c7d21e74537889a133ea9b20732.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/536e26b0d5964968b1e4e343a11f95ae.png
[bdb2fda4da0c4ebf93583c376acd5917.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/5d5851be9bf14a908ae3fac2cca042a6.png
[4c48c8e36b7a46748e1261570e362723.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/9c0d503c31414043b7d41ab38a389b19.png
[dec508f5c7e24d53917cb7000466a44b.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/aea9990c645a4a8fa32286901ba391db.png
[5babf9379c8840ec9e7e6dd25446c64b.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/328c88af67494a9d9ddb534533a78501.png
[0135d4a85bc64f5793ec70c720a6b5c0.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/a7e569f3ec5642a688b6980c5a888e5e.png
[afc010d19d194759a7660a53890cc7f7.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/bf67e6ed6f76499c8b596076db08fd7e.png