基于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
 

公众号

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

基于vue2.0的一个豆瓣电影App的相关教程结束。