一、Jsonp抓取数据

用 npm 安装 jsonp

npm install jsonp

创建 jsonp.js

import originJsonp from 'jsonp'

export default function jsonp(url, data, option) {
url += (url.indexOf('?') < ? '?' : '&') + param(data) return new Promise((resolve, reject) => {
originJsonp(url, option, (err, data) => {
if (!err) {
resolve(data)
} else {
reject(err)
}
})
})
} 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() : ''
}

在 api 创建 config.js

export const commonParams = {
//Query string parameters
  //所抓取网页api参数
   g_tk: ,
inCharset: 'utf-8',
outCharset: 'utf-8',
notice: ,
format: 'jsonp'
} export const options = {
param: 'jsonpCallback'
} export const ERR_OK =

在 api的data.js 里导入 jsonp

import jsonp from 'common/js/jsonp'
import{commonParams , options} from './config' export function getData(){
const url = 'api数据的地址链接' const data = Object.assign({},commonParams,{
//Query string parameters
     platform: 'h5',
uin: ,
needNewCode:
}) return jsonp(url, data, options)
}

在 data.vue 页面的 script 引用 getData()

<script type="text/ecmascript-6">
import { getData} from "api/data"
import { ERR_OK } from "api/config" export default {
created() {
this._getData()
},
methods: {
_getData() {
getData().then((res) => {
if (res.code === ERR_OK) {
console.log(res.data.slider)
}
})
}
}
</script>

二、Axios接口代理抓取数据

用 npm 安装 axios 以及 express

npm install axios
npm install express

在 build / webpack.dev.conf.js 导入 axios 以及 express

const axios = require('axios')
const express = require('express')
const app = express()
const apiRoutes = express.Router()
app.use('/api', apiRoutes);
const devWebpackConfig = merge(baseWebpackConfig, { 
 module: {
  rules: utils.styleLoaders({ sourceMap: config.dev.cssSourceMap, usePostCSS: true })
 },
 // cheap-module-eval-source-map is faster for development
 devtool: config.dev.devtool,
// these devServer options should be customized in /config/index.js
devServer: {
// 在这里添加一个before方法
before(apiRoutes) {
apiRoutes.get('/api/getDiscList', function (req, res) {
const url = 'api数据的地址链接';
axios.get(url, {
headers: {
referer: '配置api地址referer',
host: '配置api地址host'
},
params: req.query
}).then((response) => {
//将数据返回给前端
      res.json(response.data)
}).catch((e) => {
console.log(e);
})
});
}

在 data.js 导入 axios

import axios from 'axios'

export function getDataList(){
const url = '/api/getDataList' const data = Object.assign({},commonParams,{
//Query string parameters
//所抓取网页api参数
platform: 'yqq',
hostUin: ,
sin: ,
ein: ,
sortId: ,
needNewCode: ,
categoryId: ,
rnd: Math.random(),
format: 'json'
}) return axios.get(url, {
params: data
}).then((res) => {
return Promise.resolve(res.data)
})
}

在 data.vue 页面的 script 引用 getDataList()

<script type="text/ecmascript-6">
import { getDataList } from "api/recommend"
import { ERR_OK } from "api/config" export default {
created() {
this._getDataList()
},
methods: {
_getDataList(){
getDataList().then((res) => {
if(res.code === ERR_OK){
console.log(res.data.list)
}
})
}

</script>

Vue--获取数据的更多相关文章

  1. Vue 获取数据、事件对象、todolist

    vue中在方法里获取data里的msg:this.msg 在微信小程序里this.data.msg 改变data里的msg:this.msg="改变后的msg" 可以通过list. ...

  2. vue 获取数据联动下拉框select ,并解决报Duplicate value found in v-for="...": "". Use track-by="$index" 错误

    公司项目中遇到一个问题,联动下拉框,并且数据是使用vue-resource从后台获取的,格式不利于输出联动下拉框,联动下拉框是第一个下拉框输出一个数组里每一项json的一个text值,从而第二下拉框输 ...

  3. Vue获取数据渲染完成事件

    主要代码是这两坨 this.nextTick(function(){ alert('数据已经更新') }); this.$nextTick(function(){ alert('v-for渲染已经完成 ...

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

    在VUE开发时,数据可以使用jquery和vue-resource来获取数据.在获取数据时,一定需要给一个数据初始值. 看下例: <script type="text/javascri ...

  5. vue ajax获取数据的时候,如何保证传递参数的安全或者说如何保护api的安全

    https://segmentfault.com/q/1010000005618139 vue ajax获取数据的时候,如何保证传递参数的安全或者说如何保护api的安全 点击提交,发送请求.但是api ...

  6. Vue获取dom和数据监听

    Vue获取dom对象 在js和jq中我们都能获取dom对象例如 // 获取id=1的div标签 <div id=d1>dom对象</div> // js语法 let ele = ...

  7. vue模拟后端获取数据——json-server与express

    转载自: https://blog.csdn.net/weixin_39728230/article/details/80293892 https://blog.csdn.net/lxkll/arti ...

  8. 使用Vue.js和Axios从第三方API获取数据 — SitePoint

    更多的往往不是,建立你的JavaScript应用程序时,你会想把数据从远程源或消耗一个[ API ](https:/ /恩.维基百科.org /维基/ application_programming_ ...

  9. VUE通过索引值获取数据不渲染的问题

    问题:vue里面当通过索引值获取数据时,ajax数据成功返回,但是在火狐下不渲染 解决:

  10. 在Vue中使用了Swiper ,动态从后台获取数据的之后,swiper滑动失效??

    在Vue中使用了Swiper ,动态从后台获取数据的之后,swiper滑动失效?? 是因为swiper提前初始化了,那时候数据还没有完全出来.这里有两种解决办法 1. 使用vue提供的$nextTic ...

随机推荐

  1. 在CentOS 6.3中安装与配置cmake

    安装说明安装环境:CentOS-6.3安装方式:源码编译安装软件:cmake-2.8.10.2.tar.gz下载地址:http://www.cmake.org/cmake/resources/soft ...

  2. 案例:Redis在唯品会的大规模应用

    目前在唯品会主要负责redis/hbase的运维和开发支持工作,也参与工具开发工作,本文是在Redis中国用户组给大家分享redis cluster的生产实践. 分享大纲 本次分享内容如下: 1.生产 ...

  3. VS调试dll详细过程记录

                            前言:                           在我们写的程序中有时候调用dll,并且需要跟踪dll中的函数,此时直接调试调用dll的工程是 ...

  4. EDK II之DXE Core的事件管理

    本文简单介绍一下UEFI中的事件管理: UEFI是不支持多进程的,但是UEFI支持多事件分发机制.UEFI只支持时钟中断,并基于时钟中断实现事件分发.类似于OS中基于时钟中断来实现基于时间片的多任务调 ...

  5. scrapy 自定义图片路径保存,并存到数据库中

    scrapy中有个自带的pipeline工具,ImagesPipeline,可以专门用来储存图片到本地. 但默认储存地址无法配置,所以我们需要写一个自己的pipeline用于储存图片. 先分析一下我们 ...

  6. php 加密 解密 密码传输

    php 加密 解密 密码传输 <?php /* * * 使用按位异或运算 加密 * $str 明文 * $salt 盐 * */ public static function xor_encry ...

  7. Python3 格式化字符串

    Python3 格式化字符串 在Python 3.6之前,有两种将Python表达式嵌入到字符串文本中进行格式化的主要方法:%-formatting和str.format() 一.%-formatti ...

  8. python简说(十六)第三方模块安装

    安装第三模块 1.pip install xxx pip问题 1.提示没有pip命令的, 把python的安装目录. 安装目录下面的scripts目录加入到环境变量里面 2.Unknown or un ...

  9. UVa 12099 The Bookcase - 动态规划

    题目大意 给定一些书,每个书有一个高度和宽度,然后将它们放到一个三层的书架里(要求每一层都不为空).定义书架的大小为每层最大的高度和 乘 每层宽度和的最大值.求最小的书架大小. 显然动态规划(直觉,没 ...

  10. Python3基础 iter+next 进行迭代时超出了范围 产生StopIteration异常

             Python : 3.7.0          OS : Ubuntu 18.04.1 LTS         IDE : PyCharm 2018.2.4       Conda ...