后台管理 富文本 深拷贝

1.添加商品-文件上传

1.1 el-upload不走axios请求，el-upload自身封装了ajax请求

1.2 文件上传配置请求头

1.3 上传成功后返回的格式：

{
    "data": {
        "tmp_path": 图片的临时路径,
        "url":图片上传到服务器上的路径
    },
    "meta": {
        "msg": "上传成功",
        "status": 200
    }
}

1.4 配置文件上传两个注意事项

1.action属性必须是绝对路径
2.手动配置请求头headers

完整代码：
<el-upload
  action="http://www.ysqorz.top:8888/api/private/v1/upload"
  :on-preview="handlePreview"
  :on-remove="handleRemove"
  :on-success="handleSuccess"
  :headers="headersObj"
  list-type="picture"
>
<el-button size="small" type="primary">点击上传</el-button>
</el-upload>

1.5 显示图片预览

项目上线后，才能得到真实的线上图片地址，本地不能演示

核心思路：通过上传成功后，将url赋值给data中的一个变量，再将变量传给对话框中img src=“上传后返回的url”

2.富文本编辑器：

Vue-Quill-Editor

地址：https://www.npmjs.com/package/vue-quill-editor

使用步骤：
1.安装
	npm install vue-quill-editor --save
2.引入
  //引入富文本编辑器
  import VueQuillEditor from 'vue-quill-editor'

  //引入vue-quill-editor相关样式
  import 'quill/dist/quill.core.css'
  import 'quill/dist/quill.snow.css'
  import 'quill/dist/quill.bubble.css'

  Vue.use(VueQuillEditor)
3.在需要的组件中加载富文本编辑器
	<quill-editor v-model="addForm.goods_introduce"></quill-editor>
	
	解决富编辑器高度问题
		.ql-editor {
  		height: 300px !important;
		}
	解决富文本编辑器不能加粗倾斜的问题,重置字体样式
	
	* {
		/* font-size: 100%;
    font: inherit;
    vertical-align: baseline;
    font-weight:normal;
    font-style:normal; */
	}
	
 

3.提交所有商品信息到后台：

{
  "goods_name":"test_goods_name2",
  "goods_cat": "1,2,3", //数组转换成字符串
  "goods_price":20,
  "goods_number":30,
  "goods_weight":40,
  "goods_introduce":"abc",
  "pics":[
    {"pic":"/tmp_uploads/30f08d52c551ecb447277eae232304b8"}
    ],
  "attrs":[
     //包括静态参数和动态参数组成的数组
    {
      "attr_id":15,
      "attr_value":"ddd"
    },
    {
      "attr_id":15,
      "attr_value":"eee"
    }
    ]
}

• 添加商品思路：

  • 对整体表单进行预检验

  • 对表单每项数据进行处理 例如：商品分类转换在字符串列表，商品参数attrs包括动态和表态参数处理

    • 对addForm对象进行深拷贝

      深拷贝与浅拷贝的区别？

      可以简单理解：

      1.javaScrip基本类型赋值都属于深拷贝，也就是说改变一个变量的值，不会影响另一个变量的值

      2. javaScript对象拷贝：拷贝的是地址而不是里面的值

         1. 如何实现对象的深拷贝

            第一种：JSON.parse(JSON.stringify(要转换的对象))

            第二种：用递归实现

            function DeeoCopy(obj) {
            	if(typeof obj!=='object') return
            	
            	//定义一个新变量来存放拷贝出来的数据
            	var newObj=obj instanceof Array ? []:{}
            	
            	 for(var key in obj) {
            	   if(obj.hasOwnProperty(key)) {
            	   
            	     newObj[key]=typeof obj[key]==='object' ?  DeeoCopy(obj[key]) :obj[key]
            	   
            	   
            	   }
            	 }
            	 
            	 return newObj
            }
            

            第三种：利用第三方工具库实现 例如：lodash