1、搭建項目框架

使用vue-cli 沒安裝的需要先安裝

npm intall -g vue-cli

使用vue-cli生成項目框架

vue init webpack-simple vue-movie

然后一路回車

接著 進(jìn)入項目目錄

cd vue-movie

然后安裝項目依賴包

cnpm install

沒安裝cnpm的先執(zhí)行這個命令

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文件夾

在該文件夾下創(chuàng)建一個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>導(dǎo)演：</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>當(dāng)前第{{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目錄下創(chuàng)建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 用來左邊導(dǎo)航欄獲取焦點(diǎn)

添加以下代碼

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)
})

到這邊頁面基本成型了

回到命令行 繼續(xù)執(zhí)行該命令

npm run dev

項目源碼已經(jīng)分享到github上

https://github.com/qq729533020/vue-movie

http://www.cnblogs.com/lentoo/p/7152188.html

延伸閱讀

• 一個人的堅持就是勝利 2023-04-18
• 一步一個腳印 2023-04-18
• 叮當(dāng)電影 2022-07-13
• 這是一個我很喜歡的地方——萬碼學(xué)堂 2022-07-12
• 慢慢來，一步一個腳印 ——岳*冉 2020-06-19
• 項目開發(fā)不是一個人的事情——柳*啟 2019-11-27
• 寫代碼是一個痛并快樂著的過程——李*文 2019-11-27
• 努力成為一個頂尖的軟件工程師——張*浩 2019-10-08
• 所有的收獲都鑄造了一個美好的自己——董*豪 2019-10-08
• 電影網(wǎng)站 2019-10-08

一個人的堅持就是勝利