# uctoo-vue-editor

**Repository Path**: rtdata01/uctoo-vue-editor

## Basic Information

- **Project Name**: uctoo-vue-editor
- **Description**: UCToo Vue Editor是一个可视化动态页面搭建独立项目。实践了全栈模型同构的理念，为低代码、无代码、可视化代码生成等开发需求提供了更加规范化的架构风格和高效率的开发基础设施。
- **Primary Language**: JavaScript
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 2
- **Created**: 2022-04-27
- **Last Updated**: 2022-04-27

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

## vue-json-schema-form 活动编辑器
当前项目实际为 [vue-json-schema-form demo项目](https://github.com/lljj-x/vue-json-schema-form/tree/master/packages/demo/demo-v2) 中活动编辑器对接UCToo开源项目管理后台的独立项目。  
开源项目地址[https://gitee.com/UCT/uctoo-vue-editor](https://gitee.com/UCT/uctoo-vue-editor)增加了本地帐号登录、UCToo应用市场帐号登录、扩展了多页面可视化配置等功能。  
提出全栈模型同构的理念，并采用[vuex-orm](https://github.com/vuex-orm/vuex-orm)、[Vuex ORM Axios](https://github.com/vuex-orm/plugin-axios) 技术选型进行了项目实现，完成了UCToo技术体系的SaaS共享数据模型规划。  
全栈模型同构可以很好的降低前后端数据状态同步的复杂度以及简化复杂业务逻辑的算法，使得前后端算法基本保持一致，为低代码、无代码、可视化代码生成等开发需求提供了更加规范化的架构风格和高效率的开发基础设施。  

![](https://gitee.com/UCT_admin/materials/raw/master/uctoo/lowcode/vueeditor.png)

## 使用
UCToo线上运营版本地址 https://vueeditor.uctoo.com ，帐号与 www.uctoo.com 帐号相同。

### 启动方法  
配置.env.development、.env.production和settings.js中的后台端口地址。如有www.uctoo.com 帐号，配置为https://serv.uctoo.com 可通过uctoo帐号登录。
```
# 安装，请使用 yarn
yarn

# 开发环境
yarn dev

# 浏览器访问
http://127.0.0.1:8800/vue-editor.html

# build
yarn build

```

### 后台启动方法  
后台功能包含在UCToo develop模块中，可独立安装部署UCToo开源项目[UCToo](https://gitee.com/uctoo/uctoo)已包含develop模块。
```
// 安装 composer 扩展
composer install --ignore-platform-reqs

// 安装后台, 按照提示输入对应信息即可
php think catch:install

// 启动后台（开发环境后台端口默认地址为http://127.0.0.1:8000）
php think run

```
生产环境请使用nginx等部署后端服务，或uctoo一键云原生部署等。

### 备注
> 为了和  [vue-json-schema-form demo项目](https://github.com/lljj-x/vue-json-schema-form/tree/master/packages/demo/demo-v2) 项目保持通用性。对依赖的 `demo-common` 做了以下处理，js中使用webpack 配置别名，css 使用postcss import插件配置path来兼容。

详细如下：
* webpack 配置 vue-config.js 添加别名，解决js中 import 'demo-common/xx'
```js
config.resolve.alias = {
    ...config.resolve.alias,
    'demo-common': path.resolve(__dirname, './src/demo-common'),
};
```

* postcss.config.js 配置post import plugin 添加path配置，解决css中 @import 'demo-common/xx'
```js
require('postcss-import')({
    path: ['src/']
})
```

### 构建
使用 vue cli 构建项目多entry形式，按文件目录自动查找entry，有兴趣可参见 `/scripts/entry.js` 文件

### 为何独立一份
[vue-json-schema-form](https://github.com/lljj-x/vue-json-schema-form) 为Monorepo，package 之间有相互依赖，由于会有新人不知如何抽出需要的独立package，
所以现在独立为一个单独的仓库，同时方便后续的更新。

## 产品架构  
1. 部分代码迁移自catchadmin前端项目[catch-admin-vue](https://github.com/JaguarJack/catch-admin-vue)，覆盖到获取用户登录token之后的功能。  
2. 其余功能通过采用[vuex-orm](https://github.com/vuex-orm/vuex-orm)、[Vuex ORM Axios](https://github.com/vuex-orm/plugin-axios)等新一代技术选型进行实现。（请参考相关文档）
开发者可比对不同编程模型在代码组织、算法实现、开发理念等方面的差异。
3. models中的前端模型与UCToo后台对应模型同构，接口对应一致。有利于后续可视化、自动化代码生成。也有利于前后端合作或全栈开发思路/算法一致。
4. vue_editor_pages表保存页面信息，vue_editor_items_config表保存页面控件配置信息。
5. 主要思路是在项目初始化时从后端接口获取数据，存入前端数据库，前端可视化配置等数据状态变化都在前端数据库操作，需要持久化保存至后端时，通过接口将前端数据库同步至后端。
6. 通过关联模型可以部分实现类似graphql的效果。

### Known Bugs  
1. 新增页面后，需要手动刷新一遍页面，否则直接切换到新页面进行配置，新页面itemsConfig的page_id参数初始化错误，导致保存至数据库会出错。
2. 多次切换页面，会导致页面必须包含的全部商品item自动累计增加多次。
3. 登录本地帐号时，首次数据加载貌似有点问题，登录后手动刷新页面可正常加载。  
4. 模态对话框遮罩层bug。  

### Road Map  
1. 实现EditorM.vue页面的功能，与Editor.vue基本一致。
2. 组件的后台可视化管理，即schema、uiSchema、formData、errorSchema等的可视化管理。  
3. 图片、文件等素材的CMS管理。  
4. 组件、页面配置等数据的共享机制。  
5. 目前仅对data.js中的接口进行了模型适配，如vue-json-schema-form项目采用vuex-orm重构，可有效提高对接后台效率和简化算法。
6. playground、schema生成器与UCToo产品对接。

### 参考资料
[vue-json-schema-form](https://github.com/lljj-x/vue-json-schema-form)  
[uctoo](https://gitee.com/uctoo/uctoo)  
[catchadmin](https://catchadmin.com/)   
[vuex-orm](https://github.com/vuex-orm/vuex-orm)  
[Vuex ORM Axios](https://github.com/vuex-orm/plugin-axios)