后台系统的一些代码规范

在师父的教导下，我对代码的书写规范也是越来越有强迫症了。我的代码若能有幸被你看见，则不难发现有一些规律。

*.html中代码规范

• 所有class名称都是“aa-bb”这种格式的：
  <div class="button-content"></div>
• 所有id名称都是“aa_bb”这种格式：
  <div class="flow-chart" id="trend_line"></div>
• 如若页面有单独样式，则在html文件最顶部加上class属性:
  --- title: 流量统计 layout: default class: flow ---
  对应的该页面样式文件便是flow.scss，且scss文件中，则以.page-flow作为最大的选择符。这样可以保证最终的css文件中，单独样式不会冲突，也解决了前端人员对于class或id命名难的问题。

*.scss文件（最终为css文件）中代码规范

• 选择器与花括弧之间有个一个空格，属性后面紧跟冒号，空格后才出现值，格式如下：
  .page-certificate {background: #f0f5fb;}
  PS：我热切的希望，未来有人接手我的代码，能按这些规范一直进行下去。

---

对于后台系统来说，用的最多的便是查询条件（输入框样式）和查询结果（即表格样式），然后就是一些按钮等统一的样式。如果这些样式均能统一使用，则会给前端以及后台开发人员带来便利，使代码简洁有序。所以本人在写代码时，特别注意代码复用这块，不多BB，下面直接丢出一些模块的代码规范。

按钮模块—— button 标签或 a 标签

后台系统中，用到的按钮大概有4中大小：btn-lw、btn、btn-normal、btn-lg；5种样式：btn-fill、btn-primary、btn-primary-white、btn-gray、btn-gray-fill。下面进行一一介绍。

1. 最小的按钮，一般用在表格的操作列中。代码及效果如下：
   <a href="javascript:void(0)" class="btn-primary-white btn-lw detail-btn">查询</a>
   <a href="#" class="btn-fill btn-lw">激活</a>

   
   

2. 按钮，一般是“公安认证”操作。代码及效果如下：
   <a href="#" class="btn btn-fill identification">公安认证</a>

   
   

3. 正常按钮，一般为视频页“上传”和“视频录制”等操作。代码及效果如下：
   <a href="#" class="btn-normal btn-primary" id="upload_video">上传</a>
   <a href="#" class="btn-normal btn-gray-fill">开始录制</a>

   
   

4. 大一点的按钮，一般是“查询”或“保存”操作。代码及效果如下：
   <button class="btn-hollow btn-lg btn-gray">保存</button>

   
   

查询模块

在查询模块中，一般有输入框、下拉列表以及时间，这应该是目前最复杂的组合了。前端童鞋请注意，这块只要按照这个样式统一便可以了，无需按ui效果图上自动随意缩放大小再自行定义。先上效果图。

然后上代码：

//ld 下面代码class名称均无需修改，架构也无需修改。

查询模块.png

表格模块

这表格几乎一半页面都用到了，所以无需自己再去定义样式。
先丢效果图

然后上代码

//ld 表格为展示数据的，代码class名称均无需修改，架构也无需修改。

表格.png

详情模块

详情模块一般是用来添加或修改的页面，分两种。一种是两列的；一种是四列的。下面介绍一下两列式的。
效果图如下：

代码丢上：

可以直接include的模块

ld 具体请看源码中_includes文件下的component文件夹内容，就不一一列出，此处只展示几个

• 分页
  {% include component/pagenav.html %}

  
  

• 时间选择
  {% include component/search.html %}