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