后端管理系统开发总结（踩坑过程+前端性能优化）

realNumber

对公司的boss系统开始进行了前端的整体修改，趁着记忆还没丧失，整理一下项目过程中记录的混乱的OneNote笔记。里面包含了本人初入前端疯狂踩坑的血泪史和给Safari虐哭的前端性能优化之路。
本文仅适合想顺手做个后台管理系统的后端选手，前端选手请向我疯狂拍砖~

效果展示

// 已被屏蔽

整体流程

技术选型Bootstrap框架 => 在Free template的admin系统里选择合适的主题

=> 对老版本中布局不合理之处进行修改 => 修改html/css代码画出页面效果

=> 加入老版本中的js/css文件，并解决冲突，更新需求 => 修改布局，优化用户体验

=> 修改宽度适应问题 => 压缩打包静态文件，提升前端性能 => 解决chrome和safari下滚动条玄学问题

前端入门过程

作为第一个上手的前端项目，我在技术选型和基础知识的学习上花费了一些时间。由于老版本用的就是Bootstrap框架，所以我没有考虑使用React和Vue，直接选择使用Bootstrap。但同时也对这两个框架进行了一些了解，后期有帮同学处理过一些Vue里的问题（发现vue可真好用）。

总的来说Bootstrap严格意义上来说只是一个css库，而React和Vue属于MVVM库。
- Bootstrap：栅格系统，响应式布局
- React：
  
  数据的单向相应：数据变化时，React将自动管理UI界面的更新；
  
  VisualDom（虚拟Dom）：由React来管理Dom树，方便，且页面的呈现会更快；
- Vue：
  
  数据的双向绑定：数据修改 => 页面改；页面修改 => 数据改；
  
  页面呈现速度比React更快；
Bootstrap主要还是在html代码中引用其提供的库里的组件，所以html/css/js都需要亲手编写。因为刚接触前端，对于前端代码中HTML/CSS/JS分别的作用在实践过程中才慢慢理解
- HTML - Hyper Text Markup Language[超文本标记语言]，用来描述网页整体元素/组件的一种语言；
- CSS - Cascading Style Sheets[层叠样式表]，来定义如何显示HTML的元素，主要用来表现样式；
- JS - JavaScript，用来对用户动作做出相应的响应，比如按键按下，鼠标划过，读取后台数据等；

问题收集及解决

权限管理中不同的身份展现不同的sidebar
- 写一个init的js文件，在里面定义一个init sidebar的函数，和页面分开来，单独执行，根据登陆的身份决定sidebar显示哪些入口。但在老版boss系统中的逻辑就是，虽然sidebar没显示图标，但如果直接get html网页的话，guest身份也可以浏览所有网页，在新版的boss系统中暂时未修复这个bug
modal显示异常
- 现象：modal底色为透明，排版混乱，位置偏离中心，并且在modal中无论何处一经鼠标点击就会自动消失
- 原因：modal的样式错误可能是因为在改完html代码后，为了防止新版本boss系统缺失老boss系统的样式和脚本而出错，因此将老版本所有的js/css文件都引入，而引起了新老版本某些css/js的冲突。
- 解决方法：修改过程及其痛苦，modal显示异常也是占了我绝大多时间的一个坑。最后通过Chrome的开发者工具定位到定义modal的css文件直接修改了modal的底色，position设置为relative，调整left和top。并且先前modal的打开方式为给botton类元素一个id，通过js文件定义该id按钮点击时。
- modal.show()，后来改为定义<a>元素的data-toggle为modal，href指向需打开modal的id后，成功解决问题，原因暂时未深究。
modal在滚动页面后仍停在原来的位置
- 原因：之前挪动modal的时候，position用的是relative
- 解决方法：将position修改为absolute即可
user.html中某几个表格无法传入数据
- 原因：在对比了这几个无法传入数据的表格后，发现他们有一个共同点，就是需要传入json格式的内容
- 解决方法：加入json_format_utils.js的脚本
在Chrome和Safari中某几个页面的表格太长时，滚动条会自动滑动到页面底部
- 原因：在Google问答（大概是这个名字吧）里找到了答案，好像是最新版的Chrome里自动设置了滚动条的动作
- 解决方法：在<div class="page-wrapper">元素中添加样式overflow-anchor: none;
user.html中有几个请求会报错permission denied
- 原因：打了好多console.log，结合开发者工具看了下network发出的请求，有个menu_id为null，因此进入了error
- 解决方法：忽略了老版本boss系统中一条不起眼但很重要的代码<span id="menu_id" hidden="hidden">user</span>；像这种常态为hidden的代码一般都有它独特的功能，不能忽视，至于他为什么不写到js文件中暂未深究，现在十二点后断网了，有空查查。这个bug也让我注意到js中非常重要的一点。
  
  这些表达在js中都为false

合理的宽度自适应

首先简单介绍一下常见的布局类型

- 静态布局[Static Layout ]

