1.1 vue 2.0 jsonp 데이터 가 져 오기

jsonp 소개
1. 원리:

1. js 를 쓸 때 우 리 는 script 태그 에 우리 가 필요 로 하 는 js 파일 을 도입 할 것 이다. 자신의 사이트 에 있 는 것 도 있 고 다른 사이트 에 있 는 것 도 있다. 어느 사이트 의 js 파일 이 든 도입 하면 실행 할 수 있 고 동원 전략의 영향 을 받 지 않 는 다.

2. jspon 은 도 메 인 을 뛰 어 넘 을 수 있 습 니 다. ajax 요청 이 아 닙 니 다. 동적 으로 script 탭 을 만 들 고 같은 소스 정책 의 영향 을 받 습 니 다.src 가 요청 한 서버 주 소 를 가리 키 고 있 습 니 다.

1. 인자 url 요청?callback = abc.

서버 에서 형식 abc (json) 를 되 돌려 줍 니 다.

전단 에서 abc 방법 을 정의 하여 데 이 터 를 받 아들 일 수 있 습 니 다.function(data){ console.log(data) }

설치 하 다.
https://githuub.com/webmodules/jsonp pack. json 설치

"dependencies": {
    "vue": "^2.3.3",
    "vue-router": "^2.5.3",
    "jsonp": "0.2.1"
  }

npm install

jsonp.js

import originJsonp from 'jsonp'

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)
      }
    })
  })
}

export 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) : ''
}

데이터 가 져 오기
1. config. js 상수 설정

export const commonParam = {
      g_tk:1928093487,
      inCharset:'unf-8',
      outCharset:'unf-8',
      notice : 0,
      format:'jsonp'
}
export const options = {
  param:'jsonpCallback'
}
export const ERR_OK = 0

2. recommend. js 패 키 징 네트워크 요청 방법

import jsonp from './jsonp'
//   {jsonp}  jsonp.js      export default
import {commonParam,options} from './config'

export function getRecommend() {
  const url = 'http://c.y.qq.com/musichall/fcgi-bin/fcg_yqqhomepagerecommend.fcg';
  const data = Object.assign({},commonParam,{
     platform:'h5',
     uin:0,
    needNewCode:1
 });
  return jsonp(url,data,options)
}

3. recommend. vue UI 인터페이스 사용

네트워크 api 도입. import {recommend} from '.. / api / recommend'

2. script 모듈 export default {}

3. 갈고리 함수 created () {}

4. 방법 methods: {}


  <span class="hljs-reserved">import</span> {getRecommend} from <span class="hljs-string">'../api/recommend'</span>
  <span class="hljs-reserved">import</span> {ERR_OK} from <span class="hljs-string">'../api/config'</span>
  <span class="hljs-reserved">export</span> <span class="hljs-reserved">default</span>{
    created(){
      <span class="hljs-keyword">this</span>._getRecommend();
    },
    <span class="hljs-attribute">methods</span>:{
      _getRecommend(){
        getRecommend<span class="hljs-function"><span class="hljs-params">()</span>.<span class="hljs-title">then</span><span class="hljs-params">((res) => {
          alert(res)
          <span class="hljs-keyword">if</span>(res.code === <span class="hljs-number">0</span>){
            <span class="hljs-built_in">console</span>.log(res.data.slider);
          }
        })</span>
      }
    }
  }
