vue douban
1.0.0
vue2、vue-router、vuex、axios、Douban API、Element UI フレームワークに基づくプロジェクト
# install dependencies
npm install
# serve with hot reload at localhost:8080
npm run dev
# build for production with minification
npm run build
# build for production and view the bundle analyzer report
npm run build --report動作の詳細については、vue-loader のガイドとドキュメントを確認してください。
├── App . vue
├── api
│ ├── base . js
│ └── movie . js
├── assets
│ └── logo . png
├── components
├── main . js
├── router
│ └── index . js
├── store
│ ├── index . js
│ └── movies
│ ├── module . js
│ └── type . js
└── views
├── Home . vue
├── NavMenu . vue
└── movie
├── MovieDetail . vue
└── MovieList . vue ムービー API:
/v2/movie/search?q={text}映画検索 API (未実装)/v2/movie/in_theaters現在上映中の映画;/v2/movie/coming_soon映画;/v2/movie/subject/:id単一のムービーエントリ情報。Douban API の詳細については、Douban API 公式 Web サイトをご覧ください。
Douban API のクロスドメイン構成: /config/index.jsでプロキシを構成します。
dev: {
env : require ( './dev.env' ) ,
port : 8880 ,
assetsSubDirectory : 'static' ,
assetsPublicPath : '/' ,
proxyTable : {
'/api' : {
target : 'http://api.douban.com/v2' ,
changeOrigin : true ,
pathRewrite : {
'^/api' : ''
}
}
}
} proxyTable属性で、プロキシするターゲット アドレスに target 属性を設定します。 http://api.douban.com/v2に設定すると、アプリケーションで/api/movie/in_theatersを呼び出してhttp://api.douban.com/v2/movie/in_theatersにアクセスできるようになり、クロスドメインの問題の問題。
vue-cli のクロスドメイン設定の詳細については、公式 Web サイトのドキュメントを参照してください。
