基于vue2.0的一个豆瓣电影App
1、搭建项目框架
使用vue-cli 没安装的需要先安装
使用vue-cli生成项目框架
接着 进入项目目录
然后安装项目依赖包
2、安装需要的依赖包
该项目需要用到vue-router bootstrap
<link rel="stylesheet" href="/node_modules/bootstrap/dist/css/bootstrap.css"><link rel="stylesheet" href="http://v3.bootcss.com/examples/dashboard/dashboard.css">
3、编写代码
App.vue
<template><div id="app"><nav class="navbar navbar-inverse navbar-fixed-top"><div class="container-fluid"><div class="navbar-header"><button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false"aria-controls="navbar"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button><a class="navbar-brand" href="#">基于Vue2.0的一个豆瓣电影App</a></div><div id="navbar" class="navbar-collapse collapse"><form class="navbar-form navbar-right"><input type="text" class="form-control" placeholder="Search..."></form></div></div></nav><div class="container-fluid"><div class="row"><div class="col-sm-3 col-md-2 sidebar"><ul class="nav nav-sidebar"><li class="active" v-focus="{server:currentRoute}"><router-link to="/in_theaters/0">正在热映</router-link></li><li v-focus="{server:currentRoute}"><router-link to="/coming_soon/0">即将上映</router-link></li><li v-focus="{server:currentRoute}"><router-link to="/top250/0">Top</router-link></li></ul></div><div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main"><router-view></router-view></div></div></div></div></div> </template> <script>import jsonp from './js/jsonp.js'import config from './js/config.js'export default {name: 'app',data() {return {currentRoute: '',search: ''}},created() {this.request();},methods: {request() {var server = this.$route.params.server;this.currentRoute = server;},data: {jsondata: {}},Search() {this.$router.push({ path: '/search/0?t=' + this.search, params: { t: this.search } });}},watch: {'$route': 'request'}}
然后在src目录下新建一个components文件夹
<template><div><h1 class="page-header">{{jsondata.title}}</h1><ul class="list-group"><li class="list-group-item" v-for="(item,index) in jsondata.subjects"><span class="badge">{{item.rating.average}}</span><div class="media-left"><router-link :to="{path:'/detail/'+item.id}"><img class="media-object" :src="item.images.small" alt=""></router-link></div><div class="media-body"><h3 class="media-heading">{{item.title}}</h3><p><span>类型:</span><span>{{item.genres.join('、')}}</span></p><p><span>导演:</span> <span v-for="(val,index) in item.casts">{{val.name + (index==item.casts.length-1?'':'、')}}</span></p></div></li></ul><div id="layear" v-show="!show"><p>当前第{{parseInt(currentPage) +1}}页、共 {{countPage}}页</p><nav><ul class="pager"><li :class="{disabled:currentPage<=0}"><router-link :to="{path:'/'+server+'/'+ (currentPage<=0?0:(parseInt(currentPage)-1))}">上一页</router-link></li><li :class="{disabled:currentPage>=countPage}"><router-link :to="{path:'/'+server+'/'+(parseInt(currentPage) + parseInt(1))}">下一页</router-link></li></ul></nav></div><div class="spinner" v-show="show"><div class="double-bounce1"></div><div class="double-bounce2"></div></div></div> </template> <script>import Vue from 'vue'import jsonp from '../js/jsonp.js'import config from '../js/config.js'export default {created() {this.request(); },data() {return {currentPage: 0,jsondata: {},countPage: 0,server: '',show: 'true'}},methods: {request() {this.show = true;var server = this.$route.params.server;this.server = server;this.currentPage = this.$route.params.page;var count = 10;jsonp(config.apiServer + server, { count: count, start: this.currentPage * count, q: this.$route.query.t }, function (data) {this.jsondata = data;this.countPage = Math.ceil(this.jsondata.total / this.jsondata.count);this.show = false;}.bind(this))}},watch: {'$route.path': 'request','$route.params':'request'}}</script> <style scoped>.spinner {width: 60px;height: 60px;margin: 100px auto;position: fixed;left: 0;right: 0;top: 0;bottom: 0;}.double-bounce1,.double-bounce2 {width: 100%;height: 100%;border-radius: 50%;background-color: #67CF22;opacity: 0.6;position: absolute;top: 0;left: 0;-webkit-animation: bounce 2.0s infinite ease-in-out;animation: bounce 2.0s infinite ease-in-out;}.double-bounce2 {-webkit-animation-delay: -1.0s;animation-delay: -1.0s;}@-webkit-keyframes bounce {0%,100% {-webkit-transform: scale(0.0)}50% {-webkit-transform: scale(1.0)}}@keyframes bounce {0%,100% {transform: scale(0.0);-webkit-transform: scale(0.0);}50% {transform: scale(1.0);-webkit-transform: scale(1.0);}} </style>
接着在src目录下创建js文件夹 存放js文件
var jsonp = function (url, data, callback) {var cbFuncName = 'jsonp_fun' + Math.random().toString().replace('.', '');window[cbFuncName] = callback;var queryString = url.indexOf('?') == -1 ? '?' : '&';for (var key in data) {queryString += key + '=' + data[key] + '&';}queryString += 'callback=' + cbFuncName;var script = document.createElement('script');script.src = url + queryString;document.body.appendChild(script); } export default jsonp
在新建一个config.js 用来存放一些配置信息
const apiServer = 'https://api.douban.com/v2/movie/'; export default { apiServer }
接着在新建一个focus.js 用来左边导航栏获取焦点
import Vue from 'vue' var focus = {}; focus.install = function () {Vue.directive('focus', function (el, binding) {var server = binding.value.server;var aLink = el.children[0].href; var link = /^((http)?:\/\/)[\w]+:+[\d]+\/\W+([\w]+)?\/\w/;var val = (aLink.match(link))[3];el.className = '';if (val == server) {el.className = 'active';}}) } export default focus;
然后来到main.js中 引用vue-router 和引用刚才的focus.js和配置vue-router
import Vue from 'vue' import App from './App.vue' import VueRouter from 'vue-router' import movielist from './components/movielist.vue' import focus from './js/focus'Vue.use(VueRouter) Vue.use(focus) var routes = [{path: '/:server/:page', component: movielist }, { path: '*', redirect:'/in_theaters/0' }] var router = new VueRouter({routes }) new Vue({el: '#app',router,render: h => h(App) })
到这边页面基本成型了
公众号
欢迎关注我的公众号“码上开发”,每天分享最新技术资讯。关注获取最新资源
转载于:https://www.cnblogs.com/lentoo/p/7152188.html
基于vue2.0的一个豆瓣电影App相关推荐
- 基于vue2.0打造移动商城页面实践 vue实现商城购物车功能 基于Vue、Vuex、Vue-router实现的购物商城(原生切换动画)效果...
基于vue2.0打造移动商城页面实践 地址:https://www.jianshu.com/p/2129bc4d40e9 vue实现商城购物车功能 地址:http://www.jb51.net/art ...
- java 爬取评论,Java基于WebMagic爬取某豆瓣电影评论的实现
目的 搭建爬虫平台,爬取某豆瓣电影的评论信息. 准备 webmagic是一个开源的Java垂直爬虫框架,目标是简化爬虫的开发流程,让开发者专注于逻辑功能的开发.webmagic的核心非常简单,但是覆盖 ...
- vue tree组件_基于 Vue2.0 和 HeyUI 组件库的中后端系统 HeyUI Admin
介绍 heyui-admin 是一个成熟的企业应用解决方案,基于 vue2.0 和 heyui 组件库的中后端系统. 功能 - Js - common / 通用 - ajax / 封装axios - ...
- Python项目----基于Scrapy爬虫框架的豆瓣电影数据采集
基于Scrapy爬虫框架的豆瓣电影数据采集 项目介绍 项目简介 项目开发环境 项目需求分析 Scrapy框架 Scrapy框架基础知识 Scrapy框架安装 Scrapy框架使用 项目功能实现 爬虫主 ...
- 基于vue2.0实现音乐/视频播放进度条组件的思路及具体实现方法+代码解释
基于vue2.0实现音乐/视频播放进度条组件的方法及代码解释 需求分析: ①:进度条随着歌曲的播放延长,歌曲播放完时长度等于黑色总进度条长度:时间实时更新. ②:当滑动按钮时,实时更新播放时间,橙色进 ...
- 基于vue2.0 + elementUI 后台管理平台
Vue-Admin-Demo 这是一个基于vue2.0 + elementUI 后台管理平台 Github: https://github.com/xiahuahua/vue-vux-demo(欢迎S ...
- Muse UI — 基于 Vue2.0 的 Material Design UI 库
Vue 2.0 发布以来,很多 vue 的开源项目都开始了升级计划,我也思考着 vue-carbon 的升级之路,9月开工,11月完工, Muse UI 闪亮登场. 先睹为快 Muse UI 主要用于 ...
- 基于vue2.0+ 抽奖项目
前言 临近年关抽奖活动,基于vue2.0+开发的抽奖项目. 便于查看效果,贴上相关地址: 在线示例地址:快速访问 github地址:查看源码 简介 基于vue.js抽奖项目,截屏保存每次抽奖图片至本地 ...
- 基于 Vue2.0 的移动端 / PC 端验证码输入组件.
vue-input-code 基于Vue2.0的移动端验证码输入组件. 功能预览 输入回调 完成回调 自定义验证码个数 样式可控 这里是可爱的Demo 支持 支持 Vue.js 2.0+. 安装和使用 ...
最新文章
- 奇怪,不能上GOOGLE了...你们也是这样吗?
- http://blog.csdn.net/java2000_wl/article/details/8627874
- 删除表空间联带数据文件
- DataTable方法 和 性能
- 【汇编语言】8086汇编语言的debug中,t和p命令的区别
- php将json格式的数据直接存入mysql数据库
- java爬虫隐藏表单提交_java爬虫--jsoup简单的表单抓取案例
- Linux之mariadb数据库
- 创建Maven项目时提示web.xml is missing and failOnMissingWebXml is set to true错误解决方案
- C# 中的常用正则表达式汇总
- STM8 内部flash
- 集成底座POC方案说明
- APP测试常用测试点
- 网站域名如何解析到阿里云和腾讯云服务器?
- 计算RPS指标 Python实现
- Python:正则表达式re.compile()
- mysql 前几个月的时间_MYsql 查询 查询当前周、月份及前几个月的数据(时间 查询)...
- 【数学解析几何】C_几种常见的函数曲线——(典型曲线图)
- pe如何查看计算机用户名,用PE如何查看系统版本
- 使用脚本批量上传内购商品
热门文章
- java 数据转成xml_java转换CSV文件生成xml格式数据
- 计算机打印机节支措施,“节支降耗,从我做起 ”倡导篇 ——节约纸张
- #436. 子串的最大差(单调栈)
- web开发技术复习笔记
- Welcome To SWPUNC-ACM
- 用幂次变换来增强图像matlab,基于幂次变换及MSR光照不均图像增强.doc
- 图片从预处理到分类的过程
- 定区关联快递员 定区关联收派时间
- 机房(厂房)温度环境监控系统
- iOS10 推送通知详解(UserNotifications)