• 首页
  • 前端
    • HTML
    • CSS
    • Javascript
    • XML
    • AJAX
  • 前端框架
    • BootStrap
    • Jquery
  • PHP
    • 语法
    • 核心
    • 面向对象
    • PHP7
    • Socket
    • Swoole
  • 数据库
    • Mysql
    • Redis
    • Memcache
    • MongoDB
  • 优化
    • 优化方案
    • 页面静态化
    • Nginx
  • 后台框架与实战
    • Smarty
    • 源码Blog
    • TP3.2
    • TP3.2商城
    • TP5.0
    • TP5.0商城
    • Laravel
    • Laravel在线教育平台
    • Yii
    • Yii手机直播
    • CodeIgniter
    • Yaf
  • 移动开发
    • 微信公众号
    • 混合APP
  • 二次开发
    • DedeCMS
  • Linux
    • 基本操作
    • 环境搭建
  • 版本控制
    • GIT
    • SVN
  • Node.js
  • 资料库
没有结果
查看所有结果
  • 首页
  • 前端
    • HTML
    • CSS
    • Javascript
    • XML
    • AJAX
  • 前端框架
    • BootStrap
    • Jquery
  • PHP
    • 语法
    • 核心
    • 面向对象
    • PHP7
    • Socket
    • Swoole
  • 数据库
    • Mysql
    • Redis
    • Memcache
    • MongoDB
  • 优化
    • 优化方案
    • 页面静态化
    • Nginx
  • 后台框架与实战
    • Smarty
    • 源码Blog
    • TP3.2
    • TP3.2商城
    • TP5.0
    • TP5.0商城
    • Laravel
    • Laravel在线教育平台
    • Yii
    • Yii手机直播
    • CodeIgniter
    • Yaf
  • 移动开发
    • 微信公众号
    • 混合APP
  • 二次开发
    • DedeCMS
  • Linux
    • 基本操作
    • 环境搭建
  • 版本控制
    • GIT
    • SVN
  • Node.js
  • 资料库
没有结果
查看所有结果
没有结果
查看所有结果

TP5.0(四)添加文章、添加验证、图片上传、缩略图、图片预览、文章列表展示、分页、文章编辑、文章删除、XSS 攻击、Jquery-Validate 验证插件、钩子函数

Mr.Lee 由 Mr.Lee
2018年6月9日
在 TP5.0, 后台框架
0
TP5.0(一)部署、控制器、模块、命令行、路由、视图、模板赋值、常用标签、搭建后台首页、搭建登录页、页面跳转与重定向、Request 对象
0
分享
0
浏览

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标签符号转化为实体符号。

如:大于号“>”会被转化为 “&gt;”

如:大于号“<”会被转化为 “&lt;”

可以在配置文件config,添加全局的过滤函数:

此种缺点:会把html和js代码的特殊符号都进行转移,不满足我们的要求。我们只需要转移js代码。如下所示:

解决办法:

  1. 不使用函数htmlspecialchars()进行处理,但可能会出现xss攻击。
  2. 使用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,则事件不会继续执行。

 

标签: Jquery-Validate 验证插件XSS 攻击分页图片上传图片预览文章列表展示文章删除文章编辑添加文章添加验证缩略图钩子函数
上一篇文章

TP5 商城(一)环境部署、数据表、后台首页、用户 CURD、Ajax 状态切换、后台登录、后台退出、后台防翻墙、RBAC

下一篇文章

TP5.0(三)Composer 安装验证码、登录验证码、AR 模式操作数据库、文章分类添加、文章分类列表展示、文章分类编辑、Ajax 无刷新分类删除、文章添加、富文本编辑器

下一篇文章
TP5.0(一)部署、控制器、模块、命令行、路由、视图、模板赋值、常用标签、搭建后台首页、搭建登录页、页面跳转与重定向、Request 对象

TP5.0(三)Composer 安装验证码、登录验证码、AR 模式操作数据库、文章分类添加、文章分类列表展示、文章分类编辑、Ajax 无刷新分类删除、文章添加、富文本编辑器

发表回复 取消回复

您的邮箱地址不会被公开。 必填项已用 * 标注

Search

没有结果
查看所有结果

About Me

个人随笔

Winston Lee

Programmer

Hello & welcome to my blog! My name is Winston Lee and am a programmer and am keen on sharing.

Winston Lee

About Me

Hello & welcome to my blog! My name is Winston Lee and am a programmer and am keen on sharing.

Categories

  • AJAX
  • BootStrap
  • CodeIgniter
  • CSS
  • DedeCMS
  • GIT
  • HTML
  • Javascript
  • Jquery
  • Laravel
  • Laravel在线教育平台
  • Linux
  • Memcache
  • MongoDB
  • MVC
  • Mysql
  • Nginx
  • Node
  • PDO
  • PHP
  • PHP7
  • PHP基本语法
  • PHP核心编程
  • Redis
  • Smarty
  • Socket
  • SVN
  • Swoole
  • TP3.2
  • TP3.2商城
  • TP5.0
  • TP5.0商城
  • XML
  • Yaf
  • Yii
  • Yii手机直播
  • 二次开发
  • 优化方案
  • 前端技术
  • 前端框架
  • 后台框架
  • 基本操作
  • 微信公众号
  • 数据库
  • 未分类
  • 混合APP
  • 源码Blog项目
  • 版本控制
  • 环境搭建
  • 移动端开发
  • 网站优化
  • 资料
  • 面向对象
  • 面向对象编程
  • 页面静态化

Tags

DOM Json RBAC 事件 传参 函数 分页 判断语句 匿名函数 变量 图片上传 存储过程 安装 对象 封装 属性 接口 控制器 数据库操作 数据类型 数据表 数组 文件上传 无刷新分页 权限 标签 模型 正则 流程控制 目录结构 算法 类 索引 继承 缩略图 表关系 视图 路由 运算符 选择器 递归 配置 错误处理 页面静态化 验证码
  • 首页
  • 前端
  • 前端框架
  • PHP
  • 数据库
  • 优化
  • 后台框架与实战
  • 移动开发
  • 二次开发
  • Linux
  • 版本控制
  • Node.js
  • 资料库

沪公网安备31011502400873 | 沪ICP备2024050435号-3

没有结果
查看所有结果
  • 首页
  • 前端
    • HTML
    • CSS
    • Javascript
    • XML
    • AJAX
  • 前端框架
    • BootStrap
    • Jquery
  • PHP
    • 语法
    • 核心
    • 面向对象
    • PHP7
    • Socket
    • Swoole
  • 数据库
    • Mysql
    • Redis
    • Memcache
    • MongoDB
  • 优化
    • 优化方案
    • 页面静态化
    • Nginx
  • 后台框架与实战
    • Smarty
    • 源码Blog
    • TP3.2
    • TP3.2商城
    • TP5.0
    • TP5.0商城
    • Laravel
    • Laravel在线教育平台
    • Yii
    • Yii手机直播
    • CodeIgniter
    • Yaf
  • 移动开发
    • 微信公众号
    • 混合APP
  • 二次开发
    • DedeCMS
  • Linux
    • 基本操作
    • 环境搭建
  • 版本控制
    • GIT
    • SVN
  • Node.js
  • 资料库

沪公网安备31011502400873 | 沪ICP备2024050435号-3