后台管理富文本深拷贝

最新推荐文章于 2024-03-11 09:31:22 发布

Tiam-2016

最新推荐文章于 2024-03-11 09:31:22 发布

阅读量226

点赞数

文章标签： vue

本文链接：https://blog.csdn.net/Y_Tiam/article/details/116455898

版权

本文介绍了前端文件上传的实现，重点讲解了el-upload组件的使用，包括配置请求头、处理上传成功后的数据以及注意事项。同时，详细展示了如何集成Vue-Quill-Editor富文本编辑器，包括安装、引入和解决编辑器的样式及功能问题。最后，给出了提交商品信息到后台的数据结构和处理思路。

摘要由CSDN通过智能技术生成

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基本类型赋值都属于深拷贝，也就是说改变一个变量的值，不会影响另一个变量的值
    1. javaScript对象拷贝：拷贝的是地址而不是里面的值
      
      如何实现对象的深拷贝
      
      第一种：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