16.VUE-CLI cross-domain, Swiper, mobile-side projects

= = Resolve cross-domain: = =

1. Background cors cnpm i-s cors
2. Front JSONP
3, Agent Webpack:myvue\config\index.js find proxytable

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

Vue plugin:

Axios Vue-axios vue2-animate Vuex swiper

CNPM i-s Axios vue2-animate Vuex swiper

Vuex swiper//Carousel effect Copy

= = Mobile-side layout ==:rem

rem:  r---> html emhtml{font-size:100px;}标准的字体大小 100        当前的字体的大小 rem?-------------------  = -------------------表示视图的宽度 750        当前的视图的宽度 document.documentElement.clientWidth320px 640px  750px 1250pxrem?= 100/750*clientWidth = clientWidth/(7.5|3.75) + "px";

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

Vue--->vuex
1. Call mutations----> commit directly
2. Direct call to actions---> dispatch

==mai Zuo wang:==

Home, head, menu, banner chart

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;//引入axiosVue.use(VueAxios,Axios);//引入axiosVue.config.productionTip = false;/* eslint-disable no-new */new Vue({  el: "#app",  router,  store,  components: { App },  template: "<App/>"})

Store/index.js

Store configuration for Vuex

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:{}, Mutati            ons:{showmutation (state,payload) {state.isshow =!state.isshow;        Console.log ("payload", payload);        }, Yingyuanmutation (state,payload) {state.title = "all cinemas";        }, Changemutation (state,payload) {state.title = "blockbuster movie";        }, Loginmutation (state,payload) {state.title = "login";        },}, 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

Routing Configuration JS

Import vue from ' Vue ' import Router from ' vue-router ' import Home from ' @/components/home ', import Login from ' @/components/l Ogin ', 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 ', compo Nent: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.b  Eforeeach (to, from, next) = {Console.log ("Beforeeach", to);     Const token = Localstorage.token;       if (To.path = = "/order") {if (!token) {alert ("Please login First"); 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-PL Aying "></mz-film> <mz-film type=" Coming-soon "></mz-film>-<mz-film v-for=" (Item,inde x) in arr ": key=" index ": type=" Item "></mz-film> </div></template><script>import {mapactio Ns,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 () {RET Urn {arr:["now-playing", "Coming-soon"]}}, methods:{... mapactions ({change: "Changeaction"}),}, computed: {}, components:{[Banner.name]:banner, [Film.name]:film,}, created () {This.change ()}}</script><s  Tyle>.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-PL Aying "></mz-film> <mz-film type=" Coming-soon "></mz-film>-<mz-film v-for=" (Item,inde x) in arr ": key=" index ": type=" Item "></mz-film> </div></template><script>import {mapactio Ns,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 () {RET Urn {arr:["now-playing", "Coming-soon"]}}, methods:{... mapactions ({change: "Changeaction"}),}, computed: {}, components:{[Banner.name]:banner, [Film.name]:film,}, created () {This.change ()}}</script><s  Tyle>.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> <!--carousel 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 ">  </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.C    om/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 = "s How "> <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= "Mas K "@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: "Homepage", Path: "Home", Name: "Home"}, {Id:Math.random (), Content: "Movie", Path: "/filmlist", Name: "Filmlist"}, {Id:Math.random (), Content: "Cinema", Path: "/cinema", Name: "Cinema"}, {Id:Math.random (), Content: "Mall", Path: "/Home", Name: "A"}, {Id:Math.random (), Content: "My", Path: "/login", Name: "Login"}, {Id:Math.random (), C Ontent: "Card", Path: "/card", NAMe: "Card"},],}, computed:{... mapstate ({isshow: "Isshow"})//Isshow () {//return this. $store. STA    Te.isshow; }}, methods:{... mapmutations ({show: "Showmutation"}),//Show () {//this. $store. Commit ("Showmuta    tion "); }}, created () {}}</script><!--Add "scoped" attribute to limit CSS to this component only--><styl e scoped>.mz-menu {position:fixed;left:0;top:50px;z-index:1000;-height:100%; width:265px;}. Mz-menu ul{width:265px;background: #282828;p osition: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" > <!--is aggressively https://m.maizuo.com/v4/api/film/now-playing?__t= 1533018029103&page=1&count=5-<!--coming soon https://m.maizuo.com/v4/api/film/coming-soon?__t= 1533018029121&page=1&count=3--<ul class= "film" > <router-link tag= "li": to= "{name: ' Filmdet Ail ', params:{id:item.id}} "v-for=" Item in arr ": key=" item.id "> < ;/router-link> </ul> </div></template><script>export Default {name: "Mz-film", props:["t Ype "], 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> 

16.vue-cli cross-domain, Swiper, mobile-side project