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>

原文地址：https://www.cnblogs.com/zhongchao666/p/9463022.html

时间： 2024-10-16 20:59:59

16.vue-cli跨域,swiper,移动端项目的相关文章

vue resource 携带cookie请求 vue cookie 跨域

vue resource 携带cookie请求 vue cookie 跨域 1.依赖VueResource 确保已安装vue-resource到项目中,找到当前项目,命令行输入: npm install vue-resource --save 在主方法添加 过滤 Vue.http.interceptors.push(function(request, next) {//拦截器 // 跨域携带cookie request.credentials = true; next() }) 以下是针对每个请

解决vue axios跨域请求发送两次问题

问题: vue axios跨域请求,在Request Headers加Authorization传递Token时,发现统一请求触发了两次,第一次是Request Method: OPTIONS请求. 原因: 跨域请求时,浏览器会首先使用OPTIONS方法发起一个预请求,判断接口是否能够正常通讯.如果通讯异常,则不会发送真正的请求,如果测试通讯正常,则开始真正的请求. 解决方法: 后台:判断请求方式是OPTIONS,则不处理: 预请求 发送真正请求  PHP解决方法 class Common ex

vue flask 跨域问题

最近一直忙着检查点测试平台的开发.之前主要是从事后端开发,现在所有的东西都需要自己一个人撸.也遇到了之前在后端服务开发中未碰到的问题,在此记录下解决的全过程. 前端采用vue + element的技术,开发完成后生成静态文件扔到nginx服务器上.后端用python的flask,完成之后放到gunicorn中.两个单独开发到没有什么太大问题,问题就出在将两个合在一起的时. 第一次合并的时候出现了下面的问题,额...跨域问题,问题不大改改后台的响应就ok,就写了一个简单的装饰器 装饰器代码: de

SpringBoot rest-api+Vue CORS跨域.md

跨域,指的是浏览器不能执行其他网站的脚本.它是由浏览器的同源策略造成的,是浏览器对JavaScript施加的安全限制. 目前用到两种方式 前后端统一通过代理转发,使api和vue web都通过同一域名+端口来访问,以确保同源: 通过服务端接口层配置,支持CORS请求: 服务层配置 我们目前前端有Vue.安卓.iOS,后端共用一套,因此更好的方式是通过修改服务层,以支持多端请求. Spring MVC配置方式 Spring MVC从4.2版本开始增加对CORS的支持,只需要在Controller或

vue + vue-resource 跨域访问

使用vue + vue-resource进行数据提交,后台使用RESTful API的方式存取数据,搞了一天,终于把后台搞好了.进行联合调试时,数据不能提交,报403错误: XMLHttpRequest cannot load http://localhost:8090/xxx/xxx. Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header

vue resource 携带cookie请求 vue cookie 跨域(六)

1.依赖VueResource  确保已安装vue-resource到项目中,找到当前项目,命令行输入: npm install vue-resource --save 在主方法添加 过滤 Vue.http.interceptors.push(function(request, next) {//拦截器 // 跨域携带cookie request.credentials = true; next() }) 以下是针对每个请求都会携带cookie ,也可以指定接口请求携带cookie this.$

Vue代理&amp;跨域

Vue 本地代理 纯前端技术解决跨域 vue-axios获取数据很多小伙伴都会使用,但如果前后端分离且后台没设置跨域许可,那要怎样才能解决跨域问题? 常用方法有几种: 通过jsonp跨域 通过修改document.domain来跨子域 使用window.name 或location.hash 来进行跨域 使用HTML5中的window.postMessage方法来跨域 图片ping或script标签跨域 WebSocket CORS 以上方法或多或少都有一定限制,有的不支持post有的需要后台配

Vue+Django 跨域问题配置

跨域请求问题: 1.Django后端解决办法: # 后端下载模块: pip install django-cors-headers # settings配置: MIDDLEWARE = [ 'django.middleware.security.SecurityMiddleware', 'django.contrib.sessions.middleware.SessionMiddleware', 'django.middleware.common.CommonMiddleware', # 'dj

vue+axios跨域解决方法

通过这种方法也可以解决跨域的问题. 使用http-proxy-middleware 代理解决(项目使用vue-cli脚手架搭建) 例如请求的url:"http://f.apiplus.cn/bj11x5.json" 1.打开config/index.js,在proxyTable中添写如下代码: 1 2 3 4 5 6 7 8 9 proxyTable: {    '/api': {  //使用"/api"来代替"http://f.apiplus.c&quo