|使用Vue编写品牌管理的前端页面

文章图片

文章图片

文章图片

文章图片

今天是刘小爱自学Java的第145天。
感谢你的观看，谢谢你。
学习计划安排如下：

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

一、前端组件模板看下刘小爱商城的后台管理系统：
我们前几天实现了商品分类管理，当然在笔记中只说明了商品分类的查询，至于增删改实现思路是差不多的。
现在实现商品品牌管理这个业务。
打算从前端页面到后台代码完整地实现一遍：
1创建我的品牌管理
学习资料中是提供的有前端代码的，本来是不用自己写的，但学了几天的vue ，总得用下吧。
所以自行创建一个我的品牌管理，从0开始写一个前端页面出来：
在菜单页面menu.js中，我们可以自行添加一个菜单栏，也就是上图中我的品牌管理。
其对应的映射路径为MyBrand ，也就是说需要编写一个MyBrand的Vue组件。
同时在router中添加路由。
2vuetify框架的使用
使用vuetify框架找到想要的vue组件模板，找到服务端分页和排序。
我们可以通过右上角的图标查看对应的代码
下面显示的为其对应的样式，因为太长，我不便截图，所以只截图了一部分。
确认好这个模板后，剩下的就是复制粘贴了，但是也要看得明白，从而修改数据：
比如模板中使用的例子是甜点dessert ，而我们项目中使用的是品牌brand 。
二、前端组件代码编写前面指定了：我的品牌管理这个选项栏对应的是MyBrand.vue这个文件。
所以创建MyBrand.vue文件，并将对应的vue组件模板复制到该文件中即可。
1Vue组件模板
template：模板的意思，这是一个组件模板。
v-data-table：表格的数据来源？通过v-bind指令取出对应的属性headers和brands 。
①headers对应的是表格的表头信息。
②brands对应的是表格每行的数据。
③pagination对应的也就是分页相关的数据
④loading对应的是页面是否在加载中，这个后面我们可以根据响应的数据做一个判断：