"老司机开车 从不需要理由 喜欢我 就来点我吧"
易杭贴吧--新鲜出炉的中文社区 http://tieba.freeedit.cn

1. 前述

最近一直在写一个发贴子的应用，前不久才刚刚“完工”（其实还有很多需要改进的地方）。
这个应用是仿着上一个版本的百度贴吧来写的，最初的打算是想要完成百度贴吧的最主要的那部分基本功能，但真正做起来，却不是一件简单的事。

这个项目一共用了近二十天的时间，我在这段时间内，既踩了很多的坑，也学到了很多的知识。
踩的坑越多，修复的bug越多，看的东西越多，就越觉得自己知识浅陋。
很多的东西，都是自己用过了之后，才会恍然大悟。看上一百遍，还真的不如自己动手写一遍。
所以我想将这个应用的构建过程和在这段时间内的心得体会记一记。自己呢，也能在写的过程中，对应用中的某些问题进行反思。

@-v-@

其实自己从来没有这么完整地做过一个这样的项目。
从应用的选题、界面的设计、工具的选择，到环境的搭建、应用的部署，最后到应用的测试和修复，全部依赖于自己。
我既算是这个应用的“UI设计师”，也算是这个应用的“前端工程师”、“后端工程师”、“数据库工程师”，以及“项目架构师”。（突然就把自己说得高大上了，哭笑不得~）

不过，自己一个人要演这么多的角色，其中的困难很大。
近二十天的时间里，我不断地去尝试打磨作品的细节，希望能做好每一个环节。
但即使到了部署的时候，它也仍然只是个布娃娃。
不过，仍然会使我高兴的是，它至少还可以“动”。

2. 介绍

这张图就是这个项目第一次打开时的界面。
当我们不断往右滑的时候，它又会一页页地显示。到了最后一页，它又会很调皮地叫我们返回到第一页，然后点击进入。
进入以后，就是登录、注册之类的。完成了之后，就会直接进入到app里面，然后就可以搜索发帖了。

页面展示之类的，我就不写了，同伴们看了，估计也会觉得没什么意思。
百度贴吧长什么样子，它也就大概长什么样子，只是某些地方，我做了更改和精简（因为实在是没有那么多时间去写这些功能，功能项太多了，单靠自己一个人，根本难以在短时间内做完，笑~）。
只需要去玩一玩，就知道效果是怎么样的了，所以我就直接给地址吧。

演示 --- 易杭贴吧--新鲜出炉的中文社区 http://tieba.freeedit.cn

源码 --- https://github.com/freeedit/yihang-tieba

（项目结构是怎样的，以及如何去运行这个项目，见项目源码地址中的readme文件。）

在这个项目中，我内置了一个彩蛋，大体是长这个样子的 :

嗯嗯，其实我们可以多试几次，每次出现的消息是不一样的，就仿佛有个小机器人在跟我们对话一样。

其他的效果图，都存放在项目的result文件夹中，地址是：

freeedit/yihang-tieba/tieba-design/result

最后的最后，放上一个总览图。

（写了一大堆有的没的，接下来才算是进入正文。）

3. 过程

最初想做一个和QQ一模一样的聊天工具，但后来又觉得聊天的工具太普遍了，所以就将目标转到了百度贴吧。
同样都是和别人一起聊天吹水水，贴吧却要显得更好玩一些。（秋名山老司机一枚前来觐见）
自己也很喜欢贴吧那种“搞笑”、“无畏”的吹水环境。所以后来，就敲定主意做一个贴吧出来。

3.1 构思

我将项目分成了四个部分来分步骤完成：

1 设计 freeedit/yihang-tieba/tieba-design
2 前端 freeedit/yihang-tieba/tieba-client
3 后端 freeedit/yihang-tieba/tieba-server
4 前后端连接 + 将项目部署给主机

3.2 设计

小部分的设计图存放在这里: （还有一大部分被我失误给删掉了）

freeedit/yihang-tieba/tieba-design

首先在阿里矢量图标库中，选取了近80个svg图，再用icomoon将它们打包成能引入stylus的字体文件。
（晕死，我误删的部分，就包括了它，导致我下一次想替一个图标，重新打包成新的字体文件都不行）

接着，我便开始设计底部的五个小图标。本来打算用AI画几个矢量图，但电脑上没装，再加上很久没用过了，不知道还会不会用，就直接用PS来画了。
PS来画的时候，总感觉，CC2014以后，对矢量图层进行交并补运算好像不一样了，不知道是不是自己的错觉。合并多个矢量图层，总不会出现自己想要的效果（也许是自己还没摸透PS吧）。最后呢，就只能做位图了。

做完了这些，我才来开始画应用的图标。一个简简单单的吧字，放在一个圆角矩形中，上下两个缺口，底色用#3388ff，搞定！

在上图最右边的吧字图标，是用来给PWA图标配的。
第二个图标，是用来做用户默认的头像的。
其他几个就是应用图标和底栏图标了。
（为了给用户一种图标在往上升腾的感觉，我故意将几个线条样式的图标下面，开了个口子。用户可能看着就会很难受，就想要把它下面那根线条补全，然后他就可能会按下去。）

