|使用Vue编写品牌管理的前端页面( 二 )
- 如果响应成功 ， 将其置为false ， 不再显示加载中 。
- 如果响应失败 ， 将其置为true ， 继续显示加载中 。
上述只是提供了一个模板 ， 但具体是什么数据呢需要我们在data()方法中说清楚：
①brands：即模板中对应的数据信息 ， 命名要一一对应 ， 也就是表格中每一行对应的数据 。
②headers：即表示表格对应的表头数据 。
当然brands中目前都是写的假数据 ， 真的数据应该是从数据库中查询了再渲染到这儿的 。
3页面组件优化
最终页面如下图：
其中还有搜索框的使用 ， 并且其输入的内容和key这个值绑定 。
以及修改品牌和删除品牌这两个按钮 ， 没时间来说明了额 。
三、发送Ajax请求1发送请求
将其封装成一个loadData()方法
①发送get请求：调用$http.get()方法即可 。
②get请求参数：
第一个参数为发送请求的路径 。
params即为请求参数 ， 分页数据来自于模板中的pagination这个数据 。
③接受请求
这不用多说 ， 箭头函数接受后台响应的数据 。
2生命周期钩子和监控
这个在第137天和第139天就有讲到 ， 所以还很有印象：
①created钩子函数
即vue实例一创建 ， 就会调用loadData方法 ， 发送请求
②监控
根据业务需求：因为是分页显示的 ， 并且还自带排序功能 ， 也就是说我们每次点击下一页 ， 或者点击排序的时候 ， 就会发送请求 。
若是以前 ， 我们可以在对应的标签处添加一个点击事件 ，
但是现在都是使用的模板 ， 所以加一个监控即可 ， 一旦pagination属性发生了变化就再次发送请求 。
最后【|使用Vue编写品牌管理的前端页面】我是刘小爱 ， 一个白天上班晚上学习的95后沪漂 ， 不为其它 ， 只为学会自律做好自己 ， 也愿我的每日打卡能给你带来勇气 ， 欢迎点赞关注和评论 。
推荐阅读
- 航天器|中国可重复使用航天器刚发射成功，美媒就来乱弹琴：或是太空武器
- 航天器|热烈祝贺！我国可重复使用试验航天器成功着陆！
- 精彩球坛|适合追剧党使用的蓝牙耳机有哪些推荐啊?日常听歌看剧必备神器！
- 航天器|任务完成了都没一张照片，我国“可重复使用航天器”为何这么神秘
- 苹果|网友使用iOS13.7后真实感受：真后悔购买
- 柠檬少年|一加8pro的使用开箱及初体验
- Java|马化腾登顶中国首富，微信、QQ却都免费使用，腾讯到底咋赚钱的？
- 卫星|以前用的“卫星锅”，它到底能看到些什么？怪不得要禁止使用
- 光一样的少年|必须试试，受够了电脑弹窗广告的你
- 超能力|人类与生俱来的五种超能力，经常被使用，却一直被我们忽视！