phalconcms使用教程七：表单模型的使用

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/u014691098/article/details/83044108

表单模型主要有两个作用：
第一个作用：创建前端所需要的数据，比如banner之类的。
第二个作用：就是前端表单提交，比如调查问卷之类的。

一、第一个作用

首先介绍第一种，就以banner图举例。

1、创建banner表单模型

1、创建模型会自动创建一个id自增主键字段
2、内容排序默认是id降序，即id DESC，也可以使用自己创建的字段排序
这样就创建一个表单模型了

接下来给模型添加字段

2、点击字段管理=》添加字段

banner一般有标题、图片、url、排序四个字段，所以我们依次创建
1）创建标题字段，标题一般单行文本框即可，如果需要在后台列表显示该字段，则“后台列表显示”选项选“是”

2）创建图片字段，选择单图片上传

3）创建url字段，url字段一般文本框即可，填写的时候如果是站外地址，一般建议带上http/https协议。

4）创建排序字段，排序一般选整数（int），这样排序才会更快

这样模型就创建好了，如下图

3、添加数据

1）点击左侧的“首页banner”即可添加内容


2）上传图片可以对图片进行剪裁，任何比例，任何大小都可以剪裁
注意：php必须开启php_fileinfo.dll扩展，否则会无法上传

顺序受排序字段影响

4、前端使用

在模板中多种使用方法
第一种：
getAll()方法可以传参数，与phalcon中的find()方法参数一致

{% for banner in model.getModel('FormData').setTableName('banner').getAll() %}
 <a href="{{ banner.url }}">{{ banner.title }}</a><br/>
{% endfor %}

第二种：
这是新加的方法，getAllByTableName()有两个参数，第一个参数是form表单的表名，第二个参数可选，与phalcon中的find()方法参数一致

{% for banner in model.getModel('FormData').getAllByTableName('banner') %}
 <a href="{{ banner.url }}">{{ banner.title }}</a><br/>
{% endfor %}

二、第二个作用

允许用户提交表单数据，例如我们创建一个收集简历的表单

1、创建一个简历表单

2、给模型添加字段

1）创建一个姓名字段，单行文本即可，根据情况选择是否必填

2）创建一个性别字段，单选

3）创建一个出生年月字段，选择单行文本的datetime即可
根据需要注意字段的配置

4）创建一个学历字段，下拉菜单即可

5）添加一个爱好字段，一般是多选框

6）创建一个头像字段，选择单图片上传即可
注意：必须开启系统设置中上传功能，否则不能上传文件

7）创建一个工作经验字段，选择编辑器即可
需要注意的是，编辑器中如果有上传功能，需要在后台开启上传功能，否则不能上传图片、视频、文件等

8）由于在创建表单的时候我们指定前台列表条件为status=1，所以我们还需要创建一个审核字段，单选即可

这些就是我们刚才创建的字段

数据可以后台添加，也可以前台添加，后天添加只需要点击左侧的表单名称即可添加，如下图


下面介绍怎么在前台添加和展示

3、前台添加数据

前台添加数据可以在任意模板中。
只需要将以下关键信息加入表单中即可
1）表单form标签中加入action="form/edit" method="post"
2）增加一个隐藏域<input type="hidden" name="no" value="d21ee9e2f565256a4d3be97ad0b7df78">，字段名称为no，这个值就是我们刚才创建表单的编号

3）由于创建表单的时候勾选了使用图片验证码，所以还需要添加一个验证码文本框，字段名称为verify_code，验证码地址为form/verify，如果使用volt模板，地址建议使用{{ url('form/verify') }}

<input type="text" name="verify_code">
<img alt="" src="form/verify" onclick="this.src=this.src+'/'+Math.random();">

4）普通图片上传
上传地址：ueditor/index/action/uploadimage/origin/4
上传域名称：upfile，即<input type="file" name="upfile">

还支持以下参数，如果使用以下参数，需开启Imagick或Gd扩展：

• 是否添加水印：watermark_switch，1：添加，0：不添加
• 水印位置：watermark_place，0：随机，1：左上，2：中上，3：右上，4：左中，5：正中，6：右中，7：左下，8：中下，9右下
• 是否生成缩略图：thumbnail_switch，1：生成，0：不生成
• 生成缩图的方式：thumbnail_cutout，1：剪裁，2：按比例
• 宽：thumbnail_maxwidth，此值受缩略图方式影响，当为按比例时，60代表60%
• 高：thumbnail_maxheight，此值同上

