# 克隆到本地
git clone [email protected]:Hanxueqing/Douban-Movie.git

# 安装依赖
npm install

# 开启本地服务器localhost:8080
yarn serve

# 发布环境
yarn build

cnpm install webpack -g

cnpm install yarn  -g

cnpm install -g @vue/cli

OR

yarn global add @vue/cli

node -v
yarn -v
vue -V （注意这里是大写的“V”）

vue create douban（项目名称）

cnpm i swiper -S或者yarn add swiper -S

cnpm i axios -S 

import getImages from "@/modules/getImg"

 methods:{
        getImages
    }

<img width = "100%" :src = "getImages(movie.images.small)" alt = "">

new Swiper(".home-banner",{
                    loop:true,
                    pagination:{
                        el:".swiper-pagination"
                    }
                })

this.$nextTick(()=>{//在这个函数里面，因为数据改变导致页面生成新的真实dom，全部渲染完成了
                new Swiper(".home-banner",{
                    loop:true,
                    pagination:{
                        el:".swiper-pagination"
                    }
                })
            })

//引入axios
import axios from "axios"
Vue.prototype.$http = axios;

proxy: {//反向代理的方式解决跨域
            "/api":{
                target:"http://47.96.0.211:9000", //目标域名
                changeOrigin:true,//是否改变域名
                pathRewrite:{//以什么开头
                    "^/api":""
                }
            }
        }, // 设置代理