另外呢，考虑到网络可能会出现问题，图片地址找不到，所以也准备了一个默认的图片背景图。

3.3 前端

freeedit/yihang-tieba/tieba-client

最开始想用sass写的，但是后来感觉stylus更简洁，更干净，看上去更好看，然后就选它来处理CSS了。
决定用stylus之后，就想找个和stylus一样缩进式语法的html预处理器。正好，Jade和它真的是绝配。两个都长得一模一样的，用起来也方便。
我很庆幸自己选了stylue+pug的组合，要不然，这个应用可能需要一个月才能搞定呢。

到这儿呢，我的强迫症就犯了。有了CSS和HTML的预处理器，怎么着，JS也要上个“预处理器”吧。
当时疯狂地想要用TS，其原因并不是因为它很酷（当然，酷也算它的一方面），而是想三剑客不能只有两剑客（babel不算剑客，它顶多是瓶万金油，个人愚见），这样打架不利索。
（还有一个最最重要的原因，说出来，你们可能会笑死我，它那atom file-icons图标贼好看，绿色偏青色，比JS那个屎黄色好看多了。）
各位看官笑一笑就行了，飘过飘过...

回归理智。。。

vue对ts的支持好像还不怎么好，vue-loader是可以用，但用着用着，有些文件引不进来。啊！请原谅我的无知，我真不知道为什么会这样。
最后，因为搞不定了，还是只要两个剑客就够了，三个剑客容易吵架。再加上从未用过TS，不好掌控大局啊。一旦TS出了BUG，我就得哭晕在厕所，果断放弃好了。强迫症之类的东西，身为一名前端化缘人，果然还是不该有啊。

最终使用到的一套前端工具，就是这样的：

template: pug
style: stylus
script: babel
database: indexDB

pug stylus babel
vue2 vuex axios+vue-axios vue-router vue-loader
better-scroll flexible animate
webpack express webpack-pwa-manifest
indexDB localStorage

  "dependencies": {"better-scroll": "^0.1.15","flexible": "","animate": "","axios": "^0.16.2","vue": "^2.2.6","vue-axios": "^2.0.2","vue-router": "^2.3.1","vuex": "^2.3.1"},"devDependencies": {"babel-preset-stage-2": "^6.22.0","eslint": "^3.19.0","eslint-config-standard": "^6.2.1","express": "^4.14.1","pug": "^2.0.0-rc.1","stylus": "^0.54.5","vue-loader": "^11.3.4","webpack": "^2.3.3","webpack-pwa-manifest": "^2.1.4"}

3.4 后端

freeedit/yihang-tieba/tieba-server

后端倒是没什么可说的（后端的哥哥姐姐们别生气，我说的是自己写的后端，笑~），无非就是用koa搭了个后台，搞一搞跨域问题（以后如果有时间呢，再弄一个token验证一下），然后用mongoose连一下mongodb，写一写schema，做一下limit、skip、populate之类的分页、关联查询，再加上那一套简单的curd操作，没了。

哦，对了，我写了一个很扯淡的代理方式。
在应用中的直播那一项，我自己搞不定，不知道怎么做直播，然后又想填补它的空缺。
重要的是，百度贴吧里面弄一个直播...这个...总感觉有点跑题的味道。（这不是发水贴的地方，直播间也能水贴？）
当然，最最重要的还是，自己搞不定直播这个功能。
然后，我就用了个“知道”，来顶替“直播”的位置。（主要是因为，自己经常去贴吧里面搜贴子看，找一些以前别人问过的问题，毕竟有些问题在别的地方找不到答案，或者回答得不好...）

然后我就需要给用户实时提示，这个地方，我代理的是360问答页面上请求的接口。
最后用户需要获取到相应的信息，这个地方，我代理的是百度知道的页面，然后把页面上的数据抓下来，形成json文件返回给用户。

恩恩，360问答的实时提示+百度知道的页面信息，这就是传说中的搜索，自己都被自己搞的笑死了，不过还别说，办法虽然有点那啥，但效果还不错诶，至少用来做一个DEMO，足够了。

  "dependencies": {"cheerio": "^1.0.0-rc.1","iconv-lite": "^0.4.17","koa": "^2.2.0","koa-router": "^7.1.1","koa-static": "^3.0.0","md5": "^2.2.1","moment": "^2.18.1","mongoose": "^4.9.3"},"devDependencies": {"cross-env": "^4.0.0","nodemon": "^1.11.0"}

3.5 连接

其实吧，数据在连接时是最麻烦的了。
因为数据请求需要时间，页面需要等待请求完成，完成之后呢，又得渲染页面，渲染页面的同时呢，又要处理没有数据或数据有问题的情况，而且，这些数据可能还需要存储在vuex中，如果要长期存起来，还要用localStorage或indexDB，贼麻烦。
稍不注意，就会出bug，而且写着写着，脑袋就有点不够用了。当数据的请求在一个页面里面放多了，那不同的请求之间还可能存在关联性，绕来绕去的，自己都不知道自己在干嘛。