5）base64编码图片上传
上传地址：ueditor/index/action/uploadscrawl/origin/4
上传域名称：upfile，即<input type="file" name="upfile">
还支持以下参数：

• 指定生成的文件名：fileName，如果不传则随机生成一个png文件名

6）上传视频
上传地址：ueditor/index/action/uploadvideo/origin/4
上传域名称：upfile，即<input type="file" name="upfile">

7）上传文件
上传地址：ueditor/index/action/uploadfile/origin/4
上传域名称：upfile，即<input type="file" name="upfile">

8）如果使用百度的百富编辑器，可以直接在模板中使用以下代码进行调用：

<!-- 配置文件 -->
<script src="{{ static_url('js/ueditor.config.js') }}" type="text/javascript"></script>
<script src="/plugins/ueditor/ueditor.all.js" type="text/javascript"></script>
<!-- 语言包 -->
<script src="/plugins/ueditor/lang{% if constant('LANGUAGE') == 'zh' %}/zh-cn/zh-cn.js{% else %}/en/en.js{% endif %}" type="text/javascript"></script>
<!-- 此项就是字段名，后台创建工作经验时指定的字段名是`experience` -->
<script name="experience" id="experience" type="text/plain" style="width:100%; height:400px;"></script>
<!-- 注意UE.getEditor("experience"这个值 -->
<script type="text/javascript">UE.getEditor("experience", {"serverUrl":"{{ url('ueditor/index/origin/4') }}"});</script>

ueditor.config.js配置文件中的服务器统一请求接口路径填写/home/ueditor/index/

如果你的百富编辑器还需要允许上传视频等，还需要在js配置文件中的xss过滤白名单whitList增加

video:  ['autoplay', 'controls', 'loop', 'preload', 'src', 'height', 'width', 'class', 'style'],
source: ['src', 'type'],
embed: ['type', 'class', 'pluginspage', 'src', 'width', 'height', 'align', 'style', 'wmode', 'play', 'autoplay','loop', 'menu', 'allowscriptaccess', 'allowfullscreen', 'controls', 'preload'],
iframe: ['src', 'class', 'height', 'width', 'max-width', 'max-height', 'align', 'frameborder', 'allowfullscreen']

当然，服务器端已做了过滤处理，提交的任何数据都经过了处理，最大程度的预防xss攻击

9）用户提交数据后，会根据创建表单模型时选择的前台提交返回选项来返回

当选择JS消息框时，只需要在模板中加入这段js即可，消息会通过flash.output()或flashSession.output()返回。
在volt模板中，可以把alert改成你需要的提示样式

<script>
var msg1 = '{{ flash.output() }}';
var msg2 = '{{ flashSession.output() }}';
if(msg1){
	alert(msg1);
}else if(msg2){
	alert(msg2);
}
</script>

在smarty模板中

<script>
var msg1 = '{$di.flash.output()}';
var msg2 = '{$di.flashSession.output()}';
if(msg1){
	alert(msg1);
}else if(msg2){
	alert(msg2);
}
</script>

4、后台数据展示及修改

前台提交数据后

可以看到状态都是待审核的，由于我们规定了只有当status=1时数据才允许在前台展示，所以需要点击查看，然后修改状态
现在就审核通过了，前端就可以获取数据了

5、前端数据的展示

前端表单默认的展示模板是form/index，当然也可以指定模板
假设我们用的是form/index模板，只需要创建主题/form/index.volt模板
访问地址是form/index/no/d21ee9e2f565256a4d3be97ad0b7df78，最后一个就是我们需要访问的表单的表单编码
在模板中可以使用的变量有:
导航：nav
头信息：common
表单信息：form，例如表单名称：{{ form.name }}
字段信息：formFieldList，创建的所有字段
表单数据信息：list，通过循环输出里面的数据
分页信息：paginator

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>{{ common['title'] }}</title>
<meta name="keywords" content="{{ common['keywords'] }}">
<meta name="description" content="{{ common['description'] }}">
<style>

</style>
</head>
<body>
表单名：{{ form.name }}
<hr>
<table>
<th><td>姓名</td><td>性别</td><td>出生年月</td></th>
</table>
{% for data in list %}
<tr><td>{{ data.name }}</td><td>{% if data.sex==1 %}男{% else %}女{% endif %}</td><td>{{ data.date }}</td></tr>
{% endfor %}
<hr>
{{ paginator.show() }}

</body>
</html>