vue使用jsonp获取数据,开发热卖推荐组件

1、安装jsonp

cnpm install --save jsonp

2、jsonp API

jsonp( url, opts, fn )

3、封装jsonp方法

src/assets/js/jsonp.js

import jsonp from ‘jsonp‘;

/*data格式案例
{
    id:1,
    name:‘cyy‘
}
*/
const parseParam=param=>{
    /*将data格式转换为
    [
        [id,1],
        [name,cyy]
    ]
    */
    let arr=[];
    for(const key in param){
        arr.push([key,param[key]]);
    }
    /*先将data格式转换为
    [
        id=1,
        name=cyy
    ]
    */
   /*再将data格式转换为
    id=1&name=cyy
    */
    return arr.map(value=>value.join("=")).join(‘&‘);
}

export default (url,data,options)=>{
    // 如果存在?,则url后面加&;如果不存在则加?
    url+=((url.indexOf(‘?‘)<0) ? ‘?‘ : ‘&‘ ) + parseParam(data);

    return new Promise((resolve,reject)=>{

        //jsonp用法,三个参数:jsonp(url,options,callback)
        jsonp(url,options,(err,data)=>{
            if(err){
                reject(err);
            }else{
                resolve(data);
            }
        })
    })
}

4、调用jsonp方法

src/api/recommend.js

import jsonp from ‘assets/js/jsonp‘;

//获取热门推荐数据
export const getHomeRecommend=(page=1,psize=20)=>{
    const url=‘https://ju.taobao.com/json/tg/ajaxGetItemsV2.json‘;
    const params={
        page,
        psize,
        type:0,
        frontCatId:‘‘//type和frontCatId是根据给定的淘宝接口来添加的
    }

    //调用jsonp获取数据
    return jsonp(url,params,{
        param:‘callback‘
    }).then(res=>{
        if(res.code===‘200‘){
            return res;
        }

        throw new Error(‘没有成功获取到数据‘);
    }).catch(err=>{
        if(err){
            console.log(err);
        }

    });

}

5、通过jsonp获取热门推荐的数据,并渲染到页面上

src/pages/home/recommend.vue

<template>
    <div class="recommend">
        <h3 class="recommend-title">热卖推荐</h3>
        <div class="loading-container" v-if="!recommends.length">
            <me-loading inline />
        </div>
        <ul class="recommend-list">
            <li class="recommend-item" v-for="(item,index) in recommends" :key="index">
                <router-link class="recommend-link" :to="{name:‘home-product‘,params:{id:item.baseinfo.itemId}}">
                    <p class="recommend-pic"><img class="recommend-img" :src="item.baseinfo.picUrl"></p>
                    <p class="recommend-name">{{item.name.shortName}}</p>
                    <p class="recommend-oriPrice"><del>¥{{item.price.origPrice}}</del></p>
                    <p class="recommend-info">
                        <span class="recommend-price">¥<strong class="recommend-price-num">{{item.price.actPrice}}</strong></span>
                        <span class="recommend-count">{{item.remind.soldCount}}件已售</span>
                    </p>
                </router-link>
            </li>
        </ul>
    </div>
</template>

<script>
import {getHomeRecommend} from ‘api/recommend‘;
import MeLoading from ‘components/loading‘;

export default {
    name:"Recommend",
    data(){
        return {
           recommends:[],
           curPage:1,
           totalPage:1
        }
    },
    components:{
        MeLoading
    },
    created(){
        this.getRecommends();
    },
    methods:{
        getRecommends(){
            if(this.curPage>this.totalPage) return Promise.reject(new Error(‘没有更多了‘));

            return getHomeRecommend(this.curPage).then(data=>{
                return new Promise(resolve=>{

                    if(data){
                        console.log(data);

                        this.curPage++;
                        this.totalPage=data.totalPage;

                        // concat合并数组内容,每次获取的数据都追加进来
                        this.recommends=this.recommends.concat(data.itemList);

                        this.$emit("loaded",this.recommends);//热门推荐区域加载完毕后触发消息
                        resolve();
                    }
                })
            });
        }
    }
}
</script>