幸好，我提前将每个vue文件都分离开来，成了几个独立的文件：

xxx-componentindex.vue      // 组件的入口template.pug   // htmlstyle.styl     // cssscript.js      // scriptdata.json      // 组件中使用到的静态数据

对每个文件的写法，也都做了个模板出来。我每次需要写组件的时候，复制一份模板，改一改就好了。
另外呢，该抽离的地方，我都抽离了，实在是抽不了，或者我搞不定的，就没去动它。

为了完成这个应用，我连续抽了好几个库文件出来。（readme中有写）
跨域库、indexDB库、常用的功能函数库、mongoose的Promise版curd库

这些文件最终都被上传到了我的个人工具库中。 详见
freeedit/lib-mini-libs-collection

项目的文件其实打包后也挺大的（904kb），比较手机耗流量。
为了让项目具有离线存储的能力，减少流量的消耗。
所以我在项目中用webpack插件配了一个manifest.js文件出来，这就要求需要使用Https。
但不知是域名方面还是其他什么原因，即使是在我加了https证书之后，也无法访问https，所以最终就只能暂时用http先替着。
如果浏览器上面显示不安全字样，及浏览器中显示某某WARN信息，那应该就是HTTPS造成的。

（这个项目没有做SSR优化，一是这个应用没有做的必要，这样会加重服务器的负担，二是自己对这方面不熟，还在起步阶段）
（可能接下来，我需要认认真真全面学习一下SSR和PWA ServiceWorker了）

4. 问题

4.1 vue computed

vue computed中的函数好像不能用async+await（用的时候才发现它会失效），但我当时死脑筋，跳不过去，还是后来在其他地方用定时查询来搞定的。
不知道还有没有什么别的方法，让computed之中能用async异步获取数据。（虽然我明白，这件事情不该由computed来做）

4.2 mongoose populate

不知道mongoose的populate()函数中，继续嵌套多个同级的populate，怎么写的。（populate的地方之中，又有多个需要populate的地方）

比如获取文章，然后呢需要populate('floor')，在floor之中，又需要populate('ff')和populate commit数组每一个对象中的一个叫uid的属性。不知道该怎么写，求问。

const postSchema = new Schema({bar: {type: Schema.ObjectId,ref: 'bar',index: true}lz: {type: Schema.ObjectId,required: true,ref: 'user',index: true}floor: [{type: Schema.ObjectId,ref: 'floor',index: true}]
})const floorSchema = new Schema({ff: {type: Schema.ObjectId,required: true,ref: 'user'},commit: [{uid: {type: Schema.ObjectId,ref: 'user',}}]
})

...
还有好几个问题，一时之间想不起来了。
有知道的哥哥姐姐们，替我解一解。

5. 结束语

5.1 幻想

学软件三年，从电脑打字开始，到影视后期处理，再到游戏编程，最后...我选择了前端作为自己的长期学习目标。
因为，我看到了前端的未来。
现在的网页，已经在逐渐向app转型了，真的很希望有一天，看到它取代桌面的样子。
当我们的桌面本身就是一个浏览器的时候，输入任何命令，都能从网络上获取到我想要的东西。我们不需要再去装WPS、迅雷应用了，因为它们已经变成了网页。
当我们打开这些网页的时候，长的和本地应用一样。而且它们也能像应用一样，被我们安装在电脑上，页面外没有浏览器外壳，桌面最下端也没有什么开始按钮，只有一个搜索框，简单到了极点，这该是多么的棒啊。
我想，这就是我希望的未来前端。而且前端已经在向这方向靠拢了，我想要为它的发展出一份力。

5.2 庆幸

很庆幸，自己没有一来就学习前端。
最开始，我是奔后期处理去的，也就是PS、AI、AU、AE、MAYA、ZBrush那一套。
这也算是培养了自己的设计美感（哈哈~歪路子美感）。
可能很多人觉得，几个小图标，一张PSD图，没什么好设计的，照着做都可以做出来的，但如果没有别人的作为参考，就很不容易了。（特别是要融情于“景”）
而且，PS的很多概念，和HTML+CSS的布局概念很像，图层、蒙版、背景阴影、渐变、打组，等等这些，都与HTML+CSS不谋而合，就像是天生为它们设计的。
就是因为早期形成了某些说不出来的概念，所以才能在这个作品中，尝试着把设计的空缺给补上。

5.3 总结

在做这个项目的时候，我体会到了大项目的来之不易。
知易行难，即使是一个看上去并不复杂的应用，要真的做好，也并不是一件简单的事。
尝试去做的项目越大，就越觉得自己了解得过于泛泛。
想要做得精细，还是得需要时间不断地去琢磨。

原文地址：http://blog.freeedit.cn/2017/06/12/Yihang-Tieba-Introduction/

易杭 : http://blog.freeedit.cn/about/ 2017/6/12 10:07 8906字