“老司机开车 从不须要来由 喜欢我 就来点我吧”
易杭贴吧–新鲜出炉的中文社区 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-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了）

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字