徐烜 / bsth-ebus-h5_editor · Commits

Commit 55504bbab590c45af426a6e1140939e8d66690f6

Authored by ly525
1 parent cf85ecf1

docs: add back-end intergration; 增加其它后端语言集成说明

Inline Side-by-side
Showing 5 changed files with 617 additions and 28 deletions
README.md
  View file @55504bb
... ... @@ -160,4 +160,4 @@ wget -qO- https://raw.githubusercontent.com/ly525/luban-h5/dev/deploy/ubuntu-ins
160 160 3. 存储：[Sqlite](https://www.sqlite.org/)
161 161  
162 162 #### 如何贡献
163   -所有合理的改动、优化、修正，新的组件，或者文档的修正、更新 相关的提交都会被接收
  163 +所有合理的改动、优化、修正，新的组件，或者文档的修正、更新 相关的提交都会被接受
... ...
docs/README.md
  View file @55504bb
... ... @@ -3,22 +3,95 @@ home: true
3 3 actionText: Get Started →
4 4 actionLink: /en/getting-started/introduction
5 5 features:
6   - - title: 表单提交
7   - details: 支持表单组件，即时倾听用户反馈，可以在后台查看和下载用户数据
8   - - title: 轻松建站
9   - details: 丰富的组件系统、支持可视化编辑、自由拖拽排版、实时预览、在线访问
10   - - title: 导入 PSD
11   - details: 支持一键导入PSD，将设计师的创意转换为 H5，快速查看效果、反馈、上线
  6 + - title: Form Collection
  7 + details: Collect and organize information.Get answers from users fast.
  8 + - title: Easy to set up
  9 + details: Integrating dynamic effects, music, video and images, users can easily achieve Html5
  10 + - title: PSD to HTML5
  11 + details: Upload PSD, and parse it to HTML5, just seconds
12 12 footer: GPL 3.0 Licensed | Copyright © 2019-present
13 13 ---
14 14  
15   -## 社区与交流群
16   -#### 论坛地址：[鲁班H5-社区](https://support.qq.com/products/93432/)
17   -#### 交流群
18   -| 钉钉群 | 微信公众号 | 微信 |
19   -|---|---|---|
20   -| <img src="https://user-images.githubusercontent.com/12668546/61447488-a379f700-a983-11e9-9956-139352a2585d.png" width="200" />| <img src="https://user-images.githubusercontent.com/12668546/65471913-ab827580-dea3-11e9-919c-870c9605c60f.png" width="200" /> | <img src="https://user-images.githubusercontent.com/12668546/66585418-5cce1e80-ebb9-11e9-91c0-56f658f09e27.png" width="200" /> <br />请备注：鲁班H5交流|
21 15  
22   ----
  16 +<p align="left">
  17 +<a href="https://github.com/ly525/luban-h5/releases"><img alt="GitHub release (latest by date)" src="https://img.shields.io/github/v/release/ly525/luban-h5"></a>
  18 +</p>
  19 +
  20 +### What's LuBan-H5?
  21 +> LuBan-H5 is a mobile page builder based on Vue.js, which is similar with [Amolink](www.amolink.com) or [eqx](http://www.eqxiu.com)(it's a chinese website, you may need to translate the page). It also supports parsing PSD file to HMTL5 Page
  22 +
  23 +<img src="https://s2.ax1x.com/2019/10/11/u7WzUx.gif" style="margin: 10px;" width="80%" />
  24 +
  25 +# Quick Start
  26 +## Option 1
  27 +- if you are familiar with `Node`, `Yarn`(and already installed), please follow the commands to start quickly:
  28 +
  29 +```bash
  30 +git clone https://github.com/ly525/luban-h5
  31 +cd luban-h5 # project root path
  32 +
  33 +# back-end
  34 +cd back-end/h5-api && yarn && yarn dev
  35 +
  36 +# front-end
  37 +cd front-end/h5 && yarn && yarn build:engine && yarn dev
  38 +
  39 +
  40 +#!en: default database is sqlite3(db location: h5-api/.tmp/data.db)
  41 +
  42 +# visit http://localhost:1337/admin to config the api permissions
  43 +
  44 +# read more here: https://ly525.github.io/luban-h5/en/getting-started/quick-start.html#setup-backend
  45 +```
  46 +
  47 +## Option 2
  48 +
  49 +```shell
  50 +docker pull ubuntu
  51 +docker run -it -p 1234:80 -p 1235:1337 -v `pwd`:/app ubuntu
  52 +apt update && apt install -y wget git
  53 +wget -qO- https://raw.githubusercontent.com/ly525/luban-h5/dev/deploy/ubuntu-install.sh | bash
  54 +
  55 +# after the installation finished
  56 +# 1. visit ：http://localhost:1235/admin, add your admin account
  57 +# 1.2 config the api permissions, see more here：https://ly525.github.io/luban-h5/en/getting-started/quick-start.html#_2-something-important
  58 +
  59 +# 2. front-end
  60 +# 2.1 visit https://localhost:1235 to get the front-end of luban-h5
  61 +```
  62 +
  63 +## Links
  64 +- Documents
  65 + * [Chinese online document](https://ly525.github.io/luban-h5/zh/)
  66 + * [English](https://ly525.github.io/luban-h5/en/getting-started/introduction.html)
  67 +
  68 +- Source Code
  69 + * GitHub: https://GitHub.com/ly525/luban-h5
  70 + * [Gitee(China Mirror)](https://Gitee.com/ly525/luban-h5)
  71 +
  72 +- Community
  73 + * [Gitter](https://gitter.im/luban-h5/community)
  74 + * [吐个槽：For Chinese Users](https://support.qq.com/product/93432)
  75 +
  76 +
  77 +- Ecosystem
  78 + * back-end integration
  79 + * [Strapi.js(official Node.js backend API for luban-h5)](/luban-h5/tree/dev/back-end/h5-api)
  80 + * [Spring Boot API Demo](https://github.com/luban-h5/Spring-Boot-API-for-editor)
  81 +
  82 + * Custom components
  83 + * [Rapid development of custom component scaffolding](https://github.com/luban-h5/vue-cli-plugin-lbhc)
  84 +
  85 + * official components library
  86 + * [Slide](https://github.com/luban-h5-components/lbp-slide)
  87 + * [Normal Button(different from form-button)](https://github.com/luban-h5-components/lbc-button)
  88 +
  89 + * Support Component/Auxiliary Component
  90 + * Image Gallery: For Quick Selection of images from the gallery
  91 + * [Text alignment-Repo(for Button text alignment)](https://github.com/luban-h5/lbs-text-align)
  92 +
  93 +Read more here [Online English Document](https://ly525.github.io/luban-h5)
23 94  
24   -> 如果有问题，欢迎大家到[鲁班H5-社区](https://support.qq.com/products/93432/) 交流，在这里可以提问、反馈意见和建议，与作者直接互动
  95 +## Community
  96 +1. [Gitter](https://gitter.im/luban-h5/community)
  97 +2. [Github Issues](https://github.com/ly525/blog/issues/new)
... ...
docs/zh/README.md
  View file @55504bb
1   -> 欢迎大家到[鲁班H5-社区](https://support.qq.com/products/93432/) 交流，在这里可以提问、反馈意见和建议，与作者直接互动
  1 +---
  2 +home: true
  3 +actionText: Get Started →
  4 +actionLink: /zh/getting-started/introduction
  5 +features:
  6 + - title: 表单提交
  7 + details: 支持表单组件，即时倾听用户反馈，可以在后台查看和下载用户数据
  8 + - title: 轻松建站
  9 + details: 丰富的组件系统、支持可视化编辑、自由拖拽排版、实时预览、在线访问
  10 + - title: 导入 PSD
  11 + details: 支持一键导入PSD，将设计师的创意转换为 H5，快速查看效果、反馈、上线
  12 +footer: GPL 3.0 Licensed | Copyright © 2019-present
  13 +---
  14 +
  15 +[![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](http://makeapullrequest.com)
  16 +[![Docs](https://github.com/ly525/luban-h5/workflows/docs/badge.svg)](https://ly525.github.io/luban-h5/)
  17 +[![Release](https://img.shields.io/github/v/release/ly525/luban-h5)](https://github.com/ly525/luban-h5/workflows/docs)
  18 +[![Gitter](https://img.shields.io/gitter/room/luban-h5/community)](https://gitter.im/luban-h5/community)
  19 +[![GitHub issues](https://img.shields.io/github/issues/ly525/luban-h5)](https://github.com/ly525/luban-h5/issues)
  20 +[![GitHub stars](https://img.shields.io/github/stars/ly525/luban-h5.svg?style=social&label=Star&maxAge=2592000)](https://GitHub.com/ly525/luban-h5/stargazers/)
  21 +[![码云](https://img.shields.io/badge/Gitee--yellow.svg?style=social&logo=data:image/svg+xml;base64,PHN2ZyB0PSIxNTc0ODM3MTM4ODM3IiBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjE3NzAiICAgICB3aWR0aD0iMTYiIGhlaWdodD0iMTYiPiAgICA8cGF0aCBkPSJNODkxIDQyOC44SDQ2NS44Yy0yMC40IDAtMzcgMTYuNS0zNyAzN3Y5Mi40YzAgMjAuNCAxNi41IDM3IDM3IDM3aDI1OC45YzIwLjQgMCAzNyAxNi42IDM3IDM3djE4LjRjMCA2MS4zLTQ5LjcgMTEwLjktMTEwLjkgMTEwLjlIMjk5LjRjLTIwLjQgMC0zNy0xNi42LTM3LTM3VjM3My4yYzAtNjEuMyA0OS43LTExMC45IDExMC45LTExMC45aDUxNy42YzIwLjQgMCAzNy0xNi41IDM3LTM3bDAuMS05Mi4zYzAtMjAuNC0xNi41LTM3LTM3LTM3SDM3My4zQzIyMC4yIDk2IDk2IDIyMC4yIDk2IDM3My4zVjg5MWMwIDIwLjQgMTYuNiAzNyAzNyAzN2g1NDUuNEM4MTYuMiA5MjggOTI4IDgxNi4zIDkyOCA2NzguNFY0NjUuOGMwLTIwLjQtMTYuNi0zNy0zNy0zN3oiICAgICAgICAgIGZpbGw9IiNkODFlMDYiIHAtaWQ9IjE3NzEiPjwvcGF0aD48L3N2Zz4=)](https://gitee.com/ly525/luban-h5.git)
  22 +
  23 +## 快速体验
  24 +> 以下两种方式，任选其中一种即可
  25 +
  26 +#### 一、本地安装了 Node、Yarn
  27 +```bash
  28 +git clone https://github.com/ly525/luban-h5
  29 +cd luban-h5 # 项目根目录
  30 +
  31 +# 后端
  32 +cd back-end/h5-api && yarn && yarn dev
  33 +
  34 +# 前端
  35 +# 新开一个终端，在项目根目录执行如下命令
  36 +cd front-end/h5 && yarn && yarn build:engine && yarn dev
  37 +```
  38 +- 按照提示，在浏览器中访问终端中提示的 URL 即可
  39 +- 更多细节，请参照 [鲁班H5-在线文档](https://ly525.github.io/luban-h5/zh/) 的 [`快速开始`](https://ly525.github.io/luban-h5/zh/getting-started/quick-start.html) 章节，进行配置即可
  40 +
  41 +
  42 +#### 二、熟悉 Docker
  43 +> 使用官方提供的 [***一键安装脚本***](https://raw.githubusercontent.com/ly525/luban-h5/dev/deploy/ubuntu-install.sh)，简化安装步骤，在本地通过使用 `Docker+Ubuntu 镜像`，即可`快速安装+体验` 鲁班H5
  44 +
  45 +> [快速体验-完整文档](https://github.com/ly525/luban-h5/wiki/Quick-Start(%E5%BF%AB%E9%80%9F%E4%B8%8A%E6%89%8B%E7%AF%87)%EF%BC%9ADocker-Ubuntu-Image-for-Quick-Local-Dev)，简而言之：
  46 +
  47 +```shell
  48 +docker pull ubuntu
  49 +docker run -it -p 1234:80 -p 1235:1337 -v `pwd`:/app ubuntu
  50 +# 使用清华大学 Ubuntu 软件镜像
  51 +sed -i 's/archive.ubuntu.com/mirrors.tuna.tsinghua.edu.cn/g' /etc/apt/sources.list
  52 +apt update && apt install -y wget git
  53 +wget -qO- https://raw.githubusercontent.com/ly525/luban-h5/dev/deploy/ubuntu-install.sh | bash
  54 +
  55 +# 安装完成之后
  56 +# 1. visit ：http://localhost:1234/admin，自定义配置账号密码，登录即可
  57 +# 1.2 配置相关权限，文档参见：https://ly525.github.io/luban-h5/zh/getting-started/quick-start.html#%E5%90%8E%E7%AB%AF%E7%8E%AF%E5%A2%83%E6%90%AD%E5%BB%BA
  58 +
  59 +# 2. 鲁班前端
  60 +# 2.1 宿主机访问 「鲁班前端」：localhost:1234, 即可看到鲁班的前端
  61 +```
  62 +
  63 +
  64 +
  65 +
  66 +### 🔗Links/相关链接
  67 + | 源码 | 文档 | 教程 | 社区 |
  68 +| ------ | -------- | ------ | ------ |
  69 +| [GitHub](https://github.com/ly525/luban-h5) | [中文文档](https://ly525.github.io/luban-h5/zh/) | [视频-快速开始(哔哩哔哩)](https://space.bilibili.com/121039466/channel/detail?cid=94066) | [中文社区/论坛](https://support.qq.com/product/93432)
  70 +| [Gitee (国内镜像)](https://gitee.com/ly525/luban-h5) | [English Docs](https://ly525.github.io/luban-h5/en/getting-started/introduction.html) | 自定义组件教程(WIP) | [Gitter](https://gitter.im/luban-h5/community) |
  71 +| | [README(En)](./README.en.md) | [核心实现原理](https://juejin.im/post/5d6df27a6fb9a06b2d77eef9) | |
  72 +
  73 +
  74 +### 🔗生态
  75 +| 后端集成 | 官方组件库 | 支撑/辅助组件 | 自定义组件 | RoadMap |
  76 +|------------------------------------------------------------------------------------------------|-----------------------------------------------------------|----------------------------------------------------|-------------------------------------------------------------------|------------------------------------------------------------|
  77 +| [Strapi.js (官方后端API)](http://localhost:8081/luban-h5/zh/ecosystem/#%E9%B2%81%E7%8F%ADh5%E7%94%9F%E6%80%81%E5%BB%BA%E8%AE%BE) | [轮播图](https://github.com/luban-h5-components/lbp-slide) | 图片库 | [自定义组件开发脚手架](https://github.com/luban-h5/vue-cli-plugin-lbhc) | [RoadMap/开发计划](https://github.com/ly525/luban-h5/projects) |
  78 +| [SpringBoot2-JPA](https://github.com/luban-h5/spring-boot-api-for-editor) | [普通按钮](https://github.com/luban-h5-components/lbc-button) | [文本对齐](https://github.com/luban-h5/lbs-text-align) | [自定义组件开发教程](https://github.com/luban-h5/vue-cli-plugin-lbhc/wiki) | |
  79 +| [SpringBoot2-Mybatis-plus](https://github.com/luban-h5/springboot2-mybatis-plus-api-for-luban) | | | 视频教程(WIP) | |
  80 +
  81 +
  82 +
  83 +目录
  84 +- [鲁班H5是什么？](#%E9%B2%81%E7%8F%ADh5%E6%98%AF%E4%BB%80%E4%B9%88)
  85 +- [Demo](#Demo)
  86 +- [Features](#features)
  87 +- [快速开始](#%E5%BF%AB%E9%80%9F%E5%BC%80%E5%A7%8B)
  88 +- [更多说明](#%E6%9B%B4%E5%A4%9A%E8%AF%B4%E6%98%8E)
  89 + * [前端组件说明](#%E5%89%8D%E7%AB%AF%E7%BB%84%E4%BB%B6%E8%AF%B4%E6%98%8E)
  90 + * [技术栈（当前）](#%E6%8A%80%E6%9C%AF%E6%A0%88%E5%BD%93%E5%89%8D)
  91 +- [👨🏻‍💻👩🏻‍💻交流群](#%E4%BA%A4%E6%B5%81%E7%BE%A4)
  92 +
  93 +### 鲁班H5是什么？
  94 +鲁班H5是基于Vue2.0开发的，通过拖拽的形式，生成页面的工具，类似[易企秀](http://www.eqxiu.com/)、[百度 H5](https://h5.baidu.com) 等工具
  95 +
  96 +
  97 +### Demo
  98 +> [在线访问地址](https://h5.luban-h5.com)
  99 +
  100 +<img src="https://s2.ax1x.com/2019/10/11/u7WzUx.gif" style="margin: 10px;" width="60%" />
  101 +
  102 +
  103 +### 快速开始
  104 +请参照 [鲁班H5-在线文档](https://ly525.github.io/luban-h5/zh/) 的 `快速开始` 章节
  105 +
  106 +
  107 +### 交流群
  108 +
  109 +| 钉钉群 | 微信公众号 | 微信 |
  110 +|---|---|---|
  111 +| <img src="https://user-images.githubusercontent.com/12668546/61447488-a379f700-a983-11e9-9956-139352a2585d.png" width="200" />| <img src="https://user-images.githubusercontent.com/12668546/65471913-ab827580-dea3-11e9-919c-870c9605c60f.png" width="200" /> | <img src="https://user-images.githubusercontent.com/12668546/66585418-5cce1e80-ebb9-11e9-91c0-56f658f09e27.png" width="200" /> <br />请备注：鲁班H5交流|
  112 +
2 113  
3   -## 鲁班H5
4   -鲁班H5是基于Vue2.0开发的，通过拖拽+配置的形式，生成页面的工具。
  114 +#### 技术栈（当前）
  115 +1. 前端：[Vue.js](https://vuejs.org/v2/guide/)
  116 +2. 后端：[Strapi](https://strapi.io/)
  117 +3. 存储：[Sqlite](https://www.sqlite.org/)
5 118  
6   -<img src="https://s2.ax1x.com/2019/10/11/u7WzUx.gif" height="290" />
7   -<!-- ### 鲁班H5是什么？ -->
  119 +## 如何贡献
  120 +所有合理的改动、优化、修正，新的组件，或者文档的修正、更新 相关的提交都会被接受
8 121  
9   -<!-- {p:.flex.justify-around} -->
  122 +## 社区与交流群
  123 +#### 论坛地址：[鲁班H5-社区](https://support.qq.com/products/93432/)
  124 +#### 交流群
  125 +| 钉钉群 | 微信公众号 | 微信 |
  126 +|---|---|---|
  127 +| <img src="https://user-images.githubusercontent.com/12668546/61447488-a379f700-a983-11e9-9956-139352a2585d.png" width="200" />| <img src="https://user-images.githubusercontent.com/12668546/65471913-ab827580-dea3-11e9-919c-870c9605c60f.png" width="200" /> | <img src="https://user-images.githubusercontent.com/12668546/66585418-5cce1e80-ebb9-11e9-91c0-56f658f09e27.png" width="200" /> <br />请备注：鲁班H5交流|
10 128  
11 129 ---
12   -:::
13 130  
14   -<Vssue issueId="14" />
  131 +> 如果有问题，欢迎大家到[鲁班H5-社区](https://support.qq.com/products/93432/) 交流，在这里可以提问、反馈意见和建议，与作者直接互动
... ...
docs/zh/ecosystem/README.md
  View file @55504bb
... ... @@ -3,11 +3,9 @@
3 3  
4 4 鲁班H5也希望向这些优秀的项目学习，构建自己的社区生态，让开发者能够借助社区的力量，更好的完成自己的需求。
5 5  
6   -## 鲁班H5生态建设
7 6 > WIP: working in progress/开发中
8   -
9   -### 前端
10   -1. 更多的营销组件(抽奖、滚动信息、地图等等)
  7 +## 前端
  8 +1. 更多的自定义营销组件(抽奖、滚动信息、地图等等)
11 9 - 当鲁班提供的组件无法满足某些定制化的业务需求的时候，开发者可能需要开发适合实际业务的组件
12 10 - 我们提供了[组件开发脚手架](https://github.com/luban-h5/vue-cli-plugin-lbhc)，用来辅助开发者进行快速开发组件。开发完成之后，可以发布到 npm 上，在鲁班后台做一些简单的配置，就可以使用自定义组件了
13 11 - 开发自定义组件，请参见 [***🔌插件/自定义组件开发*** ](/zh/plugin-development/)章节
... ... @@ -24,7 +22,7 @@
24 22 3. 网易云音乐年终总结
25 23  
26 24  
27   -### 后端
  25 +## 后端
28 26 目前鲁班H5的后端是基于 Node.js 写的，社区的很多小伙伴反馈，希望能够提供 Spring Boot 或者 PHP 等其它语言驱动的后端API。因为精力有限，我们提供了如下的解决方案，来尝试解决这个需求：
29 27 1. 提供[基于 Swagger UI 的后端API 文档](https://h5.luban-h5.com/documentation/)，小伙伴只要参照参照 API 文档，使用 Spring Boot 或者 其它语言实现相同的API即可
30 28 ![image](https://user-images.githubusercontent.com/12668546/73250033-04b33a80-41f1-11ea-9688-96fe03dccbbe.png)
... ...
docs/zh/ecosystem/backend-intergration.md 0 → 100644
  View file @55504bb
  1 +# 后端集成说明
  2 +
  3 +## 需求
  4 +- 将鲁班H5 编辑器后端模块 由Node.js  换成 Java(Spring Boot)/PHP 等其它后端语言
  5 +
  6 +## 解决方案
  7 +> 目前鲁班H5的后端是基于 Node.js 写的，社区的很多小伙伴反馈，希望能够提供 Spring Boot 或者 PHP 等其它语言驱动的后端API。因为精力有限，我们提供了如下的解决方案，来尝试解决这个需求：
  8 +1. 提供[基于 Swagger UI 的后端API 文档](https://h5.luban-h5.com/documentation/)，小伙伴只要参照参照 API 文档，使用 Spring Boot 或者 其它语言实现相同的API即可
  9 +![image](https://user-images.githubusercontent.com/12668546/73250033-04b33a80-41f1-11ea-9688-96fe03dccbbe.png)
  10 +
  11 +2. 社区有小伙伴贡献了基于 Spring Boot 的API项目，如下，大家可以根据自己的需求，跟进这两个项目，非常欢迎提 PR 或 相关 issue：
  12 + - [springboot2-jpa-api-for-luban](https://github.com/luban-h5/springboot2-jpa-api-for-luban) ![GitHub stars](https://img.shields.io/github/stars/luban-h5/springboot2-jpa-api-for-luban.svg?style=social&label=Star&maxAge=2592000) ![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)
  13 + - [springboot2-mybatis-plus-api-for-luban](https://github.com/luban-h5/springboot2-mybatis-plus-api-for-luban) ![GitHub stars](https://img.shields.io/github/stars/luban-h5/springboot2-mybatis-plus-api-for-luban.svg?style=social&label=Star&maxAge=2592000) ![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)
  14 +
  15 +- WIP: Working in Progress 迭代中
  16 +- 版权声明：鲁班H5 版权所有，禁止任何形式的转载和抄袭，侵权必
  17 +
  18 +## 贡献代码或自行开发
  19 +### 前提准备
  20 +
  21 +1. 了解鲁班H5 编辑器的后端 Model
  22 +1. 了解鲁班H5 编辑器的后端 接口
  23 +
  24 +---
  25 +
  26 +
  27 +
  28 +## 数据库表/Table(Model/Entity class) + 字段说明
  29 +
  30 +### Work 表：H5 作品
  31 +
  32 +##### 建表语句
  33 +```sql
  34 +DROP TABLE IF EXISTS `work`;
  35 +CREATE TABLE `work` (
  36 + `id` bigint(20) NOT NULL AUTO_INCREMENT,
  37 + `title` varchar(255) NOT NULL COMMENT '标题',
  38 + `description` longtext COMMENT '描述',
  39 + `cover_image_url` longtext,
  40 + `pages` json DEFAULT NULL,
  41 + `publish` tinyint(1) NOT NULL DEFAULT '0',
  42 + `template` tinyint(1) NOT NULL DEFAULT '0',
  43 + `created_at` datetime DEFAULT CURRENT_TIMESTAMP COMMENT '创建时间',
  44 + `updated_at` datetime DEFAULT CURRENT_TIMESTAMP COMMENT '更新时间',
  45 + PRIMARY KEY (`id`)
  46 +) ENGINE=InnoDB AUTO_INCREMENT=12 DEFAULT CHARSET=utf8;
  47 +```
  48 +
  49 +![image](https://user-images.githubusercontent.com/12668546/74095470-744bf280-4b2c-11ea-9acd-92b079329441.png)
  50 +
  51 +
  52 +##### 字段说明
  53 +```json
  54 +{
  55 + // 标题
  56 + "title": {
  57 + "type": "string"
  58 + },
  59 + // 描述信息
  60 + "description": {
  61 + "type": "text"
  62 + },
  63 + // 封面图链接
  64 + "cover_image_url": {
  65 + "type": "text"
  66 + },
  67 + // 页面数据，主要部分
  68 + "pages": {
  69 + "type": "json"
  70 + },
  71 + // 创建时间
  72 + "created_at": {
  73 + "type": "date"
  74 + },
  75 + // 更新时间
  76 + "updated_at": {
  77 + "type": "date"
  78 + },
  79 + // 是否已经发布
  80 + "is_publish": {
  81 + "type": "boolean"
  82 + },
  83 + // 是否是模板
  84 + "is_template": {
  85 + "type": "boolean"
  86 + },
  87 + // 关联的表单
  88 + "workforms": {
  89 + "collection": "workform",
  90 + "via": "work"
  91 + }
  92 +}
  93 +```
  94 +
  95 +
  96 +### WorkForm：表单收集表
  97 +
  98 +##### 建表语句
  99 +```sql
  100 +DROP TABLE IF EXISTS `work_forms`;
  101 +CREATE TABLE `work_forms` (
  102 + `id` bigint(20) NOT NULL AUTO_INCREMENT,
  103 + `form` longtext,
  104 + `work_id` bigint(20) NOT NULL,
  105 + PRIMARY KEY (`id`),
  106 + KEY `work_id` (`work_id`),
  107 + CONSTRAINT `work_forms_ibfk_1` FOREIGN KEY (`work_id`) REFERENCES `work` (`id`)
  108 +) ENGINE=InnoDB DEFAULT CHARSET=utf8;
  109 +```
  110 +
  111 +```javascript
  112 +WorkForm Table 结构
  113 +{
  114 + formJSON: JSON, // 一条表单记录
  115 + workID: 外键 // 关联的作品ID，外键
  116 +}
  117 +```
  118 +
  119 +
  120 +
  121 +##### 表单提交记录 Example：
  122 +```json
  123 +[
  124 + {
  125 + workId: 1,
  126 + formJSON: {
  127 + "11": "张三", // 姓名
  128 + "22": 18, // 年龄
  129 + "33": "工程师" // 角色
  130 + }
  131 +
  132 + },
  133 + {
  134 + workId: 1,
  135 + formJSON: {
  136 + "11": "张四", // 姓名
  137 + "22": 18, // 年龄
  138 + "33": "工程师" // 角色
  139 + }
  140 + },
  141 + {
  142 + workId: 2,
  143 + formJSON: {
  144 + "11": "王五", // 姓名
  145 + "22": 18, // 年龄
  146 + "33": "工程师" // 角色
  147 + }
  148 + },
  149 +
  150 +]
  151 +```
  152 +
  153 +
  154 +```json
  155 +{
  156 + "formJSON": {}, // "type": "json",
  157 + "workId" // 关联的 workId，外键
  158 + }
  159 +```
  160 +
  161 +####
  162 +解释：Work 与 FormCollection 的关系是 一对多的关系，一个作品可以有很多关联的表单统计记录。
  163 +
  164 +---
  165 +
  166 +
  167 +
  168 +## 接口实现思路 + 伪代码
  169 +> Node.js 代码实现：[https://github.com/ly525/luban-h5/blob/dev/back-end/h5-api/api/work/controllers/Work.js](https://github.com/ly525/luban-h5/blob/dev/back-end/h5-api/api/work/controllers/Work.js)
  170 +
  171 +
  172 +```json
  173 +{
  174 + "routes": [
  175 + {
  176 + // 图片代理，防止跨域
  177 + // 主要是请求一些跨域图片的时候，先走API，API负责请求图片，用来解决跨域问题
  178 + // 代码关键实现：return http.request(request.get.imgURL)
  179 + "method": "GET",
  180 + "path": "/works/cors-proxy",
  181 + "handler": "Work.corsProxy",
  182 + "config": {
  183 + "policies": []
  184 + }
  185 + },
  186 + {
  187 + // 所有作品
  188 + "method": "GET",
  189 + "path": "/works",
  190 + "handler": "Work.find",
  191 + "config": {
  192 + "policies": []
  193 + }
  194 + },
  195 + {
  196 + // 统计作品总数
  197 + "method": "GET",
  198 + "path": "/works/count",
  199 + "handler": "Work.count",
  200 + "config": {
  201 + "policies": []
  202 + }
  203 + },
  204 + {
  205 + // 获取某个作品的详情数据
  206 + // 伪代码：return HTTPJsonResponse(WorkModel.findOne(workId).toJSON())
  207 + "method": "GET",
  208 + "path": "/works/:id",
  209 + "handler": "Work.findOne",
  210 + "config": {
  211 + "policies": []
  212 + }
  213 + },
  214 + {
  215 + // 创建作品
  216 + "method": "POST",
  217 + "path": "/works",
  218 + "handler": "Work.create",
  219 + "config": {
  220 + "policies": []
  221 + }
  222 + },
  223 + {
  224 + // 更新作品
  225 + "method": "PUT",
  226 + "path": "/works/:id",
  227 + "handler": "Work.update",
  228 + "config": {
  229 + "policies": []
  230 + }
  231 + },
  232 + {
  233 + // 删除某个作品
  234 + "method": "DELETE",
  235 + "path": "/works/:id",
  236 + "handler": "Work.delete",
  237 + "config": {
  238 + "policies": []
  239 + }
  240 + },
  241 + {
  242 + // 预览某个作品
  243 + // workJSON = WorkModel.findOne(workId).toJSON()
  244 + // return render('作品模板.jsp', workJSON)
  245 + "method": "GET",
  246 + "path": "/works/preview/:id",
  247 + "handler": "Work.previewOne",
  248 + "config": {
  249 + "policies": []
  250 + }
  251 + },
  252 + {
  253 + //
  254 + /**
  255 + * 提交某个作品的表单
  256 + * 思路：
  257 + 比如页面中有
  258 + 输入框：姓名，UUID为：11...
  259 + 输入框：年龄，UUID为：22...
  260 + 单选框：角色，UUID为：33...
  261 +
  262 + 在表单提交的时候，其实提交到后端的数据方式如下：
  263 + 1. URL 为 /submit-form/:workId/
  264 + 2. payload 是一个 JSON：
  265 + {
  266 + "11": "张三", // 姓名
  267 + "22": 18, // 年龄
  268 + "33": "工程师" // 角色
  269 + }
  270 +
  271 + 后端在接收到数据之后
  272 + 1. 会向 WorkForm 表中插入一条记录，主要存储在其 form 字段中（JSON 类型字段）
  273 + 2. 根据 workId 找到 Work，并绑定到该记录的work字段上（外键）
  274 +
  275 + */
  276 +
  277 + // Node.js 参考代码如下：
  278 + // https://github.com/ly525/luban-h5/blob/dev/back-end/h5-api/api/work/controllers/Work.js#L16-L24
  279 + "method": "POST",
  280 + "path": "/works/form/submit/:id",
  281 + "handler": "Work.submitForm",
  282 + "config": {
  283 + "policies": []
  284 + }
  285 + },
  286 + {
  287 + /*
  288 + * 查询某个作品的表单统计数据
  289 + * 思路
  290 + 1. 根据 workId 获得 Work
  291 + 2. work.pages.find(所有的表单类型元素)
  292 + 3. 构造 Object：uuid2NameMap，即 UUID 和元素名称的映射，比如 11 代表姓名，22代表年龄这样
  293 + 举个栗子：
  294 + 这是 Work 记录：
  295 + {
  296 + "11": "姓名",
  297 + "22": 年龄,
  298 + "33": "角色"
  299 + }
  300 + 4. 我们再从服务器中找出来刚才提交的和这个 Work 绑定的所有表单，其中一条记录栗子如下：
  301 + 其中一条表单记录：
  302 + {
  303 + "11": "张三", // 姓名
  304 + "22": 18, // 年龄
  305 + "33": "工程师" // 角色
  306 + }
  307 + 5. 这样，我们把两条记录结合下，就会得到如下结果：
  308 + {
  309 + "姓名": "张三",
  310 + "年龄": 18,
  311 + "角色": "工程师"
  312 + }
  313 +
  314 + 其中的一条记录，我们就生成完毕了。
  315 + 同样的办法，所有的表单记录都可以生成了，我们把这个返回给前端，前端就可以渲染表单数据了
  316 +
  317 + Response Demo：
  318 + ---------------------
  319 + {
  320 + formRecords: [
  321 + {
  322 + workId: 1,
  323 + formJSON: {
  324 + "11": "张三", // 姓名
  325 + "22": 18, // 年龄
  326 + "33": "工程师" // 角色
  327 + }
  328 +
  329 + },
  330 + {
  331 + workId: 1,
  332 + formJSON: {
  333 + "11": "张三", // 姓名
  334 + "22": 18, // 年龄
  335 + "33": "工程师" // 角色
  336 + }
  337 + },
  338 + ],
  339 + uuidToName: {
  340 + "11": "姓名",
  341 + "22": 年龄,
  342 + "33": "角色"
  343 + }
  344 + }
  345 +
  346 + ---------------------
  347 + */
  348 + // Node.js 参考代码如下：
  349 + // https://github.com/ly525/luban-h5/blob/dev/back-end/h5-api/api/work/controllers/Work.js#L25-L55
  350 + "method": "GET",
  351 + "path": "/works/form/query/:id",
  352 + "handler": "Work.queryFormsOfOneWork",
  353 + "config": {
  354 + "policies": []
  355 + }
  356 + },
  357 + {
  358 + // 设置某个作品为模板
  359 + // 伪代码：
  360 + // work = WorkModel.findOne(workId).toJSON()
  361 + // newTemplateWork = work.clone()
  362 + // newTemplateWork.isTemplate = true // 不是模版，是正常作品
  363 + // result = WorkModel.create(newTemplateWork)
  364 + // return result
  365 +
  366 + // Node.js 参考代码如下：
  367 + // https://github.com/ly525/luban-h5/blob/dev/back-end/h5-api/api/work/controllers/Work.js#L56-L63
  368 +
  369 + "method": "POST",
  370 + "path": "/works/set-as-template/:id",
  371 + "handler": "Work.setAsTemplate",
  372 + "config": {
  373 + "policies": []
  374 + }
  375 + },
  376 + {
  377 + // 基于某个模版创建新作品
  378 + // 伪代码：
  379 + // templateWork = WorkModel.findOne(templateId).toJSON()
  380 + // newWork = templateWork.clone()
  381 + // newWork.title = newTitle || ''
  382 + // newWork.desc = newDesc || ''
  383 + // newWork.isTemplate = false // 不是模版，是正常作品
  384 + // result = WorkModel.create(newWork)
  385 + // return result
  386 +
  387 + // Node.js 参考代码如下：
  388 + // https://github.com/ly525/luban-h5/blob/dev/back-end/h5-api/api/work/controllers/Work.js#L64-L71
  389 +
  390 + "method": "POST",
  391 + "path": "/works/use-template/:id",
  392 + "handler": "Work.useTemplate",
  393 + "config": {
  394 + "policies": []
  395 + }
  396 + },
  397 + ]
  398 +}
  399 +
  400 +```
  401 +
... ...