记一次Vue实战总结

vue

目录结构

• assets一般用来放置小的图片，icon类， public一般用来放置大的图片
• build之后，public下面的文件夹会原封不动的添加到dist中
• assets目录，build之后会被合并到一个文件中，进行压缩，多用来存放业务级的js、css等，如一些全局的scss样式文件、全局的工具类js文件等。

跨域

原因

跨域问题是有浏览器的同源策略导致的。同源策略是浏览器的安全策略，能极大避免浏览器收到攻击。

同源是指协议、域名、端口这三者相同（必须是严格三者都相同），对于http协议，默认的端口是80；对于https协议，默认端口为443，也就是说 http://www.baidu.com:80 等价于 http://www.baidu.com

解决办法

jsonp请求

原理就是利用script标签的src没有跨域限制.直接通过<script src="接口+回调函数"> 调用

Nginx反向代理

通过配置nginx，比如

location /api {
    proxy_pass https://www.imooc.com;
}

通过代理，我们就可以这样调用

login.onclick = ()=>{
    axios.get('/api/xxx').then(()=>{
        xxxx
    })
}

这样我们通过代理，实际访问的是 https://www.imooc.com/xxx

CROS

服务端设置，前端直接调用，（说明：后台允许前端某个站点进行访问），后端设置Access-Control-Allow-Origin,来指定某个站点进行调用，可以是静态的也可以动态的。

接口代理

在vue当中的实现方式，创建一个vue.config.js配置文件（这个其实是webpack配置表，最终会传递给nodejs服务器）

module.exports = {
    devServer:{
    	host: "localhost",
        port: 8080,
        proxy: {
            '/api': {
                target: 'https://www.imooc.com',
                changeOrigin: true,
                pathRewrite: {
                    '/api': ''
                }
            }
        }
	}
}

封装storage

cookie,localStorage,sessionStorage三者区别

localStorage与sessionStorage合称为storage。localStorage存储在本地，浏览器关闭不会消失。sessionStorage存储在内存，随着浏览器关闭会消失。

cookie与storage区别：

• 储存大小 : cookie 4k , storage 4M
• 有效期： cookie 拥有有效期 ， storage永久存储
• cookie会发送到服务端，存储到内存，storage只存储在浏览器端
• 路径： cookie有路径限制，storage只存储在域名下
• API: cookie没有专门的Api

为什么要封装storage

• storage只存储字符串，需要人工智能转化为json对象
• storage只能一次性清空，不能单个清空

封装

/**
 * storage封装
 */
const STORAGE_KEY = 'mi';  //storage标识符，名字
export default {
    /*
    setItem(key,value,module)
    module是某一模块下的，比如
    {
    	user:{
    		username: xxx
    	}
    }
    设置user下面的username
    */
    setItem(key, value, module) {
        if (module) {
            let val = this.getItem(module);
            val[key] = value;
            this.setItem(module, val)
        } else {
            let val = this.getStorage();
            val[key] = value;
            window.sessionStorage.setItem(STORAGE_KEY, JSON.stringify(val))//保存数据到sessionStorage中，window.sessionStorage.setItem(名字,数据)；
        }
    },
    /*
    {
		user:{
			username: lihua,
			age: 18
		}    
    }
    getItem(username,user)
    */
    getItem(key, module) {
        if (module) {
            let val = this.getItem(module)
            if (val)
                return val[key]
        }
        return this.getStorage()[key]
    },
    // 获取sessionStorage
    getStorage() {
        return JSON.parse(window.sessionStorage.getItem(STORAGE_KEY) || '{}')
    },
    //清除方法
    clear(key, module) {
        let val = this.getStorage();
        if (module) {
            if (!val[module]) return;
            delete val[module][key]
        } else {
            delete val[key]
        }
        window.sessionStorage.setItem(STORAGE_KEY, JSON.stringify(val))
    }

}

axios

config default

axios.defaults.baseURL = 'https://api.example.com';//设置接口路径的相同部分
axios.defaults.timeout = 8000 //如果8秒了还没请求返回数据，就终止

接口拦截

