16.vue-cli跨域,swiper,移动端项目

Posted 2020-12-29 zhongchao666

==解决跨域：==

1、后台 cors cnpm i -S cors
2、前端 jsonp
3、代理 webpack: myvueconfigindex.js 找 proxyTable

proxyTable: {
  "/anhao": {
    target: "http://localhost:3000",
    changeOrigin: true,
    pathRewrite: { 
//需要rewrite重写的, 如果在服务器端做了处理则可以不要这段
      "^/anhao": ""
    }
  }
},

vue插件:

axios vue-axios vue2-animate vuex swiper

cnpm i -S axios vue2-animate vuex swiper

vuex swiper //轮播特效copy

---

==移动端布局==：rem

rem:  r---> html em

html{font-size:100px;}


标准的字体大小 100        当前的字体的大小 rem?
-------------------  = -------------------
表示视图的宽度 750        当前的视图的宽度 document.documentElement.clientWidth

320px 640px  750px 1250px

rem?= 100/750*clientWidth = clientWidth/(7.5|3.75) + "px";

---

<transition>
    <div v-show="isShow"></div>
</transition>

---

vue--->vuex
1、直接调用mutations ----> commit
2、直接调用actions ---> dispatch

==mai zuo wang:==

首页,头部,菜单,banner图

Main.js:

import Vue from "vue";
import VueAxios from "vue-axios";
import Axios from "axios";

import App from "./App";
import store from "./store";
import router from "./router";
import "vue2-animate/dist/vue2-animate";


//Vue.prototype.$http = axios;//引入axios
Vue.use(VueAxios,Axios);//引入axios

Vue.config.productionTip = false;

/* eslint-disable no-new */
new Vue({
  el: "#app",
  router,
  store,
  components: { App },
  template: "<App/>"
})

store/index.js

vuex的store配置

import Vue from "vue";
import Vuex from "vuex";
import Axios from "axios";

Vue.use(Vuex);

let store = new Vuex.Store({
    state:{
        isShow:false,
        title:"",
    },
    getters:{},
    mutations:{
        showMutation(state,payload){
            state.isShow = !state.isShow;
            //console.log("payload",payload);
        },
        yingyuanMutation(state,payload){
            state.title = "全部影院";
        },
        changeMutation(state,payload){
            state.title = "卖座电影";
        },
        loginMutation(state,payload){
            state.title = "登录";
        },
        

    },
    actions:{
        showAction({commit},payload){
            commit("showMutation");
        },
        changeAction({commit},payload){
            commit("changeMutation");
        },
        yingyuanAction({commit},payload){
            commit("yingyuanMutation");
        },
        loginAction({commit},payload){
            commit("loginMutation");
        },
    },
    modules:{},
});
console.log(111111,store.state.title)

export default store;

router/index.js

路由配置js

import Vue from ‘vue‘
import Router from ‘vue-router‘
import Home from ‘@/components/Home‘;
import Login from ‘@/components/Login‘;
import City from ‘@/components/City‘;
import FilmList from "@/components/FilmList";
import FilmDetail from "@/components/FilmDetail";
import Cinema from "@/components/Cinema";
import Order from "@/components/Order";

Vue.use(Router)

const router = new Router({
  routes: [
    {path: ‘/‘,name: ‘home‘,component: Home},
    {path: ‘/login‘,name: ‘login‘,component: Login},
    {path: ‘/city‘,name: ‘city‘,component: City},
    {path: "/filmlist",name: "filmlist",component: FilmList},
    {path: "/filmdetail/:id",name: "filmdetail",component: FilmDetail,props:true},
    {path:"/cinema",name:"cinema",component:Cinema},
    {path:"/order",name:"order",component:Order},

    {path: "/*",redirect:"/"},

  ]
});
router.beforeEach((to, from, next) => {
  console.log("beforeEach",to);

  const token = localStorage.token;
   
  if(to.path == "/order"){
     if(!token){
       alert("请先登陆");
       router.push("/login");
     }
  }
  next();
})
export default router;

App.vue

<template>
  <div id="app">
    <mz-header></mz-header>
    <mz-menu></mz-menu>
    <router-view class="content"></router-view>
  </div>
</template>

<script>
import Header from "@/components/Header";
import Menu from "@/components/Menu";

export default {
  name: "App",
  data(){
    return {
    };
  },
  methods:{
  },
  components:{
    [Header.name]:Header,
    [Menu.name]:Menu
  }
}
</script>

<style>
*{margin:0;padding:0;list-style:none;box-sizing: border-box;}
html,body{width:100%;}/*overflow: hidden; */
a{ text-decoration: none; font-size:12px; color: #000;}
.fl{float: left;}
.fr{float: right;}
#app {
  width:375px; -height: 100%;  background: #ccc; margin: 0 auto;
}
.content{padding-top:50px;}

</style>

Header.vue

<template>
  <div class="mz-home">
     <mz-banner></mz-banner>
     <!-- <mz-film type="now-playing"></mz-film>
     <mz-film type="coming-soon"></mz-film> -->
     <mz-film v-for="(item,index) in arr" :key="index" :type="item"></mz-film>
    
  </div>
</template>

<script>
import {mapActions,mapMutations,mapState,mapGetters} from "vuex";
import Swiper from "swiper";
import "swiper/dist/css/swiper";
import Banner from "./Banner";
import Film from "./Film";
import Vue from ‘vue‘;
export default {
  name: "mz-home",
  data() {
    return {
      arr:["now-playing","coming-soon"]
    }
  },
  methods:{
    ...mapActions({change:"changeAction"}),
  },
  computed:{
  },
  components:{
    [Banner.name]:Banner,
    [Film.name]:Film,
  },
  created(){
    this.change()
  }
}
</script>
<style>
.swiper-container {width: 375px;height: 210px;}  
.swiper-container img{width: 100%;height: 100%;}  
.film{padding:17px;padding-top: 18px;}
.film li{height:240px; background: yellow;margin-bottom:17px;}
.film li img{width: 100%;height: 100%;}   
</style>

