后台管理系统7

SPU模块

静态页面

首先将spu模块分为两部分，利用两个el-card进行分割

接下来在第一个el-card中添加之前声明的全局组件三级联动组件。由于在Spu中也会利用到三级联动组件收集categoryid的功能以及可操作性的变化，因此顺便把三级联动组件收集数据的逻辑以及可操作性的变化也写好。

接下来搭建第二个el-card
首先在最上面添加一个el-button随后展示el-table，在表格里一共有四列，因此写四个el-table-column，将data清掉（静态没有数据），对table进行简单修改，然后再最下方添加分页器el-pagination，并进行简单修改。最终代码如下所示。

页面效果如下所示

SPU列表展示

首先书写接口，这里有个注意点，在查阅接口的时候，只要求有page与limit，但是实际上category3Id同样需要，为了接收category3Id参数，在这里我们利用params来接收参数，同时由于KV一致，书写一遍即可。

接下来尝试发送请求，由常识可知，当三级组件都选择完毕，此时应该发请求。

结果如下所示

可以成功请求数据。接下来存储请求到的数据

然后动态渲染table，具体代码以及页面效果如下所示


接下来处理分页器，当点击不同页数或者选择不同的展示数目，返回不同数据。

SPU管理内容切换

当选择完三级联动，界面第二个el-card会展示SPU列表，但是当点击添加SPU或者修改SPU时应该更换界面，当点击查看SKU列表时也该更换界面，其实就是进行内容切换，三个元素进行切换。为了使代码更加清晰，将第二第三个界面定义成两个子组件，分别为SkuForm与SpuForm,同时声明一个变量scene用来确定展示哪个界面。

SpuForm静态界面

当点击添加SPU与修改SPU时，第二个界面进行展示，因此先给这两个按钮绑定点击事件。


接下来书写SpuForm静态界面
静态页面的代码如下所示，利用el-form进行布局。
值得注意的是照片墙以及选择框。

静态布局效果如下所示

SpuForm请求业务

在上一步的静态页面中，一共布局了两个选择框，这两个选择框都需要请求数据。有了数据才能进行选择。除此之外，SPU图片以及SPU信息也需要获取。因此需要书写接口。在书写接口之前先处理一个小问题，当用户点击添加SPU与修改SPU进入第二个界面时，此时用户点击取消应该回到第一个界面，也就是说当子组件的取消被点击时，应该修改父组件的scene为0。因此利用自定义事件传数据。

在书写接口之前还应考虑什么时候发送数据请求，常识可知，当用户点击修改SPU时，就应该发起请求，因此我们不能在子组件mounted中发起请求，因为如果在mounted中发起请求，父组件只会控制子组件的v-show，并没有卸载子组件，因此子组件不会重新发起请求。针对这个问题，可以在父组件给子组件打一个ref标签，此时父组件就可以获取子组件的内容，也可以调用子组件的方法。此时再给子组件定义一个请求数据的方法，让父组件调用就可以了。具体流程如下所示。