Vue2.0+vue-router实现简易豆瓣电影webApp

最新推荐文章于 2024-04-21 09:56:53 发布
原创 最新推荐文章于 2024-04-21 09:56:53 发布 · 置顶 · 7.2k 阅读 · 11
本文介绍如何使用Vue2.0和vue-router创建一个简易的豆瓣电影Web应用程序。项目包括首页、榜单列表、电影详情和搜索页面。通过axios处理HTTP请求，vue-infinite-scroll实现无限滚动加载。由于豆瓣API的跨域限制，利用vue-cli的代理配置解决。同时探讨了使用vuex进行状态管理的可能性。

运行项目

项目地址：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:8880即可访问。效果图如下：
text

路由

应用包括下面4个路由
* /movies 首页，包含正在上映榜单和即将上映榜单的电影信息，首页只显示各个榜单的前8条数据；
* /movie-list 榜单列表页面，显示榜单列表信息;
* /movie/subject/:id 电影详情页面；
* /movie/search 电影搜索列表页面。

项目结构

.
├── README.md
├─
标签
#Vue-js #vue-router
最低0.47元/天 解锁文章
人工智能-项目实践-搜索引擎-基于Elasticsearch，Vue，Springboot和Web爬虫的仿豆瓣电影搜索引擎
02-26
基于Elasticsearch，Vue，Springboot和Web爬虫的仿豆瓣电影搜索引擎 使用了MVC（Model-View-Controller）的设计模式，底层用的SpringBoot框架，将业务逻辑、数据、界面显示分离的方法组织代码，将业务逻辑聚集到一个部件里面，在改进和个性化定制界面及用户交互的同时，不需要重新编写业务逻辑。 Model - 项目中的pojo只有一个Movie类，在业务层接收搜索关键字通过文件索引查询数据并且完成数据的封装任务，是项目的核心逻辑处理的地方。 View - 通过前端网页实现数据的可视化，向其传递List<Moive>。 Controller - 控制器作用于模型和视图上，用于接收前端发送的数据请求，及时调用业务层代码。
一个基于vue全家桶制作的在线电影影讯网站
06-05
一个基于vue全家桶制作的在线电影影讯网站一个基于vue全家桶制作的在线电影影讯网站一个基于vue全家桶制作的在线电影影讯网站一个基于vue全家桶制作的在线电影影讯网站一个基于vue全家桶制作的在线电影影讯网站一个基于vue全家桶制作的在线电影影讯网站一个基于vue全家桶制作的在线电影影讯网站一个基于vue全家桶制作的在线电影影讯网站一个基于vue全家桶制作的在线电影影讯网站一个基于vue全家桶制作的在线电影影讯网站一个基于vue全家桶制作的在线电影影讯网站一个基于vue全家桶制作的在线电影影讯网站一个基于vue全家桶制作的在线电影影讯网站一个基于vue全家桶制作的在线电影影讯网站一个基于vue全家桶制作的在线电影影讯网站一个基于vue全家桶制作的在线电影影讯网站一个基于vue全家桶制作的在线电影影讯网站一个基于vue全家桶制作的在线电影影讯网站一个基于vue全家桶制作的在线电影影讯网站一个基于vue全家桶制作的在线电影影讯网站一个基于vue全家桶制作的在线电影影讯网站一个基于vue全家桶制作的在线电影影讯网站一个基于vue全家桶制作的在线电影影讯网站一个基于vue全家桶制作的在线电影
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进行路由分发和状
Vue实现仿豆瓣电影
ybbgrain的历程
06-20 4552
前言 这次用Vue实现豆瓣电影，然后上网上查阅了很多资料，这些东西基本上都加载不出来（原因大概是豆瓣的API接口更新了一下，所以以网的API好像都不能用了），而我又是第一次学Vue别人的拿来看不懂，没办法，自己做了个简版的。 如下图所示。 实现的页面有： 首页 详情页 榜单 查看评论 我的页面 这里例举首页和详情页的图大家参考。 项目结构 补充：其中的bottom是底部导航，header是头部样式，spinner是加载动画，star是显示星级评分。 运行方式 先：npm in
Vue简易案例四（豆瓣电影）
weixin_34234823的博客
06-04 863
1、请求数据接口，数据绑定 2、Vue处理数据（过滤器、计算属性） 3、事件处理@、修饰符 4、监视器watch 5、组件切换（vue-router） 6、过渡效果transtion <!DOCTYPE html> <html> <head> <title>组件切换练习</title> <meta charset...
Vue2.0开发仿豆瓣电影WebApp
大灰狼的小绵羊哥哥的博客
08-01 2424
想自己动手搭建一个 WordPress 独立博客？试试腾讯云上实验室吧 https://cloud.tencent.com/developer/labs 原文链接：https://segmentfault.com/a/1190000010309751 更接近豆瓣原版的webapp，本项目在论坛上也看到其他人做过，但有的功能不完善有的实现效果的体验感并不好，所以自己照着理想的效果做了
Vue项目
code_J的博客
10-28 259
vue2-elm★8036 - 重写饿了么webapp Vue-cnodejs★2491 - 基于vue重写Cnodejs.org的webapp NeteaseCloudWebApp★1549 - 高仿网易云音乐的webapp vue2-happyfri★1535 - vue2及vuex的入门练习项目 vue-zhihu-daily★1010 - 知乎日报 with Vuejs vue2-demo★994 - 从零构建vue2 + vue-router + vuex 开发环境 vue...
关于VUE的相关Demo
Ai卿的博客
02-18 326
Vue-cnodejs- 基于vue重写Cnodejs.org的webapp NeteaseCloudWebApp- 高仿网易云音乐的webapp vue-zhihu-daily- 知乎日报 with Vuejs vue-wechat- vue.js开发微信app界面 vue2-demo- 从零构建vue2 + vue-router + vuex 开发环境 eleme- 高...
实验报告一 Web开发基础
m0_59235382的博客
11-09 978
1. 掌握使用Google浏览器及IDEA 2023调试静态HTML项目的方法。 2. 掌握使用HTML 5+CSS 3创建页面和布局的方法。 3. 掌握使用JavaScript和jQuery编写客户端脚本的方法。 4. 掌握Vue项目创建及运行的方法（含Element UI的使用）。 5. 掌握在IDEA 2023里使用骨架创建简单的Maven Web项目并运行的方法。
vue-demo示例
E的小小地方
12-03 315
Vue-cnodejs - 基于vue重写Cnodejs.org的webapp NeteaseCloudWebApp - 高仿网易云音乐的webapp vue-zhihu-daily - 知乎日报 with Vuejs vue-wechat - vue.js开发微信app界面 vue2-demo - 从零构建vue2 + vue-router + vuex 开发环境 eleme - 高仿...
vue-movie:vue2.0 豆瓣电影项目实战
05-17
vue-movie vue2.0 豆瓣电影项目实例，包含三个功能模块（首页列表、搜索列表、详情页） ，适合刚入门学习 所需组件 我们会用到vue的核心组件：vue-router、axios、vue-cli 使用vue-cli脚手架创建项目（使用webpack模板） 使用vue-router实现单页面应用 使用axios请求豆瓣API的数据 使用bootstrap样式库 安装 PS：请先安装node和npm，这个就不做多介绍。嫌npm下载太慢，可以安装一个cnpm淘宝npm镜像，安装方式：npm install -g cnpm --registry= 第一步安装vue-cli cnpm i -g vue-cli 然后使用vue-cli脚手架创建一个webpack项目，根据提示一步步来，在是否安装vue-router的时候选择y，省的后面再安装 vue init webpack vue-mov
vue.js - 收藏集 - 掘金
weixin_34413357的博客
06-16 717
手摸手，带你用vue撸后台 系列一 - 掘金项目地址 前言 说好的教程终于来了，第一篇文章主要来说一说在开始写业务代码前的一些准备工作吧，但这里不会教你webpack的基础配置，热更新怎么做，webpack速度优化等等，有需求的请自行google。 目录结构 ├── build ... vue 全家桶 SPA 前后分离的图文多人 blog...
前端资料
qq_34507902的博客
01-17 1199
vue.js高仿饿了么（1-13章全） 链接：https://pan.baidu.com/s/1qYSiYXluA1AlEV0EskxWZw 提取码：25z9 Vue.js 2.5 + cube-ui 重构饿了么 App 链接：https://pan.baidu.com/s/1UZyLkzYMvhUhhX3GH5ITvA 提取码：bx53 Vue2.0 + Node.js + MongoDB全...
【亲测免费】 Vue-Douban-Movie: 一个基于Vue.js构建的豆瓣电影Web应用实践
gitblog_00086的博客
03-29 1119
Vue-Douban-Movie: 一个基于Vue.js构建的豆瓣电影Web应用实践 项目简介 是一个由前端开发者Buptsky创建的开源项目，它是一款使用Vue.js框架实现的豆瓣电影信息查询与展示的应用。该项目旨在帮助开发者学习和理解如何利用现代前端技术栈构建功能丰富的Web应用，同时也为用户提供了一个直观、简洁的观影指南。 技术分析 前端框架 - Vue.js Vue.js是一个轻量级的渐进...
推荐开源项目：基于Vue.js的豆瓣电影Web应用——DouBanByVueSsr
gitblog_00076的博客
04-21 555
推荐开源项目：基于Vue.js的豆瓣电影Web应用——DouBanByVueSsr douBanByVueSsr基于最新的vue2.3的ssr的仿豆瓣程序，后端restful api采用node+express项目地址:https://gitcode.com/gh_mirrors/do/douBanByVueSsr 项目简介 在深入讨论项目之前，先让我们简单了解一下。这是一款由 Vue.js 驱...
基础项目系列（一）：Vue3的豆瓣电影菜单栏（设置环境变量、配置路由、Hook、处理403问题、自动导包、全局事件的监听与解绑、处理滚动行为等）
A20231015的博客
12-06 845
6.在assets文件夹（管理静态资源）中，创建css文件夹，创建base.css文件，并修改main.js中的路径。9.在Home文件夹下，创建components文件夹（管理私有组件），其中创建MovieItem.vue文件，其中写。12.在Home文件夹中，创建Hooks文件夹，其中创建useListHttp.js文件，其中写。8. 创建request文件夹，创建api.js文件，其中写（防止修改路径时，变动到业务代码）二、在vite.config.js文件中，写。二、在App.vue中，写。
基于vue2.0的一个豆瓣电影App
weixin_30835649的博客
07-11 690
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 ...
Vue2.0 新手完全填坑攻略——从环境搭建到展示豆瓣的电影列表
lijun728的专栏
03-01 1664
什么是 Vue Vue 是一个前端框架，特点是 数据绑定 比如你改变一个输入框 Input 标签的值，会自动同步更新到页面上其他绑定该输入框的组件的值  组件化 页面上小到一个按钮都可以是一个单独的文件.vue，这些小组件直接可以像乐高积木一样通过互相引用而组装起来  Vue2.0 推荐开发环境  Hom
豆瓣电影页面html代码,Vue.js 仿豆瓣电影DEMO 学习笔记一
weixin_34696006的博客
06-09 2411
豆瓣电影的首页效果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启动...
基于springboot+vue+爬虫实现电影推荐系统
软件开发实战项目分享
08-16 3897
这是一个前后端分离的电影管理和推荐系统，采用Vue.js + Spring Boot技术栈开发，电影数据来源于豆瓣，采用Python爬虫进行爬取相关电影的数据，将数据插入MYSQL数据库，然后在前端进行数据展示。后台主要进行电影相关基本数据的管理功能。给用户推荐的电影数据写入到REDIS数据库中进行存储。作者简介：Java领域优质创作者、CSDN博客专家 、掘金特邀作者、多年架构师设计经验、腾讯课堂常驻讲师。主要内容：Java项目、毕业设计、简历模板、学习资料、面试题库、技术互助。......
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值