vue + element 开发项目 浅总结

小白第一次做的东西，先根据代码进行浅浅的一波总结，后面想着再根据浏览器的历史记录搜的一些问题再总结一下。

1.在使用el-aside  el-menu侧边栏进行路由跳转的时候，多页面最好用一个公共的侧边栏，使用route.push跳转，如果不使用路由跳转而是直接在el-menu-item的index里进行路由名的跳转，会导致切换页面的时候反复create页面，如果是在一个后台页面里获取到ticket，有可能会导致ticket赋值为空。

<el-aside>
      <el-menu
        :default-active="'/productCopy'"
        class="el-menu-vertical-demo"
        background-color="#303133"
        text-color="#909399"
        active-text-color="#ffd04b"
        :router="true"
      >
        <el-menu-item index="/productCopy">
          <i class="el-icon-position"></i>
          <span slot="title">产品复制</span>
        </el-menu-item>
        <el-menu-item index="/productList">
          <i class="el-icon-document"></i>
          <span slot="title">产品列表</span>
        </el-menu-item>
      </el-menu>
    </el-aside>

2.一般是在created时获取页面数据，如遇到第一条那种情况，此时代码已经很难再拆分改动的情况下，判断获取到的ticket是否为空，如果一开始进入后台只能获取一次ticket，切换路由后再切回时，因为第一条埋下的隐患，ticket会被定义为undefined，系统提示就会报错为找不到ticket而数据获取失败等，此时可以借助vuex来实现。

store.js

//vuex创建的store.js
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

//准备actions对象——响应组件中用户的动作、处理业务逻辑
const actions = {}
//准备mutations对象——修改state中的数据
const mutations = {
  GETTICKET(state,value){
    state.ticket = value
  }
}
//准备state对象——保存具体的数据
const state = {
  ticket:''
}
   
//创建并暴露store
export default new Vuex.Store({
   	actions,
   	mutations,
   	state
})

index.vue   created() 

//这是在crested里的获取ticket值
var params = {};
      if (window.location.search.indexOf("?") == 0 && window.location.search.indexOf("=") > 1) {
        var paramArray = unescape(window.location.search).substring(1, window.location.search.length).split("&");
        if (paramArray.length > 0) {
          paramArray.forEach(function (currentValue) {
            params[currentValue.split("=")[0]] = currentValue.split("=")[1];
          });
        }
      }

    if(params.ticket){
      this.$store.commit('GETTICKET',params.ticket);
    }
    
    this.ticket  = params.ticket ? params.ticket :this.$store.state.ticket;

当然也可以不用赋值，直接使用vuex里储存的ticket就可以

3.由于我使用的是vue quill-editor富文本编辑器，在此富文本框中上传的图片格式默认为base64格式的，所以要对此进行处理，在mounted中拦截上传图片的事件，以及富文本自动获取焦点的问题，参考：Vue使用vue-quill-editor上传图片路径为服务器路径_howcoder的博客-CSDN博客，vue-quill-editor 自动获取焦点问题_程序开发猿的博客-CSDN博客_quill自动获取焦点

mounted() {
    if (this.$refs.myTextEditor) {
      //myTextEditor改成自己的
      this.$refs.myTextEditor.quill
        .getModule("toolbar")
        .addHandler("image", this.imgHandler);
      //这里初始化，劫持toolbar的image的handler方法，在mounted中处理
    }
      this.$refs.myTextEditor.quill.enable(false); //解决富文本自动聚焦
  },

在<quill-editor>处应加上input框获取数据

<quill-editor
            class="editor"
            ref="myTextEditor"
            v-model="parameters.productroot.productInfo.detail"
            :options="editorOption"
            @blur="onEditorBlur($event)"
            @focus="onEditorFocus($event)"
            @ready="onEditorReady($event)"
            @change="onEditorChange($event)"
            v-loading="editor_loading"
          >
          </quill-editor>

          <input
            type="file"
            hidden
            accept=".jpg,.png"
            ref="fileBtn"
            @change="handleChange"
          />

在methods中

 //quill富文本插入图片默认base64设置
    imgHandler(state) {
      if (state) {
        //触发input的单击 ，fileBtn换成自己的
        this.$refs.fileBtn.click();
      }
    },
    handleChange(e) {
      const files = Array.prototype.slice.call(e.target.files);
      if (!files) {
        return;
      }
      let form = new FormData();
      form.append("file", files[0]);
      //由于我的接口是base64上传到服务器的，需要转成base64，否则直接将form文件上传即可
      let reader = new FileReader();
      reader.readAsDataURL(files[0]);
      reader.onload = (e) => {
        //在此前已经封装了api
        API
          .savefile({
            imagesBase64: e.target.result,
            filetype: "image",
            fileName: "file.name",
            keyName: "keyName",
            ticket: this.ticket,
          })
          .then(({ data }) => {
            //这里设置为空是为了联系上传同张图可以触发change事件
            this.$refs.fileBtn.value = "";
            let selection = this.$refs.myTextEditor.quill.getSelection();
            //这里就是返回的图片地址，如果接口返回的不是可以访问的地址，要自己拼接
            let imgUrl = data.data[0].url;
            //获取quill的光标，插入图片
            this.$refs.myTextEditor.quill.insertEmbed(
              selection != null ? selection.index : 0,
              "image",
              imgUrl
            );
            //插入完成后，光标往后移动一位
            this.$refs.myTextEditor.quill.setSelection(selection.index + 1);
          })
          .catch((error) => {
            this.$message.error(error);
          });
      };
    },

ps：quill-editor里的问题我个人觉得是真的不少

4.有需求需要在查询或者点击到商品类目后进行展示，使用v-loading进行遮罩，这里需要用到获取el-select中的label值和value值，具体用到ref以及原生click事件详情见elementui学习笔记_南柯彡的博客-CSDN博客

5.当在接口中获取到的数据并不是所需要的对象数据的格式时，可以调用一个方法例如this.changeFormatCategories(data.data.categories,this.category_search);，再使用该方法转换数据

 changeFormatCategories(data, storageName, callback = "") {
      data.forEach((item) => {
        storageName.push({
          value: item.cate_id,
          label: item.name,
        });
      });
      callback && callback();
    },

6.可以在v-for里使用filter函数直接返回一个过滤出来的数组，也可以将其label值作为删除该属性的参数，如

<div v-for="(
                  item
                ) in this.parameters.productroot.productInfo.meta.filter(
                  (item) => {
                    return item.name != '可售卖地';
                  }
                )"
                :key="item.name"
              >
                <i class="el-icon-circle-close" @click="delBasicMeta(item.name)"></i>


//在delBasicMeta（）中
this.parameters.productroot.productInfo.meta.forEach((item,index)=>{
        if(item.name == delval){     
          this.parameters.productroot.productInfo.meta.splice(index,1)
        }
      })

其实最主要的大问题还在于图片的上传，详情页的图片替换，视频的上传等