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

时间 2019-11-10

标签急了贴吧 pwa20 pwa 出炉繁體版

原文原文链接

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

1. 前述

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

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

@-v-@前端

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

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

2. 介绍

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

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

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

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

（项目结构是怎样的，以及如何去运行这个项目，见项目源码地址中的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字