Repository navigation
Expand file tree
/
Copy pathatom.xml
More file actions
44 lines (27 loc) · 7.86 KB
/
Copy pathatom.xml
File metadata and controls
44 lines (27 loc) · 7.86 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
<?xml version="1.0" encoding="utf-8"?>
<feed xmlns="http://www.w3.org/2005/Atom">
<title>Azora</title>
<subtitle>Stay Calm</subtitle>
<link href="/atom.xml" rel="self"/>
<link href="http://szigetig.github.io/"/>
<updated>2019-12-31T02:13:25.415Z</updated>
<id>http://szigetig.github.io/</id>
<author>
<name>Szigeti Gao</name>
</author>
<generator uri="https://hexo.io/">Hexo</generator>
<entry>
<title>Drupal自定义Webform表单+Vue单页面应用</title>
<link href="http://szigetig.github.io/2019/12/28/drupal-custom-webform/"/>
<id>http://szigetig.github.io/2019/12/28/drupal-custom-webform/</id>
<published>2019-12-28T12:02:04.047Z</published>
<updated>2019-12-31T02:13:25.415Z</updated>
<content type="html"><![CDATA[<h2 id="编程方式自定义表单"><a href="#编程方式自定义表单" class="headerlink" title="编程方式自定义表单"></a>编程方式自定义表单</h2><p>使用之前先来了解一下什么是webform，webform是Drupal中制作表单的模块，适用场景例如制作调查问卷等等，它提供了一个稳定的，可维护的，经过测试的接口，用于构建表单和处理表单结果。</p><h3 id="Webform的使用流程"><a href="#Webform的使用流程" class="headerlink" title="Webform的使用流程"></a>Webform的使用流程</h3><ol><li>创建一个新的webform表单或者从现有的模板（yml文件）复制一个表单（通过安装模块直接使用、编程方式自定义表单拓展使用）</li><li>以page（页面）或者node（节点）或者block（块）的方式呈现一个表单</li><li>收集表单提交结果</li><li>发送确认和通知</li><li>在线审核提交结果</li><li>将表单结果导出成csv</li></ol><h3 id="定义表单"><a href="#定义表单" class="headerlink" title="定义表单"></a>定义表单</h3><ol><li><p>下载webform模块，安装其中的webform和webformUI</p></li><li><p>配置用户权限(/admin/people/permissions#module-webform)</p></li><li><p>创建一个webform表单,其中title为webform的webform_id，这里我的先写成my_webform</p><ul><li>/admin/structure/webform->add webform<br><img src="https://i.loli.net/2019/12/30/BSskJTux5j7CR8c.png" alt="添加webform.PNG"></li></ul></li><li><p>根据功能需求确定构建单页表单或多页表单</p></li><li><p>填写好必要的表单元素后，在Export(/admin/structure/webform/export)中导出yml文件，然后删除该表单</p></li><li><p>创建一个module文件夹，文件夹名为my_webform，基本目录结构如下</p></li></ol><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br></pre></td><td class="code"><pre><span class="line">├── config // 配置文件</span><br><span class="line">│ ├── install // 安装文件</span><br><span class="line">│ │ ├── webform.webform.my_webform.yml // 表单yml文件</span><br><span class="line">│ ├── optional // 接口定义</span><br><span class="line">│ │ ├── rest.resource.my_webform_rest_fields.yml // webform_rest module</span><br><span class="line">│ │ ├── rest.resource.my_webform_rest_submissions.yml // webform_rest module</span><br><span class="line">│ │ ├── rest.resource.my_webform_rest_submit.yml // webform_rest module</span><br><span class="line">│ │ ├── views.view.my_webform_data.yml // webform_view module</span><br><span class="line">├── src // 源码目录</span><br><span class="line">│ ├── Controller // 控制器</span><br><span class="line">│ │ ├── FileUploadController.php // 文件上传控制器</span><br><span class="line">│ ├── Plugin // 该webform使用的插件</span><br><span class="line">│ │ ├── rest // </span><br><span class="line">│ │ | ├── resource // 此处应用了webform_rest</span><br><span class="line">│ │ | | ├── MyWebformFieldResource.php // 字段加载文件</span><br><span class="line">│ │ | | ├── MyWebformSubmissionsResource.php // 提交处理</span><br><span class="line">│ │ | | ├── MyWebformSubmitResource.php // 提交处理</span><br><span class="line">│── my_webform.info.yml // module info</span><br><span class="line">│── my_webform.module // module hook</span><br><span class="line">│── my_webform.routing.yml // module router</span><br></pre></td></tr></table></figure><p>将之前制作的表单yml内容粘贴到目录结构中的yml中，此时安装该module，自动安装该表单，由于项目中使用了前端Vue的框架，这里还使用了一个webform_rest模块，该模块是基于webform的拓展模块，用于处理处理前端调用的api，此时安装表单的部分就完成啦！</p><p>在Plugin中的php文件中书写自己的表单处理逻辑代码就好。表单处理的实体为WebformSubmission，有不知道表单如何处理的，建议看一下源码中WebformSubmission.php了解其处理方式。</p><h3 id="使用webform-rest扩展（前后端分离配置rest接口"><a href="#使用webform-rest扩展（前后端分离配置rest接口" class="headerlink" title="使用webform rest扩展（前后端分离配置rest接口"></a>使用webform rest扩展（前后端分离配置rest接口</h3><ul><li><p>需要安装<br> HTTP Basic Authentication<br> HAL<br> Serialization<br> RESTful Web Services<br> Json:API<br> RestUI</p></li><li><p>module中定义的接口在restui中查看，并配置可以调用该api的permission(admin/config/services/rest</p></li><li><p>webform_rest模块，整个模块共4个php文件<br> GET: WebformFieldsResource 检索字段<br> GET: WebformElementsResource 检索元素<br> POST: WebformSubmitResource 检索提交<br> GET/PATCH: WebformSubmissionResource 检索提交</p></li></ul><p>如果想自定义表单，可以按自己的喜好设置样式并使用高级功能和选项对其进行拓展，使用Webform。<br>它是功能强大又丰富的表单生成器，非常适合复杂需求</p><p>More info: <a href="https://www.drupal.org/project/webform" target="_blank" rel="noopener">Webform</a></p>]]></content>
<summary type="html">
Drupal是一个拓展性极强的大型CMS，前段时间一直接触Drupal的内容，尤其是webform表单的使用，鉴于国内资料较少，在Youtube上看了一段时间的Drupal中Webform的表单使用，整理如下
</summary>
<category term="tech" scheme="http://szigetig.github.io/categories/tech/"/>
<category term="Drupal" scheme="http://szigetig.github.io/tags/Drupal/"/>
<category term="Vue" scheme="http://szigetig.github.io/tags/Vue/"/>
</entry>
</feed>