= = 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