大型电商项目尚品汇知识点

二次封装axios

新建文件夹api，此文件下进行二次封装、接口统一管理等操作。

接口统一管理

跨域问题

什么是跨域？

浏览器从一个域名的网页去请求另一个域名的资源时，域名、端口、协议任一不同，都是跨域

解决跨域

1.JSONP

2.CROS

3.代理

使用webpack提供的代理（文档中的proxy）
vue.config.js或webpack.config.js中配置

module.exports = {
  //...
  devServer: {
    proxy: {
      //当前台发请求携带/api，请求转发
      '/api': 'http://localhost:9090',
    },
  },
};

注意：后端接口前应该有/api不然报404
加到blog项目上发现不起作用访问接口还是报404，后来发现blog项目是通过webpack初始化的(启动项目是npm run dev)，config文件夹下index.js文件中有proxytable的空标签，其中可以进行跨域配置。而不用新建vue.config.js文件进行配置。而且接口是/login而不是/api/login。

VUEX

就是数据仓库store，详见另一篇博客
VUEX-----store

函数防抖和节流

防抖：高频率触发的事件,在指定的单位时间内，只响应最后一次，如果在指定的时间在触发，则重新计算时间(后面触发的事件执行，替代了前面的事件)

//提交表单增加防抖
SubmitFrom:_.debounce(function(){
  this.$refs.ruleForm.validate((valid) => {
    if (valid) {
      var _this=this
      console.log(this.$store.getters.getUser.user_id),
        // 向后端发起请求，提交数据
        newBlog(this.editForm,{"Authorization": localStorage.getItem("token")})
        .then(function (response){
          if (response.data.data === true)
            _this.tips()
          _this.$router.push({
            path:'/blogs'
          })
        })
    } else {
      console.log('error submit!!');
      return false;
    }
  });
  console.log('submit!');
},1000),

节流：高频率触发的事件,在指定的单位时间内，只响应第一次(前面触发的执行前，忽略后面的事件)
通过js库lodash提供封装好的函数。
_.debounce(func, [wait=0], [options=])防抖
_.throttle(func, [wait=0], [options=])节流

优化

事件委派：将子元素的点击事件委派给父组件。

<el-timeline>
  <el-timeline-item :timestamp="blog.created" placement="top" v-for="blog in blogs" :key="blog">
    <el-card>
      <router-link :to="{name: 'BlogDetail', params: {blogId: blog.id}}">
        <h4>{{blog.title}}</h4>
      </router-link>
      <p>{{blog.description}}</p>
    </el-card>
  </el-timeline-item>
</el-timeline>

v-for循环多少次就要创建routerlink的组件实例，耗内存可能出现卡顿现象。如果采用编程式导航，每个a标签都绑定点击事件回调，同样会循环执行很多次回调。
采用事件委托只用执行一次。
事件委托后：

现在点击整片都会跳转，如何区分点击的博客。----------------利用自定义标签（必须前缀加data-，并且驼峰会被自动转为小写，解构时要注意）

<div class="block"  @click="toBlog">
 <el-timeline>
   <el-timeline-item :timestamp="blog.created" placement="top" v-for="blog in blogs" :key="blog">
     <el-card>
       <a>
         <h4 :data-blogId="blog.id">{{blog.title}}</h4>
       </a>
       <p>{{blog.description}}</p>
     </el-card>
   </el-timeline-item>
 </el-timeline>
</div>

toBlog(event){
 let element=event.target;
  //dataset获取自定义标签，解构出自定义标签值
  let {blogid}=element.dataset;
  console.log(element.dataset)
  this.$router.push({
    name:'BlogDetail',
    params:{
      blogId:blogid
    }
  })
}