</<span class="hljs-title">script</span>></span></code></pre> 
  <p>4.    </p> 
  <pre class="prettyprint"><code class="language-json hljs ">{
    "<span class="hljs-attribute">code</span>": <span class="hljs-value"><span class="hljs-number">0</span></span>,
    "<span class="hljs-attribute">data</span>": <span class="hljs-value">{
        "<span class="hljs-attribute">slider</span>": <span class="hljs-value">[{
            "<span class="hljs-attribute">linkUrl</span>": <span class="hljs-value"><span class="hljs-string">"https://y.qq.com/m/digitalbum/gold/index.html?_video=true&id=2266275&g_f=shoujijiaodian"</span></span>,
            "<span class="hljs-attribute">picUrl</span>": <span class="hljs-value"><span class="hljs-string">"http://y.gtimg.cn/music/photo_new/T003R720x288M000000wMNQD0zAYKG.jpg"</span></span>,
            "<span class="hljs-attribute">id</span>": <span class="hljs-value"><span class="hljs-number">12224</span>
        </span>}, {
            "<span class="hljs-attribute">linkUrl</span>": <span class="hljs-value"><span class="hljs-string">"http://y.qq.com/w/album.html?albummid=003AkVSw2YUInp"</span></span>,
            "<span class="hljs-attribute">picUrl</span>": <span class="hljs-value"><span class="hljs-string">"http://y.gtimg.cn/music/photo_new/T003R720x288M000002nKgjF4L99Qi.jpg"</span></span>,
            "<span class="hljs-attribute">id</span>": <span class="hljs-value"><span class="hljs-number">12326</span>
        </span>}, {
            "<span class="hljs-attribute">linkUrl</span>": <span class="hljs-value"><span class="hljs-string">"https://y.qq.com/m/digitalbum/gold/index.html?_video=true&id=2265691&g_f=shoujijiaodian"</span></span>,
            "<span class="hljs-attribute">picUrl</span>": <span class="hljs-value"><span class="hljs-string">"http://y.gtimg.cn/music/photo_new/T003R720x288M000002G6UE51pf1N7.jpg"</span></span>,
            "<span class="hljs-attribute">id</span>": <span class="hljs-value"><span class="hljs-number">12221</span>
        </span>}, {
            "<span class="hljs-attribute">linkUrl</span>": <span class="hljs-value"><span class="hljs-string">"http://y.qq.com/w/album.html?albummid=000m9Hj70u6KSe"</span></span>,
            "<span class="hljs-attribute">picUrl</span>": <span class="hljs-value"><span class="hljs-string">"http://y.gtimg.cn/music/photo_new/T003R720x288M000003pHBKP3WzOXv.jpg"</span></span>,
            "<span class="hljs-attribute">id</span>": <span class="hljs-value"><span class="hljs-number">12328</span>
        </span>}, {
            "<span class="hljs-attribute">linkUrl</span>": <span class="hljs-value"><span class="hljs-string">"https://y.qq.com/m/digitalbum/gold/index.html?_video=true&id=2266195&g_f=shoujijiaodian"</span></span>,
            "<span class="hljs-attribute">picUrl</span>": <span class="hljs-value"><span class="hljs-string">"http://y.gtimg.cn/music/photo_new/T003R720x288M000004Pb7Y20zfUCO.jpg"</span></span>,
            "<span class="hljs-attribute">id</span>": <span class="hljs-value"><span class="hljs-number">12218</span>
        </span>}]</span>,
        "<span class="hljs-attribute">radioList</span>": <span class="hljs-value">[{
            "<span class="hljs-attribute">picUrl</span>": <span class="hljs-value"><span class="hljs-string">"http://y.gtimg.cn/music/photo/radio/track_radio_307_13_1.jpg"</span></span>,
            "<span class="hljs-attribute">Ftitle</span>": <span class="hljs-value"><span class="hljs-string">"       "</span></span>,
            "<span class="hljs-attribute">radioid</span>": <span class="hljs-value"><span class="hljs-number">307</span>
        </span>}, {
            "<span class="hljs-attribute">picUrl</span>": <span class="hljs-value"><span class="hljs-string">"http://y.gtimg.cn/music/photo/radio/track_radio_199_13_1.jpg"</span></span>,
            "<span class="hljs-attribute">Ftitle</span>": <span class="hljs-value"><span class="hljs-string">"  "</span></span>,
            "<span class="hljs-attribute">radioid</span>": <span class="hljs-value"><span class="hljs-number">199</span>
        </span>}]</span>,
        "<span class="hljs-attribute">songList</span>": <span class="hljs-value">[]
    </span>}
</span>}</code></pre> 
 </div> 
</div>
                            </div>
                        </div>
                    </div>
                    <!--PC WAP    -->
                    <div id="SOHUCS" sid="1279435190678077440"></div>
                    <script type="text/javascript" src="/views/front/js/chanyan.js">

이 가능 하 다, ~ 할 수 있다,...

자바 공장 모드
3213213333332132
java 추상 공장

nginx 주파수 제한 + python 테스트
ronin47
nginx 주파수 python

자바 스 레 드 와 스 레 드 탱크 사용
dyy_gusi
ThreadPool thread Runnable timer

Linux
171815164
linux

Tomcat JDBC Connection Pool
g21121
Connection

코드 를 두 드 리 는 생각
영야 - 극광
java 수필 감상

jvm 명령 집합
프로그래머 는 어떻게 만 들 었 습 니까?
jvm 명령 집합

Oracle 문자 집합 보기 조회 와 Oracle 문자 집합 설정 수정
aijuans
oracle

이 내용에 흥미가 있습니까?

현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:

Vue.js + Google Places: 여러 입력 필드 자동 완성

경우에 따라 두 개 이상의 입력 필드에 장소 자동 완성 기능을 추가할 수 있습니다. 일반적인 예는 두 위치 사이의 이동 거리를 찾는 것입니다. 이 경우 사용자는 자동 완성 기능이 활성화된 두 개의 입력 필드를 갖게 ...

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.

1.1 vue 2.0 jsonp 데이터 가 져 오기

좋은 웹페이지 즐겨찾기