vue之豆瓣电影（四）

最新推荐文章于 2024-03-29 09:44:47 发布
最新推荐文章于 2024-03-29 09:44:47 发布
阅读量357 收藏 1
点赞数
分类专栏： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_40816649/article/details/83021040
版权

安装vuex
npm install vuex --save
配置：
main.js中
import Vuex from 'vuex'
Vue.use(Vuex)


安装axios
npm install axios
在要使用的.vue组件的script标签里面import axios from 'axios'引入
这里我们会涉及到跨域的问题如果直接去请求接口的话是不行的，这里需要在vue-cli中配置一下
在根目录的config文件夹就是vue-cli的配置文件
找到index文件
proxyTable: {
      "/api": {
        target: "https://news-at.zhihu.com/api",//要跨域的域名
        changeOrigin: true,//跨域设置
        pathRewrite: {"^/api" : ""} //后面可以使重写的新路径，一般不做更改
      }
    },
dev文件是本地运行的环境的配置
prod文件是线上生产环境的配置

养只猫
关注
专栏目录
Vue 豆瓣电影项目
qq_41603606的博客
08-27 1308
使用Vue 调用豆瓣开源api接口 提示:现在豆瓣api需要Apikey才能使用 1、获取正在热映的电影： 接口： http://api.douban.com/v2/movie/in_theaters?apikey=0df993c66c0c636e29ecbb5344252a4a&start=0&count=20&tdsourcetag=s_pcqq_aiomsg&...
Vue2.0+vue-router实现简易豆瓣电影webApp
前端超人
12-19 7096
运行项目项目地址：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
Vue豆瓣电影
08-12
技术栈 vue2.0 vue-router vuex：vue全家桶
Vue简易案例四（豆瓣电影）
weixin_34234823的博客
06-04 778
1、请求数据接口，数据绑定 2、Vue处理数据（过滤器、计算属性） 3、事件处理@、修饰符 4、监视器watch 5、组件切换（vue-router） 6、过渡效果transtion <!DOCTYPE html> <html> <head> <title>组件切换练习</title> <meta charset...
vue之豆瓣电影（三）
qq_40816649的博客
10-12 281
单独编写.scss文件的情况需要进行编译    安装rudy（百度下载一个）    在webstorm配置         文件-设置-工具-file watchers             添加scss文件类型配置如下             program：scss             arguments：--no-cache --update $FileName$:$FileName...
vue之豆瓣电影（一）
qq_40816649的博客
10-08 1077
前言 学习vue也有一段时间了，一些常用的指令，路由、vuex、生命周期也了解的差不多了。公司目前没有vue的项目为了得到进一步的突破，决定利用空闲的时间写一个关于电影单页面应用。由于没有后端因此选择了豆瓣的接口，项目很简单但是代码的过程中使用到尽可能多的vue相关的知识。 项目中用到了vue2.0、mint-ui、webpack、vue-cli、vue-router、vuex、axios、s...
vue实现豆瓣电影（API调用）
05-25
vue实现豆瓣电影，详情见博客 ...
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 ...
vue-movie:vue2.0 豆瓣电影项目实战
05-17
vue2.0 豆瓣电影项目实例，包含三个功能模块（首页列表、搜索列表、详情页） ，适合刚入门学习 所需组件 我们会用到vue的核心组件：vue-router、axios、vue-cli 使用vue-cli脚手架创建项目（使用webpack模板） 使用...
Vue豆瓣电影服务端渲染
08-10
技术基础 Vue 2.0 vue-router vuex element-ui nodejs 服务端渲染
基于vuejs的豆瓣电影webapp
08-10
基于vue.js的豆瓣电影webapp
使用vue2搭建豆瓣电影
weixin_34080903的博客
05-11 462
github地址 https://github.com/bhan614/do... 项目主页展示 项目功能 正在热映、即将上映、top250、电影详情页和搜索页展示 地区切换 加载更多 搜索 滚动加载 Vue-cli 使用vue-cli脚手架搭建，按照步骤执行即可 npm install -g vue-cli vue init we...
Vue实现仿豆瓣电影
ybbgrain的历程
06-20 4219
前言 这次用Vue实现豆瓣电影，然后上网上查阅了很多资料，这些东西基本上都加载不出来（原因大概是豆瓣的API接口更新了一下，所以以网的API好像都不能用了），而我又是第一次学Vue别人的拿来看不懂，没办法，自己做了个简版的。 如下图所示。 实现的页面有： 首页 详情页 榜单 查看评论 我的页面 这里例举首页和详情页的图大家参考。 项目结构 补充：其中的bottom是底部导航，header是头部样式，spinner是加载动画，star是显示星级评分。 运行方式 先：npm in
基于vue2.0的一个豆瓣电影App
weixin_30835649的博客
07-11 613
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豆瓣
ljlhnick的博客
04-30 474
vue 豆瓣API获取豆瓣电影，豆瓣书籍vue+vue-router+axios+vuex+iview UI技术方案模块划分功能图测试 vue+vue-router+axios+vuex+iview UI router 分为/ /movie /book iview UI 使用了Menu， Tabs，Page， Spin， Button(ButtonGroup)，Divider,BackTop ...
Vue-Douban-Movie: 一个基于Vue.js构建的豆瓣电影Web应用实践
最新发布
gitblog_00086的博客
03-29 861
Vue-Douban-Movie: 一个基于Vue.js构建的豆瓣电影Web应用实践 去发现同类优质开源项目:https://gitcode.com/ 项目简介 是一个由前端开发者Buptsky创建的开源项目，它是一款使用Vue.js框架实现的豆瓣电影信息查询与展示的应用。该项目旨在帮助开发者学习和理解如何利用现代前端技术栈构建功能丰富的Web应用，同时也为用户提供了一个直观、简洁的观影指南。 技...
vue/vuex 仿豆瓣电影APP
weixin_34319374的博客
04-17 346
项目地址： https://github.com/rockstone20/douban-movie 原来计划用weex写的，无奈坑点较多，暂时放弃了，将来再出WEEX版的DEMO。 依赖 vue-router 路由 vuex 状态管理 vue-lazyload 图片懒加载 jsonp 跨域请求接口 better-scroll 制作滚动插件，上拉加载数据等 # 安装依赖 npm insta...
Python爬豆瓣电影Top250，Springboot+Vue展示
__不想写代码__的博客
06-16 1256
目录前言一、Python爬虫二、SpringBoot+Vue展示1.编写SpringBoot后端程序2.Vue展示总结 前言 最近搞各种期末作业，决定把作业的实现思路写一下，代码放GitHub（懂的都懂）。本篇文章默认你已经有了Python，Springboot和Vue的基础了。 项目地址 连接 一、Python爬虫 简述一样爬虫的原理：我们在点开一个网页时，其实也是在向别人的服务器发请求，浏览器获取的前端代码后，解析，再展示。Python爬虫，就是用代码模拟浏览器，将获得到得前端代码进.
Vue 实现排名及单元格多数据展示
A15511052336的博客
10-14 4314
Vue 实现排名及单元格多数据展示 本次需求为：在上篇自己搭建的vue环境下，将数据进行排名展示，且各个单元格含有多个数据文本 前端代码如下： <template> <el-tabs type="border-card"> <el-tab-pane label="播放数据详情"> <el-select v-model="time" placeholder="请选择时间" style="width:200px;margin: 20p
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> ``` 这样，就可以实现豆瓣电影的分页功能了。注意，上面的代码只是一个简单的示例，实际开发中还需要进行错误处理、样式美化等。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值