所谓的性价比学习前端技术，主要是指作为一个后端的研发工程师，能够很容易的搭建一个好看得体的页面，比如可能是一个给公司内部员工使用的工具，或者是一个自己的博客页面。只要保证正常的美观大方和易用性即可。这篇博客的目的本质上是不用花太多的时间和精力，要搭建出这样一个系统，所需要的技术点和材料的总结。所以文本不用考虑到兼容和性能的问题，或者是更高深的用户体验，或者是爬虫与反爬（这些性价比不高或者不在讨论范围）。
自维护模板
我只要懂一些javascritp，css，html的知识就可以了，但是当我在开始开发一个工具的时候，并不会从头开始写，因为这样工作量很大，而且做出来的东西也很丑（毕竟不是真正的fe），这样会给人一种很随便不专业的感觉，当然也不会直接从网上直接down下来一个html模板就用，因为有很多页面元素你根本用不到，你要选择去摘除他们，同时这也会给人留下“随便从网上抄来然后改了一改”的感觉。
所以最好是自己平时就维护好一个基本的模板布局，这个模板布局提供最基础的功能，然后在真正需要做一个web工具，或者是博客的时候，直接拿出来，稍作加工就好，这样你的开发效率就会很高。你会把注意力集中在设计上，而非找工具，试工具。这就是所谓的“早做准备”。同时维护的不仅仅是一个页面模板，还有一些常用的操作交互代码，毕竟你不是写前端的，所以这些知识可能很快就被你忘了。
比如一个实用的布局样式可能看起来是这样的：
上边的边框和左边的边框都会提供一些选择项来连接到相应的功能，中间部分就是主要的展示区域。
必要的三方库和框架
bootstrap
bootstrap简直是不懂css和页面设计的工程师的福音。它可以很容易的帮你搭建出一个好看的页面来。
首先它提供一种栅格系统来设置布局，我记得当初自己啃过css布局样式的书，有很多相对布局，绝对布局的东西，我现在都还没搞明白，以为自己明白了，但是你一实现又跑偏了。而栅格系统使用起来就很方便了。它通过一系列的行（row）与列（column）的组合来创建页面布局。
1 | <div class="row"> |
而且bootstrap为常见的页面元素都提供的好看的样式展示，比如说表单，表格，标题，段落，列表等等。
页面元素
你可以自己整理出一份常见实用的页面元素，然后关注好它们的样式，在编写页面的时候，使用这些元素就好了。
标题
标题这种东西，在页面布局和编写wiki的时候经常使用到。确定好你页面的标题和子标题，然后按照等级分配给他们大小就行了。需要注意的是一个页面不要有太多的层级标题，否则会非常乱，因为大部分布局样式，h1～h4之间的递进变化并不明显。所以我一般写页面只有两级标题。
表单
用户会使用表单进行输入，常见的表单元素有输入框，单选框，复选框，下拉列表，提交按钮。这些bootstrap都会提供更多的展示元素，包括提示输入框，正则校验之类的。
表格
在css+div还没兴起的时候，大部分的页面都是用表格元素进行布局的，今天基本上不会用表格进行布局了，但是表格确实是页面展示的一个必不可少的元素，比如统计数据展示。
段落
一句话最常用的元素包装就是用p包围了，要注意一句话都是以p作为换行的，而不是你句子本身的换行符，bootstrap还提供其它一些加标记，下划线的样式，但是这些都不符合性价比的需求。简洁最好。
还有另一些简单的排版元素，包括有序列表ol，无序列表ul，不过我很少使用这个元素，倒是因为是程序员的原因，我经常用code标签来包裹一段代码展示，让它不会变形。
另外说一句，我觉得分割线hr也是一种很实用的排版工具，我在做一个展示系统的时候，各个模块就是用分割线割开的。
其它一些bootstrap的使用细节我会在后边的篇幅讲解。
基本的页面设计
虽然说作为一个页面工具，不求多好看，但是最基本的美观还是要有的。我觉得《写给大家看的设计书》，就很符合性价比页面设计的思路。首先你的页面一定要对齐，这个是设计的根本。还要有统一一个基本样式，不要有过多的配色，我的页面一般主色调就两个，其实大部分设计好的网站都是一个或两个主色调,比如美团就是绿色为主，淘宝是橙色偏红。作为工具页面可能会有一些特别的色调用来做明显标记。过多的颜色将会让用户眼花缭乱，难以分清主次，难以使用。而且颜色一定要用bootstrap给你包装好的，不要用纯色调。比如红色(255，0，0),黄色(255, 255, 0),这些简单的颜色展示在你的页面上将会让你的页面看上去非常的“廉价”。同样的那种点击完就变色的超级链接，同样看上去非常廉价。
基本的用户体验
基本的用户体验主要是指使用方便，这不仅仅是“给你一个工具，能用就行了。”，或者是刷新页面的时候，给个刷新的提示。再或者输入错误数据的时候给他错误原因。其实基本的用户体验是，你不是单纯的想，使用你工具的人需要一个什么东西。你要变换一个思路：“一个人进入你的工具，会发生什么事件。”，比如他需要查询一条数据，那么你的系统需要怎样的搭配方式来满足这个事件的发生。比如我的一个日志查询工具，它分别对应两种事件，一种是运营同学反馈“昨天有一条异常数据，大概在x点～x点”，所以输入那个时间的大概范围进行搜索。
还有一种是，“就在刚才pm发现一个异常数据”，那我选择最近十五分钟，半个小时，那么点起来就很方便，而不是要详细的输入，年月日时分。
我还有另一个系统，是用来分析系统各个环节的。一开始提供的界面是一个post表单界面，输入参数，查询跳到结果页面。后来我发现大部分使用的事件是:“运营，pm查问题，然后截图发给其他运营或者是pm”。后来我把查询输入框和结果页改在了同一界面，并且改为get请求。这样查询另一个输入就不要回退到之前的表单页面了。而且get请求也方便在各个群里发链接。不用截图。
jquery
我想了一下，除了在打印调试日志的时候，使用console.log，在刷新页面的时候，使用 window.location.reload();以外，大部分的代码，我都会写jquery。使用jquery一般是在后台发起一个get，post的ajax请求。或者就是去找到页面元素，然后修改它们的值，这也是jquery最实用的两个功能，性价比最高。整理一下常用的方式，你可以通过id或者class来获得页面元素。或是他们的父元素，子元素，兄弟元素，然后去获取或者设置它们的页面值text，表单值val，selected选中值，或者是让这些元素展示隐藏。
其它界面元素
作为一个工具，仅仅靠bootstrap和jquery提供的基本元素有些不够，可能还需要一些三方库提供的界面元素，比如直接输入时间我觉得使用起来比较麻烦，我一般会使用一个叫做的datepicker插件，用来方便的选择日期时间。还有一个叫hcharts的库，用来展示各种统计图，包括扇形，柱状图，折线统计图。这对于分析统计工具来说，非常实用。
交互元素
除了常见的查询交互，还有几个常见的交互方式，来让你狭小的页面，存放更多的信息量，并在不必要的时候隐藏它们，在必要的时候展示它们。
一个是弹窗，我使用一个叫做的bootstrap-modal 弹窗插件。原理其实就是先将一块区域隐藏，然后触发点击事件的时候，将其弹窗展示就可以了。
1 | <div class="modal fade" id="#id_xxx" tabindex="-1" role="dialog" aria-labelledby="myAvLabel" aria-hidden="true"> |
还有就是展开折叠，jquery提供方便的函数让你展开折叠。你只需要给一个按钮或者其它元素绑定一个事件，然后对目标元素slideUp,slideDown就行了。不过bootstrap提供一种更简单的方式：只需要在接收点击事件和需要进行折叠的元素分别进行配置就行了。
触发事件处： <button data-toggle="collapse" data-target="#xxx_id"></button>
需要展示/隐藏的模块: <div class="collapse" id="xxx_id">
还有一种就是tab页，这个bootstrap就有提供不错的样式，我一般用这个来提供不同的输入表单方式。
后台框架
我自从大学毕业貌似就没写过jsp了。现在我的工具页面后台基本都是python的，其实python系的web框架，页面模板差不多，无论你的flask，还是tornado，都是jinja2那套模板系统，可以做一个基本页面去extend，或者include其它子页面，然后在里面嵌入一些for，if语句。所以你可以自己维护一套基本的界面框架，比如bootstrap配flask，在需要开发工具的时候直接套用就行了，非常省力方便。
其它问题
为什么要自己写界面，公司有专门的fe啊？
沟通成本，除非你可以随便使唤别人帮你写界面，否则很多时候，对于自己随便几下就能搞定的东西，不如自己赶快写完算了，而且很多开发过程中，对于要不断修改的设计，你自己打磨，和不断的给一个fe说，让他按照你的思路改，真的是两种感觉。