TP5第四天
一、完成文章的添加
完成文章模板的展示
第一步:修改left.html模板,加一个添加分类的链接地址
第二步:在后台admin创建一个Article控制器,并建立一个add方法,完成文章的入库操作
模板分配数据:
使用富文本编辑器完成文章的内容添加
第一步:把课件中的相应的ueditor复制到网站根目录下面的插件目录plugin中
第二步:引入核心js文件,并且给textarea 设置一个id=content
效果如下:
完成文章数据的入库
第一步:设置表单name值
第二步:在add方法中,完成数据的入库
使用验证器完成添加文章的验证
在后台的admin的validate目录建立一个Article 的验证器
添加文章的时候,调用验证器的对应场景进行验证:
完成文章的图片上传
表单上传文件的要求:1、post提交 2、设置form的enctype=’multipart/form-data’
设置上传文件的input标签
控制器add方法处理上传文件的路径入库:
数据库存储的路径形式如下:
6、完成文章图片缩略图生成
在有文件上传成功的前提下,处理缩略图生成:
注:函数thumb(width,height,缩放比例) ,缩放比例默认为1为等比例缩放,为2则是填充补白。
存储如下:
数据库存储的路径:
实现上传图片的实时预览
引入核心js文件:
在add.html模板文件设置预览的区域:
效果:
完成文章的列表展示
数据展示
第一步:在后台admin的Article控制器中建立一个index方法,完成文章列表展示
模板中index.php,循环输出
数据分页
把模型的select方法改为paginate(每页显示条数)即可
模板中输出分页页码:
效果:
完成文章编辑
第一步:给编辑设置链接地址,携带文章的参数id
第二步:建立一个upd方法完成数据回显到模板中
第三步:模板中回显数据
效果:
第四步:在upd方法中判断是否是post请求,完成数据的编辑入库
可以设置Article模型自动维护时间戳:
完成文章删除
第一步:给删除的链接地址设置链接,并且设置参数
第二步:添加del方法完成删除
五、XSS攻击
xss介绍
如在输入框输入js代码:
<script>
var cookie = document.cookie
//发送一个jsonp请求
</script>
访问此标题的时候就会弹出1,从而达成攻击;
防止xss攻击(防止js攻击)
使用htmlspecialchars函数防止
注: 百度富文本编辑器ueditor自动将危险的代码如js进行转化为实体符号。
htmlspecialchars函数的作用:将html标签符号转化为实体符号。
如:大于号“>”会被转化为 “>”
如:大于号“<”会被转化为 “<”
可以在配置文件config,添加全局的过滤函数:
此种缺点:会把html和js代码的特殊符号都进行转移,不满足我们的要求。我们只需要转移js代码。如下所示:
解决办法:
- 不使用函数htmlspecialchars()进行处理,但可能会出现xss攻击。
- 使用htmlspecialchars()函数处理,页面的数据(富文本html)又不能正常显示出来,可以借助htmlspecialchars_decode()反转,把html实体符号转化为html标签,但这又可能会造成xss攻击。
我们的希望是HTML可以正常显示,但是又不希望js代码被执行。
这时可以借助第三方防止xss攻击的插件如:HTMLPurifier,此插件会把浏览器提交过来的数据有选择性的过滤。只过滤危险的js代码,保留html代码,这就刚好满足我们的需求。
使用插件HTMLPurifier防止
复制防止xss攻击的库到项目extend目录中。
把HTMLPurifier中的example.php文件中函数定义在common.php中,并且修改路径
需要把函数名为removeXSS设置为tp的全局的默认过滤函数
使用之后,只会把js代码进行过滤,保留html代码:
显示就不会造成攻击,html正常显示:
扩展-验证插件jquery-validate的使用
前端验证目的:减轻服务器压力,提高用户体验。
后端验证:主要保证数据的安全(不要信任浏览器携带过来的任何数据)
具体使用:https://www.jianshu.com/p/e1d5f0dc2f5d
手册:
模型的事件(钩子)
所谓的事件就类似于svn中的钩子一样,做一件事情都有前事件和后事情发生。
给表tp_category添加一个zhujian字段,目的是记录当前记录的主键值。
让zhujian字段和cat_id的值保持一致,我们一把入库成功后要更新:
常规做法如下:
但是不建议上面写,我们希望只把业务逻辑写在控制器,我们把数据有关的操作写在模型的事件中。
模型中注册事件:
我们可以在模型中注册after_insert事件,即入库成功之后,把zhujian的字段和cat_id的保持一致。
效果:
触发事件的流程:入库前事件—>save()—->入库后的事件,
如果在入库前事件前返回false,则事件不会继续执行。