摘要:知识在于分享,也是希望和大家交流下,如何把后台管理系统写得能更具工程化,模块化,更有效率。后台管理系统多为端,所以和的技术运用不多,会根据产品需求进行优雅降级和渐进增强。
前两天看segmentfault的时候,突然间,想写篇文章总结一下那些年自己写过的后台管理系统。作为我前端的入门项目,我对后台管理系统的感情还是挺深的。本着以下几点原因,写了此文。
对后台管理系统做一个综合全面的总结(嗯,这会是我以后项目总结的开端)。
也算是给新入门的一个基本概念和学习范围吧(~大神请自动忽略~)。
知识在于分享,也是希望和大家交流下,如何把后台管理系统写得能更具工程化,模块化,更有效率。
后台管理系统多为PC端,所以css3和HTML5的技术运用不多,会根据产品需求进行优雅降级和渐进增强。下面先上一张图,罗列下后台管理系统涉及到的方方面面,欢迎大家补充。
语言
html+js+css+php mysql c++
后台管理系统常用框架:bootstrap
常用类库:jquery,jquery UI(里面有很多好用的函数和小组件)
整体实现:
前端页面HTML+css+js ,用php做cgi层调后台接口,数据渲染。
页面结构:
头部,侧边栏导航条,面包屑等公共部分抽离成页面片,表格,表单,列表等抽离成小组件。所以后台管理系统的页面就有各个小积木拼接而成。
最常见的操作:
增删改查:后台管理系统的标配。主要是操作DOM,调接口,只是操作成功后,如果想有更好的用户体验,不要刷新页面,用js动态改DOM即可,其余感觉没啥好说的。
批量操作:批量操作本身并没有技术难点,但是在用户体验上,个人认为,有很多讲究。例如:全选,单选,多选,不选时的处理;单个或多个校验不合法时的提示和处理;部分成功,部分失败时的提示和处理;全部成功的处理;
查询:这是后台管理系统的标配。常见2种处理方法,1.get方法,参数全部拼到URL上,个人推荐这种,可以存为书签;2.post方法,URL始终不会改变,大家都知道post方法较安全,但是这种无法保存为书签,f5刷新页面时无法保存查询条件。(若是各位看官有别的实现方法,欢迎赐教)
导出:一般是导出Excel表格。用PHPExcel类库。
需要加上头信息:
header("Content-Type: application/vnd.ms-excel"); header(sprintf("Content-Disposition: attachment;filename="%s.xls"",$filename)); header("Cache-Control: max-age=0");
导入:一般也是导入Excel表格。用php的$_FILES可获得上传的文件。
if (isset($_FILES["file"]) && 0 == $_FILES["file"]["error"]) { $fileType = array("application/vnd.ms-excel", "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet", "application/kset","application/octet-stream"); //文件格式 if (in_array($_FILES["file"]["type"], $fileType) && $_FILES["file"]["size"] <= 2 * 1000 * 1000) { $file = $_FILES["file"]["tmp_name"]; require_once BASEPATH . "/libraries/phpexcel/PHPExcel.php"; $excelReader = new PHPExcel_Reader_Excel2007(); if (!$excelReader->canRead($file)) { $excelReader = new PHPExcel_Reader_Excel5(); } $sheet = $excelReader->load($file)->getSheet(0); //sheet1操作 $excelCont = array( "highestCol" => $sheet->getHighestColumn(), //列 "highestRow" => $sheet->getHighestRow(), //行 "highestColumnIndex" => PHPExcel_Cell::columnIndexFromString($sheet->getHighestColumn()) // 几列 ); } }
权限控制处理:
白名单,黑名单:以php的CI框架为例,思路是:在项目的配置文件config中写入名单数组,在core下建一个继承CI_Controller的MY_Controller文件,然后在文件中封装权限控制方法,这样整个项目下的文件只要继承了MY_Controller 就都可以调用这个权限控制的方法。
日志:虽然后台肯定会打错误日志,但前端也要根据业务适当打日志。打日志是为了出错时,更好的定位问题,所以多半在出错时,把接口入参和出参打出来。具体怎么打,要根据业务情况。
例如:下面这种根本不调接口的情况,后台根本不会有日志,但用户会有上传失败的情况,所以前端日志对定位问题有很大帮助,cilog是封装好的一个写日志的函数。
elseif (!in_array($_FILES["file"]["type"],$fileType)) { cilog("error", "上传文件MIME:".$_FILES["file"]["type"]); echo ""; } elseif ($_FILES["file"]["size"] > 2 * 1000 * 1000) { cilog("error", "上传文件大小:".$_FILES["file"]["size"]); echo ""; } else { cilog("error", "上传失败:上传文件MIME:".$_FILES["file"]["type"]."上传文件大小:".$_FILES["file"]["size"]); echo ""; }
xss过滤:
安全问题主要是xss和sql注入。sql注入后台会做,前端主要是做xss过滤。常用的解决方案就是:对特殊字符进行转义。但这样会造成页面展示上也会转义。所以目前的解决方案是,将半角的<>字符转义成全角的<>。
$strNavName=str_replace("<", "<", $str); $strNavName=str_replace(">", ">", $strNavName);
登陆:加密(https),一般登录页会使用https协议,使用md5多次加密。
退出:清cookie,清sessionkey。
document.cookie = name + "=;expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/; domain=" + domain;
异常处理:虽然后台管理系统对异常的容忍度远远小于用户侧的项目,但作为一个有追求的前端,对异常分支还是要认真对待。
对于操作成功或失败,都会给出对应的提示。封装一个公共的函数,根据错误码,给出用户能够理解的错误提示。
使用try catch,保证边缘数据异常时不影响主体功能。例如:一个商品列表的页面,商品的信息是主体,商品的评论数据是非主体,评论和商品不是同一个接口,评论接口有时会挂掉,所以就对评论接口使用try catch,保证评论异常时,商品数据是可以正常显示的。
try { //可能会出错的具体业务代码 } catch(Exception $e) { //打日志,做容灾处理 cilog("error", "get_mgmt_comment_list error: ".$e->getMessage()); }
【注】:这些异常处理只是前端对异常的处理,后台也会有自己的异常报警处理。
常用插件(后台管理系统的标配 ):
日历:datetimepicker (个人比较倾向这个),layDate
弹窗:bootstrap的modal。如果自己写,最好是一个网站的风格保持一致,封装一个统一的函数或组件。
拖拽排序:jquery UI有现成的api,拖拽draggable,排序sortable,非常好用。
分页:PHP CI框架有现成的分页类Pagination,可以配合bootstrap的分页样式使用。
一些优秀的模板:(网上一搜一大堆)
http://www.jq22.com/demo/Bootstrap-150103222921/dashboard-1.html
http://themes.laborator.co/
http://themes.laborator.co/#theme=neon
字体图标库:
FontAwesome:http://fontawesome.io/
阿里巴巴矢量图标库:http://www.iconfont.cn/
据说后台管理系统和Vue更配呢,改天得试下~~
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/21738.html
摘要:知识在于分享,也是希望和大家交流下,如何把后台管理系统写得能更具工程化,模块化,更有效率。后台管理系统多为端,所以和的技术运用不多,会根据产品需求进行优雅降级和渐进增强。 前两天看segmentfault的时候,突然间,想写篇文章总结一下那些年自己写过的后台管理系统。作为我前端的入门项目,我对后台管理系统的感情还是挺深的。本着以下几点原因,写了此文。 对后台管理系统做一个综合全面的总...
摘要:此篇文章并未如何教你怎么面试的时候吹逼,而是给一点点建议,如何更聪明地达到目的。据不完全统计,基本都是做管理后台改。不要太沉溺和纠结于技术,把重心移到业务能力上,踏踏实实做事。 前言 对于很多刚毕业或者大四的同学,都会有个困惑,我如何学PHP,为什么知识会那么杂,然后实习中公司大概需要哪些要求。此篇文章并未如何教你怎么面试的时候吹逼,而是给一点点建议,如何更聪明地达到目的。 实习可...
showImg(https://segmentfault.com/img/bVbw3tK?w=1240&h=827); 前端工程师这个岗位,真的是反人性的 我们来思考一个问题: 一个6年左右经验的前端工程师: 前面两年在用jQuery 期间一直在用React-native(一步一步踩坑过来的那种) 最近两年还在写微信小程序 下面一个2年经验的前端工程师: 并不会跨平台技术,他的两年工作都是Reac...
摘要:而道器相融,在我看来,那炼丹就需要一个好的丹炉了,也就是一个优秀的机器学习平台。因此,一个机器学习平台要取得成功,最好具备如下五个特点精辟的核心抽象一个机器学习平台,必须有其灵魂,也就是它的核心抽象。 *本文首发于 AI前线 ,欢迎转载,并请注明出处。 摘要 2017年6月,腾讯正式开源面向机器学习的第三代高性能计算平台 Angel,在GitHub上备受关注;2017年10月19日,腾...
阅读 541·2023-04-25 16:00
阅读 1535·2019-08-26 13:54
阅读 2448·2019-08-26 13:47
阅读 3281·2019-08-26 13:39
阅读 995·2019-08-26 13:37
阅读 2709·2019-08-26 10:21
阅读 3502·2019-08-23 18:19
阅读 1568·2019-08-23 18:02