this.$http.get("/api/db/in_theaters",{

.loading{
    background:url(../assets/index.svg) no-repeat center;
    background-size:10%;
    height:2.4rem
}

<div class = "loading" v-if = "!banners"></div>
        <div class = "swiper-wrapper" v-else>

<Banner></Banner>

data(){
        return{
            movies:null
        }
    },
    created(){
        this.$http.get("/api/db/in_theaters",{
            params:{
                limit:6
            }
        }).then(res=>{
            this.movies = res.data.object_list
        })
    }

props:{
        movie:Object
    }

<div class = "movieitem">
        <div class = "main_block">
            <div class = "img-box">
                <img width = "100%" :src = "getImages(movie.images.small)" alt = "">
            </div>
            <div class = "info">
                <div class = "info-left">
                    <div class = "title line-ellipsis">{{movie.title}}</div>
                    <div class = "detail">
                        <div class = "count line-height">播放量<span class = "sc">{{movie.collect_count | filterData}}</span></div>
                        <div class = "actor line-height line-ellipsis">
                            <span class = "a_title">导演:</span>
                            <span class = "a_star line-ellipsis">{{movie.directors[0].name}}</span>
                        </div>
                        <div class = "rating line-height">评分：{{movie.rating.average}}</div>
                    </div>
                </div>
                
                <div class = "info-right"> 
                    <div class = "btn">
                        <span>购票</span>
                    </div>
                </div>
            </div>
        </div>
    </div>

<div class = "moviebox">
        <div class="loading" v-if="!movies"></div>
        <MovieItem
            v-else
            v-for = "movie in movies"
            :key = "movie.id"
            :movie = "movie"
        ></MovieItem>
    </div>

filters:{
        filterData(data){
            // console.log(typeof data) //num数字类型
            if(data > 10000){
                data = data /10000;
                data = data.toFixed(1)
                data += "万"
            }
            return data;
        }
    }

<div class = "count line-height">播放量<span class = "sc">{{movie.collect_count | filterData}}</span></div>

cnpm i mint-ui -S

npm install babel-plugin-component -D

"plugins": [["component", 
    {
      "libraryName": "mint-ui",
      "style": true
    }
  ]]

//引入mint-ui相关的模块
import {Lazyload} from "mint-ui"
Vue.use(InfiniteScroll);

<img width = "100%" v-lazy = "getImages(movie.images.small)" alt = "">

//引入mint-ui相关的模块
import { Lazyload, InfiniteScroll } from "mint-ui"
Vue.use(Lazyload);
Vue.use(InfiniteScroll);

<div class = "moviebox"
        v-infinite-scroll="loadMore"
        infinite-scroll-disabled="loading"
        infinite-scroll-distance="10"
    >

methods:{
        loadMore(){
            console.log("loadmore")
            }
        },
    }

methods:{
        loadMore(){
            console.log("loadMore")
            this.getMovies();
        },
        getMovies(){
            this.$http.get("/api/db/in_theaters",{
            params:{
                limit:6
            }
            }).then(res=>{
                this.movies = res.data.object_list
            })
        }
    }

data(){
        return{
            movies:null,
            loading:false,//默认触发无限滚动
        }
    }

data(){
        return{
            movies:null,
            loading:false,//默认触发无限滚动
            limit:6,
            page:1,
        }
    }

getMovies(){
            // 解构的写法
            let{page,limit} = this;
            this.$http.get("/api/db/in_theaters",{
            params:{
                limit,
                page
            }
            }).then(res=>{
                this.movies = res.data.object_list
                this.page++
            })
        }

movies:[],

//在原来的基础上拼接数组，并且返回新数组
                this.movies = this.movies.concat(res.data.object_list)

this.loading = true;

this.loading = false;

hasMore:true //是否有更多数据，默认有更多数据

if(this.limit * this.page >= res.data.total){ //判断是否有更多数据
                        this.hasMovies = false //没有更多数据时将hasMovies赋值为false，返回false，不执行接下来的page++
                        return false
                    }
this.page++

loadMore(){
            if(!this.hasMore){
                this.loading = true //没有更多数据的时候关闭无限滚动，同时返回false，不执行接下来的操作
                return false
            }
            this.getMovies();
        }

import {Toast} from "mint-ui"

let instance = Toast({
                message: '正在加载中...',
                duration: -1,
                iconClass:"fa fa-cog fa-spin"
            })

instance.close();

const toast1 = vant.Toast.loading({
                message: '正在加载中',
                duration: 0,
            })

toast1.clear();

data(){
      return{
        type:"in_theaters",
        navs:[
          {id:1,title:"正在热映",type:"in_theaters"},
          {id:2,title:"即将上映",type:"coming_soon"},
        ],
      }
    }

<div class = "navbar"">
          <span
            v-for = "nav in navs"
            :key = "nav.id"
            :class  = "{'active':type === nav.type}"
            @click = "type = nav.type"
          >{{nav.title}}</span>
        </div>

<MovieBox :type = "type"></MovieBox>

props:["type"],

this.$http.get("/api/db/" + this.type,{

watch:{
        type(){
            this.movies = [];
            this.page = 1;
            this.hasMore = true;
            this.getMovies();
        }
    }

isfixed:false,

<div class = "tab" :class = "{fixedTop:isfixed}">
<div :class = "{fixedBox:isfixed}">

 created(){//初始化一些生命周期相关的事件
      window.addEventListener("scroll",e=>{
        //获取滚动高度
let sTop = document.documentElement.scrollTop || document.body.scrollTop;
        if(sTop >= 50 && !this.isfixed){
          this.isfixed = true;
        }else if(sTop < 50 && this.isfixed){
          this.isfixed = false;
        }
    })

methods:{
      listenScroll(e){
        //获取滚动高度
        let sTop = document.documentElement.scrollTop || document.body.scrollTop;
        if(sTop >= 330 && !this.isfixed){
          this.isfixed = true;
        }else if(sTop < 300 && this.isfixed){
          this.isfixed = false;
        }
      }
    }

created(){//初始化一些生命周期相关的事件
      window.addEventListener("scroll",this.listenScroll)
    },

beforeDestory(){//组件替换，相当于组件被销毁的时候，执行销毁操作
      window.removeEventListener("scroll",this.listenScroll)
    },

<keep-alive include = "home">
      <router-view></router-view>
</keep-alive>

activated(){
      window.addEventListener("scroll",this.listenScroll)
    },
    deactivated(){
      window.removeEventListener("scroll",this.listenScroll)
    }

activated(){
      window.addEventListener("scroll",this.listenScroll)
      this.loading = false;//开启无限滚动
    },
    deactivated(){
      window.removeEventListener("scroll",this.listenScroll)
      this.loading = true;//关闭无限滚动
    }

deactivated(){
      window.removeEventListener("scroll",this.listenScroll)
      this.isfixed = false;
      this.loading = true;//关闭无限滚动
    }

beforeRouteLeave(to,from,next){
      this.homeTop = document.documentElement.scrollTop;
      next();
    }

activated(){
      window.addEventListener("scroll",this.listenScroll)
      window.scrollTo(0,this.homeTop)
    }

document.documentElement.scrollTop = this.homeTop

data(){
        return {
            isShow:false
        }
    }

methods:{
        listenScroll(){
            let sTop = document.documentElement.scrollTop || document.body.scrollTop
            //避免重复触发
            if(sTop >= 200 && !this.isShow){
                this.isShow = true;
            }else if(sTop < 200 && this.isShow){
                this.isShow = false;
            }
        },
    }

activated(){
        window.addEventListener("scroll",this.listenScroll)
    },
    deactivated(){
        window.removeEventListener("scroll",this.listenScroll)
    }

<div class="back-top-box" v-if = "isShow" @click = "backTop">

backTop(){
            window.scrollTo(0,0)
        }

//v-backtop 就可以实现返回顶部功能
import Vue from "vue"
Vue.directive("backtop",{
    bind(el,binding,vnode){
        let eventType = binding.arg || "click";
        el.addEventListener(eventType,e=>{
            window.scrollTo(0,0)
        })
    }
})

//引入directive
import "./modules/directive"

<div class="back-top-box" v-if = "isShow" v-backtop>

<div class = "tab" :class = "{fixedTop:isfixed}" v-backtop:dblclick>

export default {
    name:"moviedetail",
    path:"/moviedetail/:id",
    component:()=>import("@/views/Movie/MovieDetail")
}

import moviedetail from "./moviedetail"

<router-link 
        :to = "{name:'moviedetail',params:{id:movie.id}}"
        tag = "div"
        class = "main_block">

getMovie(){
            this.$http.get("/api/db/movie_detail/" + this.$route.params.id).then(res => {
                this.movie = res.data
            })
        }

import { Lazyload, InfiniteScroll, Header, Button } from "mint-ui"
Vue.component("mt-header", Header);
Vue.component("mt-button", Button);

<mt-header fixed :title="movie.title">
                <router-link to="/" slot="left">
                    <mt-button icon="back">返回</mt-button>
                </router-link>
                <mt-button icon="more" slot="right"></mt-button>
            </mt-header>

//配置二级路由
    children:[
        {path:"",redirect:"list"},
        {path:"list",component:()=>import("@/views/Mine/List"),name:"list"},
        {path:"car",component:()=>import("@/views/Mine/Car"),name:"car"},
    ]

//引入mint-ui相关的模块
import { Lazyload, InfiniteScroll, Header, Button, Tabbar, TabItem } from "mint-ui"
Vue.component("mt-tabbar", Tabbar);
Vue.component("mt-tab-item", TabItem);

<mt-tabbar>
           <mt-tab-item
            v-for="nav in navs"
            :key="nav.id"
           >
            <router-link :to = "{name:nav.name}" active-class = "active">
              <img :src = "nav.src">
              {{nav.title}}
            </router-link>
           </mt-tab-item>
 </mt-tabbar>

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

import state from "./state"
import getters from "./getters"
import mutations from "./mutations"
import actions from "./actions"
export default new Vuex.Store({
    state,
    getters,
    mutations,
    actions 
})

export default {
    num:0//声明一条共享数据
}

data(){
        return{
            num:this.$store.state.num
        }
    }

computed:{
    num(){
        return this.$store.state.num
    }
}

computed:{
        mapState({
            num:state => state.num
        })
    }

computed:mapState(["num"])

computed:{
        ...mapState({
            num:state => state.num
        })
    }

computed:{
        ...mapState({
            _num:state => state.num //相当于通过this.$store.state.num来获取num的方法
        })
    }

export default{
    doubleNum(state){
        return state.num*2
    }
}

import {mapState,mapGetters} from "vuex"
export default {
    computed:{
        ...mapState({
            _num:state => state.num //相当于通过this.$store.state.num来获取num的方法
        }),
        ...mapGetters(["doubleNum"])
    }

{{doubleNum}}

export default{
    changeNum(state) {
        state.num++
    }
}

methods:{
        changeNum(){
            this.$store.commit("changeNum")
        }
    }

methods:{
        ...mapMutations(["changeNum"])
    }

import { CHANGE_NUM} from "./const"
export default{
    CHANGE_NUM(state) {
        state.num++
    }
}

//引入
import {CHANGE_NUM} from "@/store/const"
//注册
methods:{
        ...mapMutations([CHANGE_NUM])
    }
//使用
<button @click = "CHANGE_NUM">点击NUM!</button>

import { RANDOM_NUM } from "./const"
export default{
    getNumFromBackend(store){//actions一般做异步请求获取数据，然后派发mutations里面具体的更改状态的方法
        setTimeout(()=>{
            //获取一个随机值100
            let randomNum = Math.floor(Math.random()*100)
            store.commit(RANDOM_NUM, randomNum)//actions中的store参数用来派发mutations里面具体的方法，才能去更改state的值
        },1000)
    }
}

import { CHANGE_NUM, RANDOM_NUM} from "./const"
export default{
    [CHANGE_NUM](state) {
        state.num++
    },
    [RANDOM_NUM](state,randomNum){
        state.num = randomNum//给状态赋值随机数
    }
}

<button @click = "getRandom">随机出现num值！</button>

getRandom(){
            //派发action
            this.$store.dispatch("getNumFromBackend")
        }

...mapActions(["getNumFromBackend"])

<button @click = "getNumFromBackend">随机出现num值！</button>

import state from "./state"
import mutations from "./mutations"
import actions from "./actions"
import getters from "./getters"
export default{
    state,mutations,actions,getters
}

import myNum from "./myNum"
export default new Vuex.Store({
    modules:{
     myNum
    }
})

import {CHANGE_NUM} from "@/store/myNum/const"

...mapState({
            _num:state => state.myNum.num
        })

import state from "./state"
import mutations from "./mutations"
import actions from "./actions"
import getters from "./getters"
export default{
    state,mutations,actions,getters
}

import myNum from "./myNum"
import myCar from "./myCar"
export default new Vuex.Store({
    modules:{
        myNum,
        myCar
    }
})

export default {
    cars:[]//声明一条共享数据
}

import { Lazyload, InfiniteScroll, Header, Button, Tabbar, TabItem,Cell} from "mint-ui"
Vue.component("mt-cell", Cell);

<mt-cell
            title = '标题文字'
            value = '带链接'
            label = "描述信息"
        >
        <img slot = "icon" src = "" alt = "">
        </mt-cell>

{
    "dealList":[
        {
            "firstTitle": "单人",
            "title":"46oz原味爆米花1桶+22oz可乐1杯",
            "price": 33,
            "dealId": 100154273,
            "imageUrl":"https://p0.meituan.net/movie/5c30ed6dc1e3b99345c18454f69c4582176824.jpg@388w_388h_1e_1c",
            "curNumberDesc": "已售379"
        },
        {
            "firstTitle": "单人",
            "title": "46oz原味爆米花1桶+22oz雪碧1杯",
            "price": 33,
            "dealId": 100223426,
            "imageUrl": "https://p0.meituan.net/movie/5c30ed6dc1e3b99345c18454f69c4582176824.jpg@388w_388h_1e_1c",
            "curNumberDesc": "已售12"
        },
        {
            "firstTitle": "单人",
            "title": "进口食品1份",
            "price": 8.89,
            "dealId": 100212615,
            "imageUrl": "https://p1.meituan.net/movie/21f1d203838577db9ef915b980867acc203978.jpg@750w_750h_1e_1c",
            "curNumberDesc": "已售8"
        },
        {
            "firstTitle": "双人",
            "title": "85oz原味爆米花1桶+22oz可乐两杯",
            "price": 44,
            "dealId": 100152611,
            "imageUrl": "https://p0.meituan.net/movie/bf014964c24ca2ef107133eaed75a6e5191344.jpg@388w_388h_1e_1c",
            "curNumberDesc": "已售647"
        },
        {
            "firstTitle": "双人",
            "title": "85oz原味爆米花1桶+22oz雪碧两杯",
            "price": 44,
            "dealId": 100223425,
            "imageUrl": "https://p0.meituan.net/movie/bf014964c24ca2ef107133eaed75a6e5191344.jpg@388w_388h_1e_1c",
            "curNumberDesc": "已售6"
        },
        {
            "firstTitle": "多人",
            "title": "85oz原味爆米花1桶+22oz可乐2杯+冰川时代水1瓶",
            "price": 55,
            "dealId": 100152612,
            "imageUrl": "https://p1.meituan.net/movie/c89df7bf2b1b02cbb326b06ecbbf1ddf203619.jpg@388w_388h_1e_1c",
            "curNumberDesc": "已售89"
        }
        
    ]
}

data(){
        return{
            goods:[],
        }
    }

methods:{
        getGoods(){
            this.$http.get("/api/goods.json").then(res=>{
                console.log(res)
            })
        }
    },

created(){
        this.getGoods()
    }

getGoods(){
            this.$http.get("/api/goods.json").then(res=>{
                // console.log(res)
                this.goods = res.data.dealList;
            })
        }

<mt-cell
            :title="good.title"
            :label="'￥'+good.price"
            v-for="good in goods" 
            :key="good.dealId"
        >
        <mt-button type = "danger" size = "small" @click = "addGoodInCar(good)">购买</mt-button>
        <div class = "firstTitle">{{good.firstTitle}}</div>
        <img width ="70" height = "70" slot="icon" :src="good.imageUrl" alt="">
        </mt-cell>

function getCar(){
    return JSON.parse(localStorage.cars ? localStorage.cars : "[]")
}

addGoodInCar(store,goodInfo){//添加商品到购物车
        setTimeout(()=>{
            //获取后台返回来的购物车
            let cars = getCar();//[{}]
            let isHas = cars.some(item => {//判断原来的购物车是否有这个商品
                if (item.dealId === goodInfo.dealId){//如果相等代表添加进来的是同一个商品
                item.num++//商品数++
                return true;}
            })
            if (!isHas) {//说明购物车没有此商品
                goodInfo.num = 1;//商品数赋值为1
                cars.push(goodInfo)//将商品添加到cars数据中
            }
            //通知后台更改cars
            localStorage.cars = JSON.stringify(cars)
            //前段需要通过mutations具体的方法去更改state里面的cars
            store.commit(SYNC_UPDATE, cars)
        },1000)
    }

const SYNC_UPDATE = "SYNC_UPDATE"
export { SYNC_UPDATE }

import { SYNC_UPDATE} from "./const"
export default{
    [SYNC_UPDATE](state,newCar){
        state.cars = newCar;
    }
}

store.commit(SYNC_UPDATE, cars)

import {mapActions} from "vuex"

methods:{
        ...mapActions(["addGoodInCar"])
    }

<mt-button type = "danger" size = "small" @click = "addGoodInCar(good)">购买</mt-button>

initCar(store){
        //获取购物车
        let cars = getCar()
        store.commit(SYNC_UPDATE,cars)
    }

created(){
      //让页面走一下首页，触发Header中的router.beforeEach函数，不然头部会重复出现
      this.$router.push("/")
      //初始化购物车
      this.$store.dispatch("initCar")
    }

import {mapState} from "vuex"
export default { 
    computed:{
        ...mapState({
            cars:state=>state.myCar.cars
        })
    }
}

v-for="good in cars" 

<mt-button type = "danger" size = "small" @click = "addGoodInCar(good)">+</mt-button>
<mt-button type = "danger" size = "small" @click = "addGoodInCar(good)">-</mt-button>

import {mapState,mapActions} from "vuex"
export default { 
    computed:{
        ...mapState({
            cars:state=>state.myCar.cars
        })
    },
    methods:{
        ...mapActions(["addGoodInCar"]])
    }
}

reduceGoodInCar(store,goodInfo){
        //获取后台返回来的购物车
        let cars = getCar();
        cars = cars.filter(item=>{
            if (item.dealId === goodInfo.dealId){
                item.num--
            }
            return true;
        })
        //通知后台更改cars
        localStorage.cars = JSON.stringify(cars)
        //前段需要通过mutations具体的方法去更改state里面的cars
        store.commit(SYNC_UPDATE, cars)
    }

if(item.num<=0) return false

export default{
    computedTotal(state){
        let cars = state.cars;//在同一个module里面可以直接state.cars获取
        let total = {price:0,num:0} //声明一个total对象存放总价和数量
        cars.forEach(item=>{
            total.price += item.price * item.num; //总价等于商品价格乘以数量
            total.num += item.num //总数累加
        })
        return total //返回total对象
    }
}

import {mapState,mapActions,mapGetters} from "vuex"
export default { 
    computed:{
        ...mapState({
            cars:state=>state.myCar.cars
        }),
        ...mapGetters(["computedTotal"])
    },
    methods:{
        ...mapActions(["addGoodInCar","reduceGoodInCar"])
    }
}

total.price = total.price.toFixed(2)//向上取整，并保留两位小数

<p v-if = "cars.length === 0">
            没有商品了
            <router-link to = "/mine/list">点击此处购买商品</router-link>
        </p>
        <div v-else>
            <mt-cell
                :title="good.title"
                :label="'￥'+good.price+'*'+good.num" 
                v-for="good in cars" 
                :key="good.dealId"
            >
            <mt-button type = "danger" size = "small" @click = "addGoodInCar(good)">+</mt-button>
            <mt-button type = "danger" size = "small" @click = "reduceGoodInCar(good)">-</mt-button>
            <div class = "firstTitle">{{good.firstTitle}}</div>
            <img width ="70" height = "70" slot="icon" :src="good.imageUrl" alt="">
            </mt-cell>
        </div>

location /api/db {
            proxy_pass http://47.96.0.211:9000/db;
        } 

        location /data/my {
            proxy_pass http://118.31.109.254:8088/my;
        } 

        location /douban/my {
            proxy_pass http://47.111.166.60:9000/my;
        } 

./nginx -s reload