<style lang="scss" scoped>

    .recommend{
        position:relative;
        width:100%;
        padding:10px 0;
        font-size:14px;
        text-align:center;
        background:#fff;

        &:before,
        &:after{
            content:"";
            display:block;
            position:absolute;
            top:14%;
            width:40%;
            height:1px;
            background:#ddd;
        }

        &:before{
            left:0;
        }

        &:after{
            right:0;
        }
    }
    .recommend-list{
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-wrap:wrap;
    }
    .recommend-title{
        margin-bottom:8px;
    }
    .recommend-item{
        width:49%;
        background:#fff;
        box-shadow:0 1px 1px 0 rgba(0,0,0,0.12);
        margin-bottom:8px;
    }
    .recommend-link{
        display:block;
    }
    .recommend-pic{
        position:relative;
        width:100%;
        padding-top:100%;// 可以实现高度与宽度一致
        margin-bottom:5px;
    }
    .recommend-img{
        width:100%;
        position:absolute;
        top:0;
        left:0;
        height:100%;
    }
    .recommend-name{
        height:40px;
        padding:0 5px;
        margin-bottom:8px;
        line-height:1.5;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        white-space: normal !important;
        word-wrap: break-word;
        text-align:left;

    }
    .recommend-oriPrice{
        padding:0 5px;
        margin-bottom:8px;
        color:#ccc;
        text-align:left;
    }
    .recommend-info{
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding:0 5px;
        margin-bottom:8px;
    }
    .recommend-price{
        color:#e61414;

        &-num{
            font-size:20px;
        }
    }
    .recommend-count{
        color:#999;
    }
    .loading-container{
        padding-top:80px;
    }

</style>

6、首页中使用recommend组件

src/pages/home/index.vue

<template>
    <div class="home">
        <scrollbar :data="recommends">
            <slider />
            <home-nav />
            <!-- 热门推荐加载完成后更新滚动条 -->
            <recommend @loaded="updateScroll" />
        </scrollbar>
        <!-- 该页面自己的子路由 -->
        <router-view></router-view>
    </div>

</template>

<script>
import Slider from ‘components/slider‘;
import Scrollbar from ‘components/scroll‘;
import HomeNav from ‘./nav‘;
import Recommend from ‘./recommend‘;

export default {
    name:"Home",
    components:{
        Slider,
        Scrollbar,
        HomeNav,
        Recommend
    },
    data(){
        return{
            recommends:[]
        }
    },
    methods:{
        updateScroll(recommends){
            this.recommends=recommends;
        }
    }
}
</script>

<style scoped>
    .home{
        width:100%;
        height:100%;
    }
</style>

7、修改scroll组件,在热门推荐加载之后更新滚动条

src/components/scroll/index.vue

<template>
    <swiper class="swiper" :options="swiperOption" ref="swiper">
    <swiper-slide>
        <!-- 所有内容放在插槽里 -->
        <slot></slot>
    </swiper-slide>
    <div class="swiper-scrollbar" slot="scrollbar"></div>
  </swiper>
</template>

<script>
  import { Swiper, SwiperSlide } from ‘vue-awesome-swiper‘;
  import ‘swiper/css/swiper.css‘;

  export default {
    name: ‘Scrollbar‘,
    title: ‘Scrollbar‘,
    components: {
      Swiper,
      SwiperSlide
    },
    data() {
      return {
        swiperOption: {
          scrollbar: {
            el: ‘.swiper-scrollbar‘,
            hide: true
          },
          direction:‘vertical‘,
          slidesPerView:‘auto‘,
          freeMode:true,
          setWrapperSize:true
        }
      }
    },
    props:{
      recommends:{
        type:[Array,Object],
        default(){
          return [];
        }
      }
    },
    watch:{//当recommends值发生改变时
      recommends(){
        this.$refs.swiper && this.$refs.swiper.$swiper.update();//更新滚动条长度
      }
    }
  }
</script>

<style lang="scss" scoped>
    .swiper-container{
        width:100%;
        height:100%;
        overflow:hidden;
    }
    .swiper-wrapper{
        height:auto;
    }
    .swiper-slide{
        height:auto;
    }
</style>

效果图

原文地址:https://www.cnblogs.com/chenyingying0/p/12641872.html

时间: 2024-11-04 15:25:39

vue使用jsonp获取数据,开发热卖推荐组件的相关文章

十、Vue Router 进阶-获取数据

获取数据的两种方式 导航完成之后获取数据:先完成导航,然后在接下来的组件生命周期钩子created中获取数据.在数据获取期间展示一个loading加载中的状态提示. 导航完成之前获取:导航完成前,在路由进入的守卫中获取数据,在数据获取成功后执行导航. 导航完成之后获取数据(可展示loading) 在组件的created钩子中获取数据.在获取数据期间展示一个loading状态,可以在不同视图间展示不同的loading状态. <template> <div class="post&

vue+vuex+axios从后台获取数据存入vuex,组件之间共享数据

在vue项目中组件间相互传值或者后台获取的数据需要供多个组件使用的情况很多的话,有必要考虑引入vuex来管理这些凌乱的状态,今天这边博文用来记录这一整个的过程,后台api接口是使用webpack-server模拟的接口,这个前面的文章中有提到,需要的可以去翻阅. 整个的流程是在组件的created中提交dispatch,然后通过action调用一个封装好的axios然后再触发mutation来提交状态改变state中的数据,然后在组件的计算属性中获取state的数据并渲染在页面上 首先新需要在项

