vuex案例 豆瓣介面

jsonp使用方法：

豆瓣介面位址支援jsonp但是不支援cors。

注意：

靜態資源 douban-static.zip

完整案例 douban-vuex.zip

import vue from

'vue'
import store from
'./store'
import router from
'./router'
vue.config.productiontip =
false
newvue()
.$mount
()

// 路由相關功能

import vue from
'vue'
import vuerouter from
'vue-router'
vue.
use(vuerouter)
const router =
newvuerouter()
export
default router

// 路由相關功能

import vue from
'vue'
import vuerouter from
'vue-router'
vue.
use(vuerouter)
const router =
newvuerouter()
export
default router

在src/router.js中：

// 路由規則

routes:[,
,,,]

class

="my-footer"
>
>
>
:to=
"">
class
="iconfont icon-remen"
>
span
>
>
正在熱映p
>
router-link
>
li>
>
:to=
"">
class
="iconfont icon-dianying"
>
span
>
>
即將上映p
>
router-link
>
li>
>
:to=
"">
class
="iconfont icon-top"
>
span
>
>
top250p
>
router-link
>
li>
ul>
div>
在src/store.js中：
第一步：申明資料，根據頁面需要的資料進行申明。
state:

mutations:

setlistpagedata

(state, payload)

},第三步：獲取資料的方法

actions:)}

第四步：呼叫獲取資料的方法

methods:

created()

computed:

豆瓣評分：}p

>

>

v-for

="(item,i) in item.genres"

:key

="i"

class

="tag"

>

}span

>

p>

div>

a>

li>

ul>

在src/store.js中：

第一步：路由規則

router-link :to=

state:

,

mutations:

約定資料格式
setitempagedata
(state, payload)
},

actions:)})}}

第五步：在元件使用資料

computed:

,

created()

,

methods:

豆瓣評分：}p

>

>

產地：}p

>

>

v-for

="(item,i) in item.genres"

:key

="i"

class

="tag"

>

}span

>

p>

>

}p>

div>

div>

處理：空資料報錯問題

="item" v-if=

"item"

>+item.images.large" alt="">

豆瓣評分：}

產地：}}

} ```

處理：空資料報錯問題

="item" v-if=

"item"

>

豆瓣api介面

獲取正在熱映的電影 訪問引數 start 資料的開始項 count 單頁條數 city 城市 獲取電影top250 訪問引數 start 資料的開始項 count 單頁條數 獲取即將上映電影 訪問引數 start 資料的開始項 count 單頁條數 電影搜尋 訪問引數 start 資料的開始項 co...

vuex使用案例（下）

使用computed計算 hello hello vuex h1 h5 store.commit jia button store.commit jian button p div template import from vuex export default 方法二 需要引入外部 mapstat...

豆瓣電影資料抓取案例

1 位址 豆瓣電影 排行榜 劇情 2 目標 電影名稱 電影評分1 request url 基準url位址 https 2 query string 查詢引數 抓取的查詢引數如下 type 13 電影型別 interval id 100 90action start 0 每次載入電影的起始索引值 0 ...