国外好玩的网站,建筑人才兼职网,地推平台,青岛建站程序今天是刘小爱自学Java的第145天。感谢你的观看#xff0c;谢谢你。学习计划安排如下#xff1a;打算从前端页面到后台服务器代码完整地写一遍#xff0c;但显然我高估了自己的实力#xff0c;几个小时的时间根本不够用。并且因为教程和vue现在最新的组件用法不一样#xf…今天是刘小爱自学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对应的是页面是否在加载中这个后面我们可以根据响应的数据做一个判断如果响应成功将其置为false不再显示加载中。如果响应失败将其置为true继续显示加载中。2Vue组件数据填充上述只是提供了一个模板但具体是什么数据呢需要我们在data()方法中说清楚①brands即模板中对应的数据信息命名要一一对应也就是表格中每一行对应的数据。②headers即表示表格对应的表头数据。当然brands中目前都是写的假数据真的数据应该是从数据库中查询了再渲染到这儿的。3页面组件优化最终页面如下图其中还有搜索框的使用并且其输入的内容和key这个值绑定。以及修改品牌和删除品牌这两个按钮没时间来说明了额。三、发送Ajax请求1发送请求将其封装成一个loadData()方法①发送get请求调用$http.get()方法即可。②get请求参数第一个参数为发送请求的路径。params即为请求参数分页数据来自于模板中的pagination这个数据。③接受请求这不用多说箭头函数接受后台响应的数据。2生命周期钩子和监控这个在第137天和第139天就有讲到所以还很有印象①created钩子函数即vue实例一创建就会调用loadData方法发送请求②监控根据业务需求因为是分页显示的并且还自带排序功能也就是说我们每次点击下一页或者点击排序的时候就会发送请求。若是以前我们可以在对应的标签处添加一个点击事件但是现在都是使用的模板所以加一个监控即可一旦pagination属性发生了变化就再次发送请求。最后我是刘小爱一个白天上班晚上学习的95后沪漂不为其它只为学会自律做好自己也愿我的每日打卡能给你带来勇气欢迎点赞关注和评论。