axios.interceptors.response.use(function (response) {
    return response;
  }, function (error) {
    return Promise.reject(error);
  });

每次调用axios请求，首先都会经过interceptors数据拦截，比如

axios.interceptors.response.use(function(response) {
    let val = response.data;//接口返回的数据
    let path = window.location.pathname;
    if (val.status == 0) {// 根据接口返回的状态字来过滤
        return val.data   // 返回 接口数据 当中的data模块，而不用返回状态字了
    } else if (val.status == 10) { // 如果状态字为10(自己设定)，那么就是未登录，我们就拦截，不返回data模块
        if (path != '/index')
            window.location.href = '/login'
        return Promise.reject(val);
    } else { //其他状态字，也同样不返回数据
        alert(val.msg)
        return Promise.reject(val)
    }
}, (error) => { //请求的接口地址报错，进行处理
    let res = error.response;
    Message.error(res.data.message);
    return Promise.reject(error);
})

{

​ status: 0 ,

​ data:{

​ user:{

​ username: 'kkk',

​ age: 18

​ }

​ }

}

假设我们通过请求返回这个数据，首先通过interceptors过滤，判断状态字 为 0 ，所以就返回了里面的data字段，最终我们axios请求返回的res为data。

语法

get请求

axios.get('/user?ID=12345')
  .then(function (response) {
    // handle success
    console.log(response);
  })
  .catch(function (error) {
    // handle error
    console.log(error);
  })
  .then(function () {
    // always executed
  });

或者

axios.get('/user', {
    params: {
      ID: 12345
    }
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  })
  .then(function () {
    // always executed
  });  

或者

axios({
  method: 'get',
  url: 'http://bit.ly/2mTM3nY',
  responseType: 'stream'
})
  .then(function (response) {
    response.data.pipe(fs.createWriteStream('ada_lovelace.jpg'))
  });

post请求

