基于vue2.0的一个豆瓣电影App
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
看到这个界面 说明前面没啥问题了
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
项目源码已经分享到github上
https://github.com/lentoo/vue-movie
欢迎Star
公众号
欢迎关注我的公众号“码上开发”，每天分享最新技术资讯。关注获取最新资源