定义：网页上的所有元素的尺寸一律使用px作为单位。不管浏览器尺寸具体是多少，网页布局始终按照最初写代码时的布局来显示。设置width，若小于该宽度则出现滚动条，若大于该宽度啧内容居中外加背景。

PC和移动端分别建立网站，是用不同的域名，如wap. / m.
优点：前端代码编写简单，无兼容性问题
缺点：无法根据不同屏幕尺寸做出不同表现。

- 流式布局[Liquid Layout]

定义：页面元素的宽度按照屏幕分辨率进行适配调整，但整体布局不变。网页中主要的划分区域的尺寸使用百分数，并搭配min- *，max- *属性使用。
优点：前端代码编写较简单，可以应对小范围内屏幕尺寸的变化
缺点：若屏幕尺寸跨度太大，某些页面元素由于用百分比设置宽度会被拉得很大，而其中的文字，按钮等大小和原来一样，不协调。

- 自适应布局[Adaptive Layout ]

定义：分别为不同的屏幕分辨率定义布局，即创建多个静态布局，每个静态布局对应一个屏幕分辨率范围。改变屏幕分辨率可以切换不同的静态局部（页面元素位置发生改变），但在每个静态布局中，页面元素不随窗口大小的调整发生变化。可以把自适应布局看作是静态布局的一个系列。
优点：使用 @media 媒体查询给不同尺寸和介质的设备切换不同的样式。

- 响应式布局[Responsive Layout ]

定义：确保一个页面在所有终端上都能显示出令人满意的效果。通常是糅合了流式布局+弹性布局，再搭配媒体查询技术使用。分别为不同的屏幕分辨率定义布局，同时，在每个布局中，应用流式布局的理念，即页面元素宽度随着窗口调整而自动适配。 创建多个流体式布局，分别对应一个屏幕分辨率范围。可以把响应式布局看作是流式布局和自适应布局设计理念的融合。
优点：适应pc和移动端
缺点：
- 媒体查询是有限的，也就是可以枚举出来的，只能适应主流的宽高
- 前端代码编写工作量大

em和rem分别是什么？
他们都是一种相对长度单位。
em是相对于当前元素的字体尺寸。
html { font-size: 16px }
h1 { font-size: 2em } /* 16px * 2 = 32px */
rem表示root em,是相对于根元素的长度单位，这里的根元素就是<html>中定义的字体大小，这意味着任何地方的1rem总是等于<html>中定义的字体大小，
/**若html中定义的字体大小为16px**/
h1 {
  font-size: 2rem;
  margin-bottom: 1rem; /* 1rem = 16px */
}
p {
  font-size: 1rem;
  margin-bottom: 1rem; /* 1rem = 16px */
}

前端性能优化之路

性能优化前：

性能优化后：

加载优化

合并CSS, JavaScript
合并小图片，使用雪碧图
缓存一切可缓存的资源
使用长Cache
使用外联引用CSS, JavaScript
压缩HTML, CSS, Javascript
启用GZip
异步加载第三方资源

CSS优化

CSS写在头部， JavaScript写在尾部
尽量避免写在HTML标签中写Style属性
避免CSS表达式
不声明过多的font-size
移除空的CSS规则

总结

页面美观程度
用户交互体验
性能优化

xiaoyu

wxy牛逼！

xiaoyu

对于我这种前端小白而言，如何在写代码的时候同时考虑适配性问题。

realNumber

@xiaoyu 大佬您好，就我用的Bootstrap这个框架而言，它本身是一个响应式布局的栅格系统，自己默认会适配一些屏幕尺寸，想自己修改的话可以通过修改viewport的一些参数

xiaoyu

@realnumber 哈哈，当初为啥要选择bootstrap框架呀。还有没有其他的框架适合来做个人网站？

realNumber

@xiaoyu 当时是因为老Boss就是用Bootstrap写的，而且代码量巨大，设计的逻辑也比较核心和复杂，为了能平滑过渡到新版本就还是沿用了这个比较老的技术。写个人网站的话可以试试jekyll，只要写一份markdown格式的内容，自动生成html页面，用别人的模板的话完全不用管样式什么的

xiaoyu

@realnumber 哇搜了一下感觉还不错，有机会一定体验一下！！

xiaoyu

@realnumber 还有一个问题想请教。你上面提到的关于前端性能优化，这个如何在代码中体现。

xiaoyu

@realnumber 或者说，什么场景下我们需要考虑这个问题，如何去考虑

realNumber

@xiaoyu 我文章里写了呀，如果代码层面的话就针对CSS, JS文件进行修改，具体的CSS优化文章里提到了五条，这些改完可以再压缩打包一波

realNumber

@xiaoyu 新写了个网页打开开发者工具看一看network这一页，有css和js文件加载得特别慢的时候就说明需要进行性能优化了，安利Chrome开发者工具！！

xiaoyu

@realnumber wxy牛逼！学到了！