表单模型主要有两个作用:
第一个作用:创建前端所需要的数据,比如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>