太急了点吧？贴吧PWA20天就出炉了

摘要：老司机开车从不需要理由喜欢我就来点我吧易杭贴吧新鲜出炉的中文社区前述最近一直在写一个发贴子的应用，前不久才刚刚完工其实还有很多需要改进的地方。

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

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

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

@-v-@

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

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

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

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

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

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

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

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

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

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

freeedit/yihang-tieba/tieba-design/result

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

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

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

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

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

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

freeedit/yihang-tieba/tieba-design

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

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

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

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

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

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"
  }

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"
  }

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

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

xxx-component
  index.vue      // 组件的入口
  template.pug   // html
  style.styl     // css
  script.js      // script
  data.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了）

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

不知道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",
    }
  }]
})

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

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

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

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

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

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