基于vue2.0的一个豆瓣电影App

时间:2022-08-09 05:20:51

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 cnpm --registry=https://registry.npm.taobao.org
接着 npm run dev
基于vue2.0的一个豆瓣电影App
看到这个界面 说明前面没啥问题了

2、安装需要的依赖包

该项目需要用到vue-router bootstrap

所以先安装这两个包
cnpm install vue-router bootstrap -D
然后在 index.html 页面引用下boostrap.css和另一个需要用到的css文件
 <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

 来到src目录下的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'
}
}
</script>

然后在src目录下新建一个components文件夹

在该文件夹下创建一个movielist.vue
添加以下代码
<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文件

新建一个jsonp.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)
})

到这边页面基本成型了

回到命令行 继续执行该命令
npm run dev
 
基于vue2.0的一个豆瓣电影App
项目源码已经分享到github上
https://github.com/lentoo/vue-movie
欢迎Star
 

公众号

欢迎关注我的公众号“码上开发”,每天分享最新技术资讯。关注获取最新资源

基于vue2.0的一个豆瓣电影App