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

wslicknet

前两天看segmentfault的时候,突然间,想写篇文章总结一下那些年自己写过的后台管理系统。作为我前端的入门项目,我对后台管理系统的感情还是挺深的。本着以下几点原因,写了此文。

  1. 对后台管理系统做一个综合全面的总结(嗯,这会是我以后项目总结的开端)。

  2. 也算是给新入门的一个基本概念和学习范围吧(~大神请自动忽略~)。

  3. 知识在于分享,也是希望和大家交流下,如何把后台管理系统写得能更具工程化,模块化,更有效率。

后台管理系统多为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 '<script>alert("文件类型错误,请上传.xls或.xlsx文件");window.location.href = "xxx";</script>';
            } elseif ($_FILES["file"]["size"] > 2 * 1000 * 1000) {
                cilog('error', '上传文件大小:'.$_FILES["file"]["size"]);
                echo '<script>alert("上传文件不得超过2Mb");window.location.href = "xxx";</script>';
            } else {
                cilog('error', '上传失败:上传文件MIME:'.$_FILES["file"]["type"].'上传文件大小:'.$_FILES["file"]["size"]);
                echo '<script>alert("文件上传失败");window.location.href = "xxx";</script>';
            }

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更配呢,改天得试下~~

阅读 6.6k

慢慢沉淀
自己在前端路上的积累,沉淀和总结

web前端工程师

223 声望
18 粉丝
0 条评论

web前端工程师

223 声望
18 粉丝
宣传栏