Vue实现仿豆瓣电影

已于 2022-05-26 19:52:38 修改
阅读量3.8k 收藏 24
点赞数 3
文章标签： vue.js
于 2020-06-20 12:10:56 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Y920036515/article/details/106870357
版权

前言

这次用Vue实现豆瓣电影，然后上网上查阅了很多资料，这些东西基本上都加载不出来（原因大概是豆瓣的API接口更新了一下，所以以网的API好像都不能用了），而我又是第一次学Vue别人的拿来看不懂，没办法，自己做了个简版的。

如下图所示。

实现的页面有：

  1. 首页
  2. 详情页
  3. 榜单
  4. 查看评论
  5. 我的页面
  6. 搜索

这里例举首页和详情页的图大家参考。

 

 

项目结构

补充：其中的bottom是底部导航，header是头部样式，spinner是加载动画，star是显示星级评分。

运行方式

先：npm install，安装插件

再：npm run dev   运行

最后：http://localhost:8080/查看

打包的项目

GitHub - ybbgrain/html: html-css-js-----

2022.5.26更新

有些同学没有访问不了GitHub，CSDN我上传了一下资源，也是免费下载的

Vue实现豆瓣电影

图片好像发不了了，被csdn说版权有问题，打个马赛克把，其实都是有的。

ybbgrain
关注
  • 3
    点赞
  • 踩
  • 24
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 3
    评论