Ajax 跨域请求 jsonp获取json数据

遇到Ajax的跨域请求出问题 找了中解决办法如下: 参考内容:http://justcoding.iteye.com/blog/1366102 由于受到浏览器的限制,该方法不允许跨域通信.如果尝试从不同的域请求数据,会出现安全错误.如果能控制数 据驻留的远程服务器并且每个请求都前往同一域,就可以避免这些安全错误.但是,如果仅停留在自己的服务器上,Web 应用程序还有什么用处呢?如果需要从多个第三方服务器收集数据时,又该怎么办? 理解同源策略 同源策略阻止从一个域上加载的脚本获取或操作另一个域上的

vue 中使用 AJAX获取数据的方法

在VUE开发时,数据可以使用jquery和vue-resource来获取数据.在获取数据时,一定需要给一个数据初始值. 看下例: <script type="text/javascript"> new Vue({ el:'#app', data:{data:""}, created:function(){ var url="json.jsp"; var _self=this; $.get(url,function(data){ _se

jQuery $.ajax跨域-JSONP获取JSON数据(转载)

Asynchronous JavaScript and XML (Ajax ) 是驱动新一代 Web 站点(流行术语为 Web 2.0 站点)的关键技术.Ajax 允许在不干扰 Web 应用程序的显示和行为的情况下在后台进行数据检索.使用 XMLHttpRequest 函数获取数据,它是一种 API,允许客户端 JavaScript 通过 HTTP 连接到远程服务器.Ajax 也是许多 mashup 的驱动力,它可将来自多个地方的内容集成为单一 Web 应用程序. 不过,由于受到浏览器的限制,该

AJAX 跨域请求的解决办法:使用 JSONP获取JSON数据

由于受到浏览器的限制,ajax不允许跨域通信.如果尝试从不同的域请求数据,会出现安全错误.如果能控制数据驻留的远程服务器并且每个请求都前往同一域,就可以避免这些安全错误.但是,如果仅停留在自己的服务器上,Web 应用程序还有什么用处呢?如果需要从多个第三方服务器收集数据时,又该怎么办? 理解同源策略限制 同源策略阻止从一个域上加载的脚本获取或操作另一个域上的文档属性.也就是说,受到请求的 URL 的域必须与当前 Web 页面的域相同.这意味着浏览器隔离来自不同源的内容,以防止它们之间的操作.这个

第五章 “我要点爆”微信小程序云开发实例之从云端获取数据制作首页

下面我们来实现从云端获取数据,完成首页世界页面index的制作,首页分为4个数据列表导航页面,页面具体内容如下: 推荐:为用户推荐最新的点爆信息,它包含文本点爆内容和语音点爆内容. 文爆:筛选出文字点爆内容,只显示文字点爆内容. 音爆:筛选出语音点爆内容,只显示语音点爆内容. 爆榜:将点爆内容取出前20名进入排行. [实现页面内数据列表的滚动和导航切换后,每个导航下数据列表都在顶部] 由于我们使用的头部导航栏是通过数据绑定在同一页面进行切换,所以当一个页面内数据列表向下滚动后,切换导航后页面的s

Python开发实战教程(8)-向网页提交获取数据

来这里找志同道合的小伙伴!↑↑↑ Python应用现在如火如荼,应用范围很广.因其效率高开发迅速的优势,快速进入编程语言排行榜前几名.本系列文章致力于可以全面系统的介绍Python语言开发知识和相关知识总结.希望大家能够快速入门并学习Python这门语言. 本次课程是在掌握python基础之上进行的.基础没有学习的话建议先查看文章学习基础目录:Python开发实战系列教程-链接汇总,持续更新.进行学习. 最近几天感冒中,四肢乏力以及最近比较忙导致,更新较慢.还请见谅. 概述 很多时候我们需要给网

李洪强iOS开发-网络新闻获取数据思路回顾

李洪强iOS开发-网络新闻获取数据思路回顾 01 创建一个继承自AFHTTPSessionManager的工具类:LHQNetworkTool 用来发送网络请求获取数据  1.1 定义类方法返回单例对象 1.2 单例的实现,设置baseURL,设置超时时长等 02 创建一个分类, 传入一个类的参数返回一个数组,返回当前类的所有属性 用在模型中处理模型数据 03 创建图片轮播模型(model)类发送请求获取轮播图片的数据  3.1 定义属性: 标题,图片 定义两个类方法: (1)传入一个字典的参数