【微服务】145：使用Vue实现商品品牌管理

Myth丶恋晨 2022-12-04 01:27 140阅读 0赞

### 目录 ###

*   *   *  
     *  一、前端组件模板
     *  二、前端组件代码编写
     *  三、发送Ajax请求
     *  最后

###  ###

今天是刘小爱自学Java的第145天。

感谢你的观看，谢谢你。

![format_png][]

学习计划安排如下：

*  打算从前端页面到后台服务器代码完整地写一遍，但显然我高估了自己的实力，几个小时的时间根本不够用。
 *  并且因为教程和vue现在最新的组件用法不一样，我本来是打算自己完全独立使用最新的用法的，但是太耗时间了，最终还是跟着教程走了。
 *  想要求质量，就得花费大量时间；想要保持日更，质量上就会差很多，目前还没办法解决这个问题。
 *  页面做出来了也没时间详讲，排版的时间都没有了，嘛就这样吧，不管了。

## 一、前端组件模板 ##

看下刘小爱商城的后台管理系统：

![format_png 1][]

我们前几天实现了商品分类管理，当然在笔记中只说明了商品分类的查询，至于增删改实现思路是差不多的。

现在实现商品品牌管理这个业务。

打算从前端页面到后台代码完整地实现一遍：

**1创建我的品牌管理**

学习资料中是提供的有前端代码的，本来是不用自己写的，但学了几天的vue，总得用下吧。

所以自行创建一个我的品牌管理，从0开始写一个前端页面出来：

![format_png 2][]

在菜单页面menu.js中，我们可以自行添加一个菜单栏，也就是上图中我的品牌管理。

其对应的映射路径为MyBrand，也就是说需要编写一个MyBrand的Vue组件。

同时在router中添加路由。

**2vuetify框架的使用**

使用vuetify框架找到想要的vue组件模板，找到服务端分页和排序。

![format_png 3][]

我们可以通过右上角的图标查看对应的代码

下面显示的为其对应的样式，因为太长，我不便截图，所以只截图了一部分。

确认好这个模板后，剩下的就是复制粘贴了，但是也要看得明白，从而修改数据：

比如模板中使用的例子是甜点dessert，而我们项目中使用的是品牌brand。

## 二、前端组件代码编写 ##

前面指定了：我的品牌管理这个选项栏对应的是MyBrand.vue这个文件。

所以创建MyBrand.vue文件，并将对应的vue组件模板复制到该文件中即可。

**1Vue组件模板**

![format_png 4][]

template：模板的意思，这是一个组件模板。

v-data-table：表格的数据来源？通过v-bind指令取出对应的属性headers和brands。

①headers对应的是表格的表头信息。

②brands对应的是表格每行的数据。

③pagination对应的也就是分页相关的数据

④loading对应的是页面是否在加载中，这个后面我们可以根据响应的数据做一个判断：

*  如果响应成功，将其置为false，不再显示加载中。
 *  如果响应失败，将其置为true，继续显示加载中。

**2Vue组件数据填充**

上述只是提供了一个模板，但具体是什么数据呢需要我们在data()方法中说清楚：

![format_png 5][]

①brands：即模板中对应的数据信息，命名要一一对应，也就是表格中每一行对应的数据。

②headers：即表示表格对应的表头数据。

当然brands中目前都是写的假数据，真的数据应该是从数据库中查询了再渲染到这儿的。

**3页面组件优化**

最终页面如下图：

![format_png 6][]

其中还有搜索框的使用，并且其输入的内容和key这个值绑定。

以及修改品牌和删除品牌这两个按钮，没时间来说明了额。

## 三、发送Ajax请求 ##

**1发送请求**

将其封装成一个loadData()方法

![format_png 7][]

**①发送get请求**：调用$http.get()方法即可。

**②get请求参数**：

第一个参数为发送请求的路径。

params即为请求参数，分页数据来自于模板中的pagination这个数据。

**③接受请求**

这不用多说，箭头函数接受后台响应的数据。

**2生命周期钩子和监控**

这个在第137天和第139天就有讲到，所以还很有印象：

![format_png 8][]

**①created钩子函数**

即vue实例一创建，就会调用loadData方法，发送请求

**②监控**

根据业务需求：因为是分页显示的，并且还自带排序功能，也就是说我们每次点击下一页，或者点击排序的时候，就会发送请求。

若是以前，我们可以在对应的标签处添加一个点击事件，

但是现在都是使用的模板，所以加一个监控即可，一旦pagination属性发生了变化就再次发送请求。

## 最后 ##

我是刘小爱，一个白天上班晚上学习的95后沪漂，不为其它，只为学会自律做好自己，也愿我的每日打卡能给你带来勇气，欢迎点赞关注和评论。

[format_png]: /images/20221123/4962b671a0bc46a4b4c7826f6fb14b61.png
[format_png 1]: /images/20221123/971f85b1666746a89fa6c7535085dcc0.png
[format_png 2]: /images/20221123/9e81956659dc4c37bc24e11a518b451e.png
[format_png 3]: /images/20221123/da4528d71f6a42be97888b5a99dbca03.png
[format_png 4]: /images/20221123/d756f563d57e47a1b0d8c413b1faec9e.png
[format_png 5]: /images/20221123/f3414535ea3c40bfbbf687e088dbf04b.png
[format_png 6]: /images/20221123/c9b20c0bb40249f39acddeb539b92b61.png
[format_png 7]: /images/20221123/13eb5c49211e41c6bf3cb0e5f71c09ba.png
[format_png 8]: /images/20221123/e36b0c3b1c414b8da41df676617788ec.png