页面渲染过程(渲染和不渲染的区别图片对比)

发布日期:2025-01-28 23:59:59     手机:https://m.xinb2b.cn/yule/news66526.html    违规举报
核心提示:昨天的文章已经将后台数据查询出来,前端拿到数据之后应该将数据渲染到页面上,那么如何通过异步请求获取数据呢?大家用得最多的是ajax,ajax的话是jq里面的,但是由于是vue项目,引入一个jq,那就有点太重了! 所以vue里面用jq的话实在

页面渲染过程(渲染和不渲染的区别图片对比)

昨天的文章已经将后台数据查询出来,前端拿到数据之后应该将数据渲染到页面上,那么如何通过异步请求获取数据呢?大家用得最多的是ajax,ajax的话是jq里面的,但是由于是vue项目,引入一个jq,那就有点太重了!

所以vue里面用jq的话实在是太奢侈浪费了,那么vue里面的异步请求有一个组件叫axios,其实这个语法看起来也差不多,请看下面的事例代码。

axios有两种请求方式最常见,一种是get,一种是post,那么分别的写法是什么样子的呢?下面是get请求

下面是post请求:

注意,POST请求传参,不需要像GET请求那样定义一个对象,在对象的params参数中传参。post()方法的第二个参数对象,就是将来要传递的参数

对于axios,不可能每个页面都加载一次,现在进行一下全局配置:这样就可以直接引用http了

说明一下:http.js中导入了config的配置,还记得吗?

http.js对axios进行了全局配置:baseURL=config.api,即
http://local.leyou.com/api。因此以后所有用axios发起的请求,都会以这个地址作为前缀。通过Vue.property.$http = axios,将axios赋值给了 Vue原型中的$http。这样以后所有的Vue实例都可以访问到$http,也就是访问到了axios了。

说太多无用来把测试吧,将这个axios引用到品牌模块中,看是否能发起请求

返回了结果:就是存在品牌表里面的,拿出来渲染就可以了

刚才其实只是测试是不是通了,但是没有携带任何参数,这是不对的,对于页面来说,你得告诉他当前第几页,搜索关键字是什么,是什么排序的,这些都要搞清楚,所以,分析起来还需要这些参数:

page:当前页,int rows:每页大小,int sortBy:排序字段,String desc:是否为降序,boolean key:搜索关键词,String

有了这些参数,后台取出来以后可以相应地进行查询,返回数据

同时将数组的值取出来,赋值给vuetity的tabel组件的数组,分页数据赋值给每一行,这个交给这个框架了,不用你操心的

看一下效果:

好了,数据就这样请求出来了,下面我们来看一下搜索和排序等功能开发,咱们下一章见!

 
 
本文地址:https://xinb2b.cn/yule/news66526.html,转载请注明出处。

推荐图文
推荐娱乐运动
网站首页  |  关于我们  |  联系方式  |  使用协议  |  版权隐私  |  网站地图  |  违规举报  |  蜀ICP备18010318号-4  |  百度地图  | 
Processed in 0.251 second(s), 72 queries, Memory 0.51 M