使用vue2搭建豆瓣电影

gecko23 发布于2019-08-20 16:29 / 2303人阅读

摘要：地址项目主页展示项目功能正在热映即将上映电影详情页和搜索页展示地区切换加载更多搜索滚动加载使用脚手架搭建，按照步骤执行即可库使用的是直接引用使用路由使用的是默认的模式，后续打算更改为模式请求豆瓣在中配置代理项目中使用了以下正

github地址

https://github.com/bhan614/do...

项目主页展示

项目功能

正在热映、即将上映、top250、电影详情页和搜索页展示

地区切换

加载更多

搜索

滚动加载

Vue-cli

使用vue-cli脚手架搭建，按照步骤执行即可

npm install -g vue-cli
vue init webpack doubanMovie
cd doubanMovie
npm install
npm run dev

Element-ui

ui库使用的是element-ui,直接引用使用

import Element from "element-ui"
Vue.use(Element)

Vue-router2

路由使用的是默认的hash模式，后续打算更改为html5 history模式

请求豆瓣api

在proxyTable中配置代理

proxyTable: {
    "/api": {
        target: "http://api.douban.com/v2",
        changeOrigin: true,
        pathRewrite: {
            "^/api": ""
        }
    }
}

项目中使用了以下api

/v2/movie/in_theaters 正在上映的电影

/v2/movie/coming_soon 即将上映的电影

/v2/movie/subject/:id 单个电影信息

/v2/movie/search?q={text} 电影搜索

vue-resource

这里使用vue-resource进行数据交互、不过更推荐使用axios

Vuex

vuex用来管理全局状态，用起来很方便，可以查看vuex文档进行学习

混合云服务器托管豆瓣电影 python豆瓣电影豆瓣电影api接口豆瓣电影数据分析可视化

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/82946.html

Vue2.0开发仿豆瓣电影WebApp

摘要：从之前黄轶老师的高仿外卖开始接触过这个滚动库，感觉体验感很好，用起来也比较顺手，所以在后来的项目联系中就一直在使用。前言虽然在此之前已经有类似的仿豆瓣电影的webapp,但或是开发的有些简洁功能不太完善，或是体验感觉得可以再完善下，所以自己摸索着对比豆瓣和豆瓣电影两款app做了一下，初步满足了自己的想法，经过几次完善基本不会出现bug，如果发现存在问题请告诉我修改，谢谢！ 2017...

gplane 2019-08-20 18:14 评论0 收藏0
Vue2.0简易案例

摘要：由于众所周知的原因，谷歌字体只能过墙后才能被正常加载，而中的原生使用了谷歌字体，在这个案例中改为使用。代码存在，国内访问速度没那么快，初次加载较慢请耐心等待。如果项目对你有所帮助，不妨一下，你的支持是我前进的最大动力。效果图： showImg(https://segmentfault.com/img/remote/1460000008172654?w=303&h=545); show...

sourcenode 2019-08-20 13:52 评论0 收藏0
Vue2.0简易案例

摘要：由于众所周知的原因，谷歌字体只能过墙后才能被正常加载，而中的原生使用了谷歌字体，在这个案例中改为使用。代码存在，国内访问速度没那么快，初次加载较慢请耐心等待。如果项目对你有所帮助，不妨一下，你的支持是我前进的最大动力。效果图： showImg(https://segmentfault.com/img/remote/1460000008172654?w=303&h=545); show...

crossea 2019-08-05 17:52 评论0 收藏0
Vue 电影信息影评（豆瓣，猫眼）

摘要：界面如下图电影详情展示此功能是提供电影详情的界面，包括演员上映时间导员剧情简介宣传视频宣传视频由于豆瓣官方的限制无法获取，所以只有正在热映板块从猫眼获取的电影信息才有。 Vue电影信息影评网站此网站是我的毕业设计，题目是基于HTML5的电影信息汇总弄网站，由于最近在看Vue.js,所以就想用Vue.js来构建一个前端网站，这里code就不大篇幅的写了，主要讲一下网站的功能和所用到的技...

hzc 2019-08-02 16:02 评论0 收藏0
Vue 电影信息影评（豆瓣，猫眼）

摘要：界面如下图电影详情展示此功能是提供电影详情的界面，包括演员上映时间导员剧情简介宣传视频宣传视频由于豆瓣官方的限制无法获取，所以只有正在热映板块从猫眼获取的电影信息才有。 Vue电影信息影评网站此网站是我的毕业设计，题目是基于HTML5的电影信息汇总弄网站，由于最近在看Vue.js,所以就想用Vue.js来构建一个前端网站，这里code就不大篇幅的写了，主要讲一下网站的功能和所用到的技...

Nekron 2019-08-22 18:06 评论0 收藏0