axios.post('/user', {
    firstName: 'Fred',
    lastName: 'Flintstone'
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

动态请求

this.axios[method](url,params).then(res=>{
        this.$message.success("操作成功")
      })

method动态，可以为post,get,delete，

vue 路由

路由嵌套

如果多个页面有相同的头部和顶部，可以把他们抽离出来，使用路由嵌套进行开发

const router = new VueRouter({
  routes: [
    { path: '/user/', component: User,
      children: [//嵌套子路由
        {
          // 当 /user/profile 匹配成功，
          // UserProfile 会被渲染在 User 的 <router-view> 中
          path: 'profile',
          component: UserProfile
        },
        {
          // 当 /user/posts 匹配成功
          // UserPosts 会被渲染在 User 的 <router-view> 中
          path: 'posts',
          component: UserPosts
        }
      ]
    }
  ]
})

/user的vue文件如下

<template>
  <div class="home">
      <nav-header></nav-header>
      <router-view></router-view>
      <nav-footer></nav-footer>
  </div>
</template>

子路由的component就会渲染到router-view当中。这样他们的nav-header和nav-footer就会得到复用。

当我们访问/user时，router-view里面是不会渲染任何东西的

动态路由

const router = new VueRouter({
  routes: [
    // 动态路径参数 以冒号开头
    { path: '/user/:id', component: User }
  ]
})

像 /user/foo 和 /user/bar 都将映射到相同的路由.

路径参数使用冒号：标记，参数值会被设置到 this.$route.params 当中

this.$route.path 对应当前路由的路径，总被解析为绝对路径，如 /user/boo

this.$route.query 标识url查询字符串，对于路径 /foo?user=1 则，this.$route.query.user == 1,如果没有则为空对象。

this.$route.hash 当前路由的 hash 值 (带 #) ，如果没有 hash 值，则为空字符串。

this.$route.name 当前路由的名称，如果有的话。

动态路由，原来的组件实例会被复用，这也就意味着组件的生命周期钩子不会再被重复调用。

复用组件时，想对路由参数的变化作出响应的话，你可以简单地 watch (监测变化) $route 对象

编程式导航

this.$router.push

想要导航到不同的 URL，则使用 router.push 方法。这个方法会向 history 栈添加一个新的记录，所以，当用户点击浏览器后退按钮时，则回到之前的 URL。

this.$router.push 相当于

const userId = '123'
router.push({ name: 'user', params: { userId }}) // -> /user/123
router.push({ path: `/user/${userId}` }) // -> /user/123
// 带查询参数，变成 /register?plan=private
router.push({ path: 'register', query: { plan: 'private' }})

this.$router.go

这个方法的参数是一个整数，意思是在 history 记录中向前或者后退多少步

// 在浏览器记录中前进一步，等同于 history.forward()
this.$router.go(1)

// 后退一步记录，等同于 history.back()
this.$router.go(-1)

// 前进 3 步记录
this.$router.go(3)

// 如果 history 记录不够用，那就默默地失败呗
this.$router.go(-100)
this.$router.go(100)

路由的命名

const router = new VueRouter({
  routes: [
    {
      path: '/user/:userId',
      name: 'user',// 将这个路由命名为user
      component: User
    }
  ]
})

通过上面代码，将次路由命名为user，则我们通过push可以这么调用

router.push({ name: 'user', params: { userId: 123 }})

路由重定向

const router = new VueRouter({
  routes: [
    { path: '/a', redirect: '/b' }
  ]
})

路由懒加载

两种方式。

第一种：

{
    path: 'product/:id',
    name: 'product',
    component: resolve => require(['./../views/product.vue'], resolve)
},

第二种

{
    path: 'confirm',
    name: 'order-confirm',
            component: () =>import ('./../views/orderConfirm.vue')
},

Mixin

好处

减少代码冗余，避免样式污染

用法

创建一个scss文件（mixin.scss），然后。。就可以在里面写函数，封装我们代码，来重复调用

//flex布局复用
@mixin flex($hov:space-between,$col:center){
  display:flex;
  justify-content:$hov;
  align-items:$col;
}
@mixin bgImg($w:0,$h:0,$img:'',$size:contain){
  display:inline-block;
  $w;
  height:$h;
  background:url($img) no-repeat center;
  background-size:$size;
}

调用，用 @include 去调用

@import './../assets/scss/mixin'; // 首先得引入下刚刚创建的mixin文件
.munu-item-a{
              font-size: 16px;
              color: #fff;
              padding-left: 30px;
              display: block;
              position: relative;
              &::after{
                content:' ';
                position: absolute;
                right: 30px;
                top: 17.5px;
                @include bgImg(10px,15px,'../../public/imgs/icon-arrow.png') // 调用
              }
}

vuex

介绍

每一个vuex的应用核心是store（仓库），有以下特点。

• vuex的存储状态是响应式的，如果store中的内容状态发生变化，相应的组件也会得到更新应用。
• 不能直接改变store状态，唯一途径是通过提交（commit）mutation，这样可以方便的跟踪每一个状态的变化。
• 为了让各个组件访问得了store，需要将store挂载到vue实例上，这样各个组件就可以通过this.$store来访问。

State

单一状态树，包含了所有状态，可以和data相比较，相当于存储数据。

可以直接访问，或者通过辅助函数MapState

Getters

getters可以理解为vuex的计算属性，只有他的依赖值发生改变，getters接收state作为其第一个参数

Mutation

更改 Vuex 的 store 中的状态的唯一方法是提交 mutation，接收state作为第一个参数，通过this.$store.commit方法来触发mutation

mutations: {
  increment (state, n) {
    state.count += n
  }
}

mutation必须是同步函数，可以用commit提交或者mapMutation

Action

类似于mutation，Action提交的是mutation，而不是直接变更状态，Action可以包含异步操作。

Action接收一个context对象作为参数，这个对象与store实例具有相同方法和属性

context.commit 就相当于提交一个mutation。 context.state就相当于this.$store.state

Action通过this.$store.dispatch（"increament"）方法触发

import { mapActions } from 'vuex'

export default {
  // ...
  methods: {
    ...mapActions([
      'increment', // 将 `this.increment()` 映射为 `this.$store.dispatch('increment')`

      // `mapActions` 也支持载荷：
      'incrementBy' // 将 `this.incrementBy(amount)` 映射为 `this.$store.dispatch('incrementBy', amount)`
    ]),
    ...mapActions({
      add: 'increment' // 将 `this.add()` 映射为 `this.$store.dispatch('increment')`
    })
  }
}

流程就如那一副图所示，

组件通过dispatch派发action，然后action会commit提交mutation来改变我们的state进而改变我们的视图。

问？为什么不直接commit，还要通过派发action？

因为action无所限制，可以是异步。

项目结构

如果状态过多，应该分离出来各个文件

├── index.html
├── main.js
├── api
│   └── ... # 抽取出API请求
├── components
│   ├── App.vue
│   └── ...
└── store
    ├── index.js          # 我们组装模块并导出 store 的地方
    ├── actions.js        # 根级别的 action
    ├── mutations.js      # 根级别的 mutation
    └── modules
        ├── cart.js       # 购物车模块
        └── products.js   # 产品模块

完整实例

store目录下的index.js文件，导出store的地方。

/*index.js文件*/
import Vue from 'vue'
import Vuex from 'vuex'
import actions from './actions'
import mutations from './mutations'
Vue.use(Vuex)
const state = {
    username: '',
    cartCount: 0
}
export default new Vuex.Store({
    state,
    mutations,
    actions,
    modules: {}
})

/**
 * vue-mutations   , mutation文件
 */
export default {
    saveUserMsg(state, username) {
        state.username = username
    },
    saveCartCount(state, cartCount) {
        state.cartCount = cartCount
    }
}

/**
 * vue-actions  , action文件
 */
export default {
    saveUserMsg(context, username) {
        context.commit('saveUserMsg', username)
    },
    saveCartCount(context, cartCount) {
        context.commit('saveCartCount', cartCount)
    }
}

vue封装组件

props：父组件通过将数据绑定在props当中声明的key，props声明在子组件当中，然后子组件就可以通过props使用父组件传过来的值。

emit是子组件向父组件传递数据，具体实例如下：

子组件（可重新复用）：

<template>
  <transition name="slide">
    <div class="modal" v-show="showModal">
      <div class="mask">
      </div>
      <div class="modal-dialog">
        <div class="modal-header">
          <span>{{title}}</span>
          <a href="javascript:;" class="close_icon" v-on:click="$emit('cancel')"></a>
        </div>
        <div class="modal-body">
          <slot name="body"></slot>
        </div>
        <div class="modal-footer">
          <a href="javascript:;" class="btn" v-if="btnType==1" v-on:click="$emit('submit')">确定</a>
          <a href="javascript:;" class="btn" v-if="btnType==2" v-on:click="$emit('cancel')">取消</a>
          <div class="btn-group" v-if="btnType==3">
            <a href="javascript:;" class="btn" v-on:click="$emit('submit')">{{sureText}}</a>
            <a href="javascript:;" class="btn btn-default" v-on:click="$emit('cancel')">{{cancelText}}</a>
          </div>

        </div>
      </div>
    </div>
  </transition>

</template>

<script>

export default {
  props:{
    modalType:{
      // 小 small  中 middle  大large  表单form
      type: String,
      default: 'form'
    },
    // 标题
    title:String,
    // 按钮类型  1,确定按钮  2，取消按钮  3，确定取消
    btnType: String,
    sureText:{
      type: String,
      default: '确定'
    },
    cancelText:{
      type: String,
      default: '取消'
    },
    showModal: Boolean

  }
}
</script>

<style lang="scss">
@import "../assets/scss/mixin";
@import "../assets/scss/modal";
</style>

父组件

<template>
	<modal
      title="提示"
      sureText="查看购物车"
      btnType="3"
      modalType="middle"
      :showModal= "showModal"
      v-on:submit = goToCart
      v-on:cancel = "showModal = false"
      >
        <template v-slot:body>
          <p>添加商品成功</p>
        </template>
      </modal>
</template>
<script>
 import Modal from '../components/Modal'
 export default{
     components: {
   		 Modal
  },
     methods:{
         goToCart(){
          this.$router.push('/cart')
        },
         
     }
}
</script>

导入，引入，传参，父向子传参，子向父传事件，一气呵成