基于SpringBoot的仿豆瓣平台【源码分享】
l081499的博客
07-17 222
开发环境: Java 1.8 框架：使用Spring Boot 集成Spring,Spring MVC,MyBatis(前期),Spring Data(后期) 数据库:MySQL 5.6 缓存:Redis 4.0 版本控制:Maven 3.5 页面解析框架:Thymeleaf 负载均衡:Nginx - 端口80 服务器:Tomcat 端口8080和8181(可以使用单个tomcat) PS：音...
仿豆瓣首页【web前端项目】
mars_1_1的博客
10-27 1692
仿豆瓣首页【web前端项目】 下面是我之前做的一个静态页面，特此记录一下： 最需要耐心的是登录区的制作了： 以下是html部分代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title
vue实现豆瓣电影（API调用）
05-25
vue实现豆瓣电影，详情见博客 https://blog.csdn.net/Y920036515/article/details/106870357?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522165347255816781432927601%2522%252C%2522scm%2522%253A%252220140713.130102334.pc%255Fblog.%2522%257D&request_id=165347255816781432927601&biz_id=0&spm=1018.2226.3001.4450
vue框架仿豆瓣模板
08-28
仿豆瓣的vue页面框架，超级好用，良心保证，安心使用。
vue20实现web豆瓣电影
08-10
vue2.0实现web豆瓣电影
douban:一个基于vue的简单仿豆瓣项目
05-02
仿豆瓣APP A Vue.js project 第一次接触vue全家桶系列，使用豆瓣API来当作我的第一个vue单页项目应用。 跨域代理 因为自己还没有购买服务器，所以先使用了webpack提供的代理在本地进行跨域请求，完成跨域请求，完成跨域请求只需要在config/index.js中进行如下设置 proxyTable: { '/api': { target: 'https://api.douban.com/v2/', changeOrigin: true, pathRewrite: { '^/api': '' } } }, 技术栈 项目ui框架使用mint-ui 使用vue-cli+webpack构建项目和打包 使用vue-router、vueX进行路由分发和状
模仿豆瓣电影应用
04-02
一款高仿豆瓣电影的应用源码，应用的功能和界面很类似我们现实使用的豆瓣电影应用差不多，基本实现了一般常用的功能，应用主要是webview+js+重定向请求，还可以实现了自定义各种控件功能，以及滑动算法，数据封装等，大家可以下载看看吧。
Vue3.0实战豆瓣评分项目
10-12
本课程以豆瓣评分小程序为载体，通过整体项目的制作来掌握vue项目的开发流程以及vue3.0新特性在项目实战中的使用技巧，使同学们对于组件化编程思想，代码逻辑复用有更深入的理解，重点理解vue3.0在代码逻辑复用上的优势。
Vue简易案例四（豆瓣电影）
weixin_34234823的博客
06-04 745
1、请求数据接口，数据绑定 2、Vue处理数据（过滤器、计算属性） 3、事件处理@、修饰符 4、监视器watch 5、组件切换（vue-router） 6、过渡效果transtion <!DOCTYPE html> <html> <head> <title>组件切换练习</title> <meta charset...
Vue2.0+vue-router实现简易豆瓣电影webApp
前端超人
12-19 7003
运行项目项目地址：https://github.com/superman66/vue2.x-douban clone项目到本地，进入项目文件夹，安装依赖git clone https://github.com/superman66/vue2.x-douban.git cd vue2.x-douban npm install然后运行npm run dev最后打开浏览器，输入localhost:888
TOP250：仿豆瓣电影排行榜TOP250-Vue
02-09
vue-day11 一个Vue.js项目 构建设置 # 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 有关工作原理的详细说明，请查看的和。
基于vue2.0的一个豆瓣电影App
weixin_30835649的博客
07-11 570
1、搭建项目框架 使用vue-cli 没安装的需要先安装 npm intall -g vue-cli 使用vue-cli生成项目框架 vue init webpack-simple vue-movie 然后一路回车 接着 进入项目目录 cd vue-movie 然后安装项目依赖包 cnpm install 没安装cnpm的先执行这个命令 npm install -g ...
【Vue+DRF生鲜电商】32.商品操作后计数更改，热搜榜关键字功能实现
吾星喵的博客
08-14 812
专题：Vue+Django REST framework前后端分离生鲜电商 Vue+Django REST framework 打造前后端分离的生鲜电商项目（慕课网视频）。 Github地址：https://github.com/xyliurui/DjangoOnlineFreshSupermarket ； Django版本：2.2、djangorestframework：3.9.2。 前端Vu...
Vue2.0 新手完全填坑攻略——从环境搭建到展示豆瓣的电影列表
lijun728的专栏
03-01 1565
什么是 Vue Vue 是一个前端框架，特点是 数据绑定 比如你改变一个输入框 Input 标签的值，会自动同步更新到页面上其他绑定该输入框的组件的值  组件化 页面上小到一个按钮都可以是一个单独的文件.vue，这些小组件直接可以像乐高积木一样通过互相引用而组装起来  Vue2.0 推荐开发环境  Hom
v-for的练习，渲染电影列表（可以实现简单的排序）
z3436的博客
02-15 900
使用v-for来简单的渲染出信息（带排序）
Vue实现仿音乐播放器7-实现音乐榜单效果
BADAO_LIUMANG_QIZHI的博客
12-12 867
效果 实现 实现导航组件 首先在pages目录下新建musiclist目录，然后在其下新建导航组件music_listnav.vue &lt;template lang="html"&gt;   &lt;div class="music-nav"&gt;     &lt;div class="log url hd"&gt;         &lt;h2&gt;音乐榜单&a
vue循环单列表的实现
qq_41973733的博客
04-02 207
做任务清单时，是这么想的，有点想做一个类似于滴答清单的效果，但滑动的具体实现不明，所以暂时没有实现还有就是类似于任务清单一开始只显示任务的大概，点击大概后会显示具体的信息。 类似于： 点击后会显示具体的任务 想着应该用v-show绑定一个值来实现下面任务的显示隐藏，但有一个问题，点击后就会进行全部列表的显示 接着想到了两种方法解决，一种是获取对应的dom元素另外一种就是如果每个列表都有自己对应的判断显示的数据就行； 至于第一种暂时没想到解决方法， 第二种的解决方法如下： 在数据库中添加对应的元素，当循
豆瓣电影页面html代码,Vue.js 仿豆瓣电影DEMO 学习笔记一
weixin_34696006的博客
06-09 2035
豆瓣电影的首页效果movie_1.png豆瓣电影的列表页面movie_2.png豆瓣电影的电影内页面效果movie_3.png参照以上的三个页面，做出豆瓣电影的首页，列表页面以及电影的详细页面。工具版本控制vue @2.8.0webpack @1.13.1搭建初始化环境vue init webpack movie-doucd movie-doucnpm installcnpm run dev启动...
基于vue搭建一个简易版豆瓣
weixin_34112030的博客
03-13 497
前言前段日子业余时看了下vue，想着怎么也得写个实例来加深一下，于是便基于vue构建了一个简易版豆瓣。由于工作中使用的并不是vue框架，对vue的了解也不够深入，这也是本人第一次写技术博文，因此，有纰漏之处还请大家批评指正。项目概述项目地址：github.com/nh0007/vue-…项目简介：本项目主要是基于vue，构建一个简易版豆瓣，实现将读书、电影、音乐、同城活动等内容按不同类型显示的功能...
vue实现豆瓣电影分页
最新发布
05-31
要实现豆瓣电影的分页，可以使用Vue.js框架的组件化思想，将页面拆分成多个组件，包括电影列表组件、分页组件等。 首先，需要在Vue实例中定义一个电影列表数组，用来存储从豆瓣电影API中获取的电影信息。然后，通过一个分页组件来控制每页显示的电影数量和当前页码。 以下是一个简单的代码示例： 1. 定义电影列表数组和分页参数 ```javascript data() { return { movies: [], // 电影列表数组 pageSize: 10, // 每页显示的电影数量 currentPage: 1, // 当前页码 total: 0 // 总电影数量 }; }, ``` 2. 获取电影列表数据 ```javascript methods: { async getMovies() { const start = (this.currentPage - 1) * this.pageSize; const res = await axios.get( `https://api.douban.com/v2/movie/top250?start=${start}&count=${this.pageSize}` ); this.movies = res.data.subjects; this.total = res.data.total; } } ``` 3. 创建电影列表组件 ```html <template> <div> <div v-for="movie in movies" :key="movie.id"> <h3>{{ movie.title }}</h3> <p>{{ movie.rating.average }}</p> <img :src="movie.images.medium" alt=""> </div> </div> </template> ``` 4. 创建分页组件 ```html <template> <div> <button @click="prevPage">上一页</button> <span>{{ currentPage }} / {{ totalPages }}</span> <button @click="nextPage">下一页</button> </div> </template> <script> export default { props: { pageSize: { type: Number, required: true }, currentPage: { type: Number, required: true }, total: { type: Number, required: true } }, computed: { totalPages() { return Math.ceil(this.total / this.pageSize); } }, methods: { prevPage() { if (this.currentPage > 1) { this.$emit("page-change", this.currentPage - 1); } }, nextPage() { if (this.currentPage < this.totalPages) { this.$emit("page-change", this.currentPage + 1); } } } }; </script> ``` 5. 在父组件中使用分页组件和电影列表组件 ```html <template> <div> <movie-list :movies="movies" /> <pagination :pageSize="pageSize" :currentPage="currentPage" :total="total" @page-change="handlePageChange" /> </div> </template> <script> import MovieList from "./MovieList.vue"; import Pagination from "./Pagination.vue"; export default { components: { MovieList, Pagination }, data() { return { movies: [], pageSize: 10, currentPage: 1, total: 0 }; }, methods: { handlePageChange(page) { this.currentPage = page; this.getMovies(); }, async getMovies() { const start = (this.currentPage - 1) * this.pageSize; const res = await axios.get( `https://api.douban.com/v2/movie/top250?start=${start}&count=${this.pageSize}` ); this.movies = res.data.subjects; this.total = res.data.total; } }, mounted() { this.getMovies(); } }; </script> ``` 这样，就可以实现豆瓣电影的分页功能了。注意，上面的代码只是一个简单的示例，实际开发中还需要进行错误处理、样式美化等。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

ybbgrain

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值