Vue 轻松实现可视化店铺装修

lljj_x
8,552 阅读6分钟

可视化店铺装修可以归属于可视化页面配置，比如我们常见的可视化活动配置、H5页面编辑配置、店铺装修这类，主要交互都是通过拖动页面组件实现快速搭建一个页面。

接下来我们以实现一个 店铺装修 的需求来解决此类场景。

前面发布过一篇文章 Vue 前端可视化活动编辑器，主要是做功能的介绍，感兴趣的可以去看看，这里主要介绍如何实现。

需求背景

需求大致就是要实现一个类似淘宝店铺装修的需求，允许用户选择需要的页面组件后拖入，然后配置好数据保存成功即可预览或者发布自己的店铺页面，页面的组件支持扩展。

这里举个小栗子：（比如下图，左侧拖入需要的组件配置数据即可）

整理分析

按照上面的需求，这里大致需要实现几个功能：

  1. 首先需要实现对页面组件库的管理，支持用户使用时选择配置（支持最多配置数、是否置顶置底等）
  2. 需要一个容器来承载用户拖入的组件，支持（上下移动、拖动排序、删除等）
  3. 按实际业务实现一个个页面组件，包含一个 View组件 做显示和一个 Form组件 配置数据。
  4. 每次业务新增功能只需在组件库新增一个组件即可

针对上面：

  • 功能1 需要定义一套自己的数据格式，来描述对应的组件和可配置信息即可。
  • 功能2 复杂点主要在要实现拖动添加或者排序等，可以使用 drag 事件来自己实现，或者选择成熟的开源库。
  • 功能3 View组件 需要结合业务这个省不掉，但如果每个View组件都手写一个 Form组件 来配置后期的维护会比较麻烦，这里需要考虑优化方案。

结合上面，功能点 1 2 都主要是在实现整个页面编辑器上面，这个属于 一劳永逸 的事情，做好了之后只需要在有新的组件时开发组件配置进去即可。

但第 3 点随着业务的增长需要开发的组件会越来越多，而组件的配置表单、数据校验这在后面的维护中会是一个很大的工作量并且非常枯燥繁琐。

针对上面的问题大家很容易想到可以一个通过数据配置来生成表单，那这里的方案也是通过配置来生成，只是这个配置是基于 JSON Schema 规范的数据结构。

JSON Schema 的好处比较明显因为属于标准规范，各大语言都有对应的校验库，方便跨端校验。基于此那我们就需要一个方案来通过JSON Schema 生成对应的Form表单，github上已有一些现用的开源库不过并没有太合适自己的项目的，所以自己写了一个，基于 ElementUi 框架。

注：JSON Schema 简单理解就是一个专门用来描述JSON数据结构的规范，可以用来校验JSON数据。

解决方案

基于上面的分析梳理，这里整理下我们的解决方案。

首先通过一份 数据配置 来管理支持配置的组件库，使用 vuedraggable 来实现拖动，页面支持动态渲染用户当前配置的组件，点击组件的时候出现组件的配置表单，这个表单我们通过 JSON Schema 来生成，并且可以在发布代码到生产环境时把我们的 JSON Schema 推送到服务端，让服务端也可以使用 JSON Schema 来做数据校验。

** 下面来演示下页面支持配置 轮播图组件 和 纯文本组件 的代码实现 **

  • 轮播图 纯文本 数据配置如下

// 轮播图
import componentPackCarouselImg from '../viewComponentsM/CarouselImg';

// 纯文本
import componentPackText from '../viewComponentsM/Text';

const components = [
    {
        groupName: '图文类',
        componentList: [{
            title: '轮播图',
            maxNum: 2,
            icon: 'el-icon-picture',
            componentPack: componentPackCarouselImg
        }, {
            title: '纯文本',
            maxNum: 20,
            icon: 'el-icon-notebook-1',
            componentPack: componentPackText
        }]
    }
];

componentPackText 内容如下：（注：componentPackCarouselImg类似）

import propsSchema from './propsSchema.json';
import View form './View.vue';

export default {
    propsSchema,
    View
};

propsSchema.json 文本组件的 JSON Schema 配置，包含文本内容和颜色两个字段，代码如下：

  {
      "$schema": "http://json-schema.org/draft-07/schema#",
      "id": "Text",
      "title": "纯文本组件",
      "description":"纯文本输入组件，用于在页面配置一条文字信息" ,
      "type": "object",
      "required": ["text"],
      "properties": {
          "text": {
              "title": "文字",
              "type": "string"
          },
          "textColor": {
              "title": "选择文字颜色",
              "type": "string",
              "default": "#ff0132"
          }
      }
  }
  • 页面模块列表显示和数据回填

首先 JSON Schema 都必须配置唯一 id，用来标识当前组件，用户添加的组件列表使用 component 组件来动态渲染。保存数据包含了用户配置和当前的 id，页面显示时再通过id匹配回对应的组件即可。

如下组件只需要接受一个 formData 参数，formData 由表单保存后提交过来。

<component
    :is="item.componentViewName"
    :form-data="item.componentValue"
>
</component>

保存数据结构大致如下：（name 对应前面的唯一 id，value 为用户配置的数据）

[
	...,
    {
        name: 'Text', // 纯文本组件
        value: {
            txt: '推荐商品',
            txtColor: '#e46028'
        }
    },
]

综上，当我们需要添加一个新的页面组件时，只是需要新增一份 JSON Schema 来描述新增组件的数据结构，保证id唯一，同时实现一个View组件来做展示，然后就大功告成。由于我们已经在发布前把 JSON Schema 文件推给了服务器端，所以也不用担心服务端数据校验了（这里只是数据结构的校验，但如果涉及业务数据正确性还是需要服务端校验）。

最后

基于以上梳理的方法做了一份基础版的 店铺装修 前端代码。

仓库包含三个项目：

  • packages/lib - vjsf(vue-json-schema-form) 核心库，基于 JSON Schema 生成表单的Vue组件
  • packages/docs - vjsf 文档
  • packages/demo - 基于 vjsf 的应用，包含一个 店铺装修页面 和一个 form表单展示编辑器

目前的版本做了升级，简化了需要的配置内容和 Ui 样式调整等，主要包含如下：

  • 新增组件配置最少只需要 JSON Schema，和组件展示的 View组件，简化了其它不必须的配置
  • 调整了整体的样式
  • 做了一个移动端的配置页面
  • vjsf 表单ui信息和校验错误个性配置支持单独参数或者直接配置在schema中

店铺装修移动端页面配置文件在：packages/demo/src/vue-editor/views/editor/config/mTools.js，需要新增只需按如上介绍的格式在该文件配置新的组件即可，分分钟即可轻松添加到组件库。

最后欢迎大家Star和提出意见 。

avatar
文章
阅读
粉丝