Home.vue

<template>
  <div class="mz-home">
     <mz-banner></mz-banner>
     <!-- <mz-film type="now-playing"></mz-film>
     <mz-film type="coming-soon"></mz-film> -->
     <mz-film v-for="(item,index) in arr" :key="index" :type="item"></mz-film>
    
  </div>
</template>

<script>
import {mapActions,mapMutations,mapState,mapGetters} from "vuex";
import Swiper from "swiper";
import "swiper/dist/css/swiper";
import Banner from "./Banner";
import Film from "./Film";
import Vue from ‘vue‘;
export default {
  name: "mz-home",
  data() {
    return {
      arr:["now-playing","coming-soon"]
    }
  },
  methods:{
    ...mapActions({change:"changeAction"}),
  },
  computed:{
  },
  components:{
    [Banner.name]:Banner,
    [Film.name]:Film,
  },
  created(){
    this.change()
  }
}
</script>

<style>
.swiper-container {width: 375px;height: 210px;}  
.swiper-container img{width: 100%;height: 100%;}  
.film{padding:17px;padding-top: 18px;}
.film li{height:240px; background: yellow;margin-bottom:17px;}
.film li img{width: 100%;height: 100%;}   
</style>

Banner.vue

<template>
<div>
   <!-- 轮播 https://m.maizuo.com/v4/api/billboard/home?__t=1533018029083-->
    <div class="swiper-container">
        <div class="swiper-wrapper">
            <div class="swiper-slide" v-for="item in arr" :key="item.id">
              <img :src="item.imageUrl" />
            </div> 
        </div> 
    </div>
</div>
</template>

<script>
import Swiper from "swiper";
import "swiper/dist/css/swiper";
export default {
  
  name: ‘mz-banner‘,
  data () {
    return {
      arr:[],
    }
  },
  created(){
    //  https://m.maizuo.com/v4/api/billboard/home?__t=1533018029083
    let url = "http://localhost:9000/mz/v4/api/billboard/home";
    this.$http.get(url,{params:{__t:Date.now()}}).then(res=>{
      this.arr = res.data.data.billboards;
    });
  },
  updated(){
    new Swiper (".swiper-container",{loop: true});      
  }

}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>

Menu.vue

<template>
  <div class="mz-menu">
    <transition name="slideLeft">
      <ul v-show="isShow" @click="show" >
           <router-link tag="li" v-for="item in arr" :to="item" :key="item.id">{{item.content}}</router-link>
      </ul>
    </transition>
    <transition name="fade">
      <div v-show="isShow" class="mask" @click="show"></div>
    </transition>
  </div>
</template>

<script>
import {mapActions,mapMutations,mapState,mapGetters} from "vuex";
export default {
  name: "mz-menu",
  data () {
    return {
       arr:[
         {id:Math.random(),content:"首页",path:"/home",name:"home"},
         {id:Math.random(),content:"影片",path:"/filmlist",name:"filmlist"},
         {id:Math.random(),content:"影院",path:"/cinema",name:"cinema"},
         {id:Math.random(),content:"商城",path:"/home",name:"home"},
         {id:Math.random(),content:"我的",path:"/login",name:"login"},
         {id:Math.random(),content:"卖座卡",path:"/card",name:"card"},
       ],
    }
  },
  computed:{
    ...mapState({isShow:"isShow"})
    // isShow(){
    //   return this.$store.state.isShow;
    // }
  },
  
  methods:{
   
    ...mapMutations({show:"showMutation"}),
   
    // show(){
    //    this.$store.commit("showMutation");
    // }
  },
  created(){
  
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.mz-menu {position:fixed;left:0;top:50px;z-index:1000; -height: 100%; width:265px; }
.mz-menu ul{width:265px;background: #282828;position:fixed;left:0;top:50px;right:0;bottom:0; z-index:2 ; -overflow: hidden;border-top: 1px solid #666;
}
.mz-menu li{width:100%;
  height:50px; line-height:50px;color: #9a9a9a;
  font-size: 14px; padding: 0 16px;border-bottom: 1px dotted #333;
}
.mask{
    position: fixed;top: 0;bottom: 0; left: 0; right: 0;z-index: 1;
    background: rgba(0,0,0,0.5);
}


/* .fade-enter,.fade-leave-to{opacity: 0;}
.fade-enter-active,.fade-leave-active{ transition: 1s all ease;}
.fade-enter-to,.fade-leave{opacity: 1;} */

</style>

Film.vue

<template>
  <div class="mz-film">
    <!-- 正在热映 https://m.maizuo.com/v4/api/film/now-playing?__t=1533018029103&page=1&count=5 -->
    <!-- 即将上映 https://m.maizuo.com/v4/api/film/coming-soon?__t=1533018029121&page=1&count=3 -->
    <ul class="film">
        <router-link tag="li" :to="{name:‘filmdetail‘,params:{id:item.id}}" v-for="item in arr" :key="item.id">
          <img :src="item.cover.origin">
        </router-link>
    </ul>
  </div>
</template>

<script>
export default {
  name: "mz-film",
  props:["type"],
  data () {
    return {
       arr:[]
    }
  },
  methods:{
    getFilms(){//now-playing | coming-soon
      let params = {__t:Date.now(),page:1,count:5};  
      let url = `http://localhost:9000/mz/v4/api/film/${this.type}`;
      this.$http.get(url,{params}).then(res=>{ 
          this.arr = res.data.data.films;
      }); 
    }
    
  },
  created(){  
    this.getFilms();
  },
}
</script>