В проекте vue междоменный jsonp получает рекомендацию домашней страницы музыки qq.

внешний интерфейс Vue.js

В свободное время, чтобы иметь больше возможностей data vue и es6, я научился и сделал проект мобильного веб-приложения vue. В проекте также было много проблем.

Далее поговорим о том, как выполнить это требование, а затем поговорим о проблемах, с которыми я столкнулся, чтобы исправить ошибки.

Первый шаг, затем представил проект vuejsonp, А такжеjsonpупаковка.

использоватьnpmВведение, введите:

npm install jsonp --save

package.json文件中查看是否有此依赖。 Как показано ниже:


Если в красном поле отображается содержимое, установка прошла успешно, и следующим шагом будет инкапсуляция:

import originJSONP from 'jsonp'   //引入jsonp


//进行封装并export
export default function jsonp(url,data,option) {
    url += (url.indexOf('?')<0? '?' : '&')+param(data)

	return new Promise((resolve,reject)=>{
		originJSONP(url,option,(err,data)=>{
			if(!err){
				resolve(data)
			}else{
				reject(err)
			}
		})
	})
}

//对data进行处理，并encodeURIComponent()进行转码。
function param(data) {
	let url = ''
	for(var k in data) {
		  let value = data[k] !== undefined? data[k] : ''
		  url += '&' + k + '=' + encodeURIComponent(value)
	}
	return url ? url.substring(1) : ''
}

Упаковка завершенаjsonp.jsПосле файла переходим ко второму шагу:

Настройте необходимое в файле проектаapi. Первыйapi, по имениconfig.js.

export const commonParams = {             //配置一些公共参数
	g_tk:5381,
	format: 'json',
	inCharset: 'utf-8',
	outCharset:'utf-8',
	notice: 0,
}

export const options = {                      
	param: 'jsonpCallback'
}

export const ERR_OK = 0                  //设置属性

Затем создайте одинrecommend.jsдокумент:

import jsonp from 'common/js/jsonp'                    //引入jsonp
import {commonParams,options} from './config'        //引入config.js

export function getRecommend(){
      const  url = 'https://c.y.qq.com/musichall/fcgi-bin/fcg_yqqhomepagerecommend.fcg'

      const data = Object.assign({},commonParams,{         //es6的assign将commonParams和
      	uin: 0,                                            //之后的对象合并为一起，放在
      	platform:'h5',                                     //前面的{}之中。
      	needNewCode: 1,
      })

      return jsonp(url,data,options)
}

Последние данные данных:


Затем последний шаг — запросить данные в файле .vue, необходимом для проекта.

  import {getRecommend} from 'api/recommend'       //引入recommend.js中的getRecomend方法
  import {ERR_OK} from 'api/config'                //引入recommend.js中的getRecomend方法
  import Slider from 'base/slider/slider'

  export default {
   data() {
     return{
     recommends : []
   }
 },
  created(){
        this._getRecommend()
    },
    methods:{
       _getRecommend() {                              
        getRecommend().then((res)=>{
        if(res.code === ERR_OK){
        this.recommends = res.data.slider
      }
      })
     },

  }

}

Если браузер возвращает содержимое, показанное на следующей картинке на странице, это означает успех.





Уведомление:Яма, обнаруженная в проекте

1: При запросе данных возникает ситуация, показанная на следующем снимке экрана:


После долгих поисков причины я, наконец, обнаружил, что это былоencodeURIComponent()Что-то здесь пошло не так. Будьте осторожны, не пишите

、url += '&' + k + '=' + encodeURIComponent(value)、

Возможно, такой синтаксис, как es6, не поддерживается. должно быть написано как

for(var k in data) {
		  let value = data[k] !== undefined? data[k] : ''
		  url += '&' + k + '=' + encodeURIComponent(value)
	}

Второй момент: об адресе

 const  url = 'https://c.y.qq.com/musichall/fcgi-bin/fcg_yqqhomepagerecommend.fcg'

нельзя записать как

 const  url = 'https://m.y.qq.com/musichall/fcgi-bin/fcg_yqqhomepagerecommend.fcg'

Ну, чтобы обобщить намного привлекательнее. После запроса данных то есть некоторые основные операции друзей DOM.


Категории