资讯专栏INFORMATION COLUMN

论如何把后台管理系统写出花

xi4oh4o / 2374人阅读

摘要:知识在于分享,也是希望和大家交流下,如何把后台管理系统写得能更具工程化,模块化,更有效率。后台管理系统多为端,所以和的技术运用不多,会根据产品需求进行优雅降级和渐进增强。

前两天看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的时候,突然间,想写篇文章总结一下那些年自己写过的后台管理系统。作为我前端的入门项目,我对后台管理系统的感情还是挺深的。本着以下几点原因,写了此文。 对后台管理系统做一个综合全面的总...

    sugarmo 评论0 收藏0
  • 初级PHPer如何点亮技能树

    摘要:此篇文章并未如何教你怎么面试的时候吹逼,而是给一点点建议,如何更聪明地达到目的。据不完全统计,基本都是做管理后台改。不要太沉溺和纠结于技术,把重心移到业务能力上,踏踏实实做事。 前言   对于很多刚毕业或者大四的同学,都会有个困惑,我如何学PHP,为什么知识会那么杂,然后实习中公司大概需要哪些要求。此篇文章并未如何教你怎么面试的时候吹逼,而是给一点点建议,如何更聪明地达到目的。 实习可...

    eternalshallow 评论0 收藏0
  • 一个前端工程师如何快速学习,成长。准备自己的35岁 【-原创精读】

    showImg(https://segmentfault.com/img/bVbw3tK?w=1240&h=827); 前端工程师这个岗位,真的是反人性的 我们来思考一个问题: 一个6年左右经验的前端工程师: 前面两年在用jQuery 期间一直在用React-native(一步一步踩坑过来的那种) 最近两年还在写微信小程序 下面一个2年经验的前端工程师: 并不会跨平台技术,他的两年工作都是Reac...

    RdouTyping 评论0 收藏0
  • 道器相融,由Angel一个优秀机器学习平台的自我修养

    摘要:而道器相融,在我看来,那炼丹就需要一个好的丹炉了,也就是一个优秀的机器学习平台。因此,一个机器学习平台要取得成功,最好具备如下五个特点精辟的核心抽象一个机器学习平台,必须有其灵魂,也就是它的核心抽象。 *本文首发于 AI前线 ,欢迎转载,并请注明出处。 摘要 2017年6月,腾讯正式开源面向机器学习的第三代高性能计算平台 Angel,在GitHub上备受关注;2017年10月19日,腾...

    leo108 评论0 收藏0

发表评论

0条评论

xi4oh4o

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<