今天是刘小爱自学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对应的是页面是否在加载中,这个后面我们可以根据响应的数据做一个判断:
2Vue组件数据填充
上述只是提供了一个模板,但具体是什么数据呢需要我们在data()方法中说清楚:
①brands:即模板中对应的数据信息,命名要一一对应,也就是表格中每一行对应的数据。
②headers:即表示表格对应的表头数据。
当然brands中目前都是写的假数据,真的数据应该是从数据库中查询了再渲染到这儿的。
3页面组件优化
最终页面如下图:
其中还有搜索框的使用,并且其输入的内容和key这个值绑定。
以及修改品牌和删除品牌这两个按钮,没时间来说明了额。
1发送请求
将其封装成一个loadData()方法
①发送get请求:调用$http.get()方法即可。
②get请求参数:
第一个参数为发送请求的路径。
params即为请求参数,分页数据来自于模板中的pagination这个数据。
③接受请求
这不用多说,箭头函数接受后台响应的数据。
2生命周期钩子和监控
这个在第137天和第139天就有讲到,所以还很有印象:
①created钩子函数
即vue实例一创建,就会调用loadData方法,发送请求
②监控
根据业务需求:因为是分页显示的,并且还自带排序功能,也就是说我们每次点击下一页,或者点击排序的时候,就会发送请求。
若是以前,我们可以在对应的标签处添加一个点击事件,
但是现在都是使用的模板,所以加一个监控即可,一旦pagination属性发生了变化就再次发送请求。
行有不得,反求诸己,我是刘小爱。
一个白天上班晚上学习的95后沪漂,不为其它,只为学会自律做好自己,也愿我的每日打卡能给你带来勇气,欢迎点赞关注和评论。
联系客服