关于开源

首先非常感谢大家的支持和鼓励，2017年05月02日18 时 33 分收到一笔打赏，心里面小激动了一把，感谢感谢！在文章发布的第一时间就有人问我是否开源，这里我统一进行解释，在我的内心里面，这个项目一定会开源，应该会拉出来一个分支进行开源，可能是之前深受开源项目的影响；只是目前还有很多细节的内容需要完善，一方面是功能方面还有缺陷，还有很多细节需要处理；另外一方面是里面涉及到一些公司层面的内容，需要进行剥离和加工，请各位敬请期待。

前端"设计"的内心挣扎

在第一篇中，我有聊到我的前端是模仿阿里 MQC 的页面，与其说模仿还不如是拿来直接用，这里就和大家介绍下我的具 (te) 体 (bie) 操 (gao) 作 (xiao)，接下来的内容有很多人可能会认为是投机取巧，anyway 作为一个测试，我认为是最高效的；前端是一个艺术活，还记得腾讯的白老师说过前端非常厉害的同学那都是活宝，几行 css 就可以让页面神清气爽，令人耳目一新。其实一开始我也想自己设计前端的，还特意下载了 Axure RP，经过内心的几番挣扎之后，还是选择了捷径。

获取前端内容

前端主要有 3 个内容构成：html 源文件、css、图片 (js 获取了也没用，因为被压缩过)，在第二篇文章的 WEB 服务器搭建中：
通过

app.set('views', path.join(__dirname, '/res/app/views'));

设置了 html 文件的存放路径在项目目录下的 res/app/views，需要将 html 文件存放在这个目录下；通过

app.use(express.static(path.join(__dirname, 'static'))); //设置静态文件目录

设置了静态文件的存放路径在项目目录下的 static，也就是 css+js+ 图片的存放路径；

1、获取 html 文件内容（这里需要说明下，由于我使用的 pug 模板引擎，因此你在项目里面会看不到任何一个 html 文件，在项目目录下的 res/app/views 看到的都是以 pug 结尾的文件，这也是在第一次看 STF 源码比较惊讶的地方，当时是以 jade 结尾的文件）
①首先使用 chrome 访问 mqc 首页，右键鼠标选择检查按钮：

②在弹出来的页面里面选择 element 标签，右键 html 头节点，选择 copy，copy element：

③将内容拷贝到 html 文件中，将冗余的 js 文件内容，记住是内容对应删除，这样一个高端大气上档次的首页 html 文件就做完了；
④还有最后一步，因为我们需要的不是 html 文件，而是 pug 文件，一种方式为了 shu'x 熟悉 pug 的语法，可以照着 html 文件逐行对应转成 pug 文件，我采取的方式是在线转换，网址是：http://html2jade.org，虽然有时候访问有点慢，但是比命令行的转换好使很多，转换过来直接可以使用。
到这里前端首页的内容只完成了 1/3，但是已经可以使用，这个时候访问首页，已经是非常完整的页面了。
2、获取 CSS 内容 获取 CSS 的内容到本地有 2 个原因，我们可以先来看一个 css 文件内容

link(href='https://g.alicdn.com/platform/mtl/css/select2.css?_=0.0.83', rel='stylesheet')

是从阿里云的 CDN 上获取的，原因 1 是这个内容可能会官方修改，原因 2 是这个 URL 可能会无法访问，导致你的页面一直加载异常，获取方法如下：
①选择 Sources 标签，找到下面对应的 css 文件选择另存为，目录可以参考原来的，也可以自定义，操作如下：

②在 pug 文件中将 css 的 URL 地址对应修改成你本地的路径，例如：

link(href='/platform/mtl/css/mtl.css', rel='stylesheet')

图片资源，我这里就不重复了，方法和获取 CSS 文件是一样一样的，我个人还是比较推荐路径和原始的一致，这样可以避免你不断的去修改你 CSS 文件中的图片路径，当然一键替换 CSS 文件中的图片路径也是不复杂的。

方法比较简单，但是很高效，走到这一步，不需要很多的工作量，就可以完成页面前端的设计，这个时候如果你觉得哪个平台的长得比较好看，就选择哪个了。

还有一个内容就是 JS 没有拉取，原因是 JS 被压缩过了，拉取了也是无效的，这个就是需要你自己去实现的，例如文件上传功能，这个在后面的系列文章中会做详细的介绍。

还是想强调一下，这个方法比较适合一开始对前端不熟悉的同学，比较关注后端的内容的具体实现，例如 JS，这里是先给自己树立一个信心而已，万事开头难，这里我们先给自己开了一个好头，其实做到现在，我认为很高效的方式，后面全都是坑，在后面你都需要或多或少的了解这些内容，会根据需要有针对性的修改这些内容，虽然比较少，但是如果完全不懂也是无法下手的。

说到这里，这些都还只是个空框架，我自己的理解是先有一个好的框架，接下来就是往框架里面填充具体的实现，例如实现文件上传、后端数据向前端传递、数据库查询、python 脚本实现、表结构设计、兼容性测试具体实现等等，这些就是给这个框架舔砖加瓦了。

这也算是站在巨人的肩膀上了，我们获取了 html、css 文件，如果你还有一些自己的想法，就可以对 html 文件和 css 进行自定义了，设计出你认为体验更好的前端页面，不管你认不认可，不管你有多不屑，anyway，我就是这样做的。