16.vue-cli跨域,swiper,移动端项目
解决跨域：
1、后台 cors cnpm i -S cors
2、前端 jsonp
3、代理 webpack: myvue\config\index.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>
