《老司机喜欢我不需要理由，点我》亿航贴吧-新鲜出炉的中文社区http://tieba.freeedit.cn1。前面提到的最近一直在写一个发帖的应用，前不久才“写完”（其实还有很多需要改进的地方）。本应用是模仿上一版百度贴吧编写的。原本的计划是完成百度贴吧基本功能中最重要的部分，但真正实现起来并不是一件简单的事情。这个项目耗时将近20天。这段时间踩了很多坑，也学到了很多知识。踩的坑越多，修的bug越多，读的越多，越觉得自己知识浅薄。很多东西，只有自己用过之后，才能体会到。看了一百遍，还不如自己写。所以想把这个应用的搭建过程和这段时间的心得记录下来。至于我自己，在写作过程中也可以反省一下申请中的一些问题。@-v-@其实我从来没有做过这么完整的项目。从应用选题、界面设计、工具选择，到环境搭建、应用部署，最后到应用测试和修复，全靠自己。我不仅是这个应用的“UI设计师”，还是这个应用的“前端工程师”、“后端工程师”、“数据库工程师”、“项目架构师”。（突然说我高了，哭笑不得~）不过，一个人演那么多角色还是很辛苦的。在过去的二十天里，我一直在努力打磨工作的细节，希望把每一个环节都做好。但即使到了部署的时候，它仍然只是一个布娃娃。尽管如此，它至少可以“移动”会让我感到高兴。2.介绍此图为项目首次打开时的界面。当我们一直向右滑动时，它会一页一页地显示。在最后一页，它会开玩笑的告诉我们回到第一页，然后点击进入。进去之后就是登录，注册等等。完成后，您将直接进入应用程序，然后您可以搜索和发布。页面展示之类的就不写了，小伙伴们看了估计也不会觉得有趣。百度贴吧大概是??这个样子，只是有些地方我做了改动和简化（因为我实在没那么多时间写这些功能，功能项太多，只能靠自己，短时间内很难完成，哈哈~）。效果怎么样你自己去玩玩就知道了，我直接给你地址。Demo---亿航贴吧--新鲜出炉的中文社区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-design2前端freeedit/yihang-tieba/tieba-client3后端freeedit/yihang-tieba/tieba-server4前后端连接+部署项目到宿主机3.2设计的一小部分存放在这里：（我误删了一大半）freeedit/yihang-tieba/tieba-designFirst在阿里矢量图标库中，选取近80张svg图片，然后使用icomoon打包成字体文件，可以导入手写笔。（权衡，我误删的部分包含了它，导致我下次更换一个图标，重新打包成一个新的字体文件。）然后，我开始设计底部的五个小图标。本来打算用AI画几张矢量图，但是电脑上没有安装，好久没用了。不知道会不会用，就直接用PS画了。在PS画图的时候，总感觉CC2014以后，矢量图层的求交补操作好像不一样了。不知道是不是我的错觉。合并多个矢量图层永远不会产生预期的效果（可能我还没想通PS）。最后只能做位图了。这样做之后，我开始绘制应用程序的图标。一个简单的条形字符，放在一个圆角矩形内，上下两个空隙，背景色用#3388ff，大功告成！上图最右边的条形图标是用来配合PWA图标的。第二个图标用作用户的默认头像。其他的是应用程序图标和底部栏图标。（为了给用户一种图标在上升的感觉，我特意在几个线条风格的图标下面开了一个洞，用户看着可能会觉得不舒服，所以想把下面的线条补全，然后他可以按一下。）另外考虑到可能是网络有问题，图片地址找不到，所以也准备了一张默认的图片背景图。3.3前端freeedit/yihang-tieba/tieba-client一开始我想用sass来写，后来觉得stylus更简洁，更干净，更好看，所以选择它来处理css。在决定使用stylus之后，我想找一个与stylus具有相同缩进语法的html预处理器。正好，玉和它真是绝配。两者看起来完全一样，而且易于使用。很庆幸自己选择了style+pug的组合，不然的话，这个申请可能要一个月才能搞定。在这里，我的强迫症犯了。有了CSS和HTML预处理器，怎么回事，JS也需要一个“预处理器”。当时就想疯狂的用TS。原因不是因为酷（当然酷也是它的一个方面），而是因为我觉得三剑客不可能只有两个火枪手（babel不是剑客，顶多是灵丹妙药，在我的拙见），像这样战斗并不容易。（还有一个最重要的原因，你告诉我，你可能会笑死我，它的atomfile-icons图标真的很好看，绿色略带青色，比JS的狗屎黄好多了。)所有评委只是微笑好吧，渐行渐远……恢复理智。..Vue对ts的支持好像不是很好。可以使用vue-loader，但是有些文件无法导入。啊！请原谅我的无知，我真的不知道为什么会这样。最后因为想不通，两个刀客就够了，三个刀客很容易吵架。再加上我之前没有用过TS，所以很难掌控全局。一旦TS出bug，我只好在厕所里大哭一场，果断放弃。强迫症这种东西，作为一个前端乞丐，真的不应该有。最后用到的一套前端工具是这样的：pwa-manifestindexDBlocalStorage"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搭建一个后端，处理跨域问题（如果y以后有时间再弄个token验证），然后用mongoose连接mongodb，写一个schema，做limit,skip,populate等分页，相关查询，加上那套简单的curd操作，就是走了。哦，对了，我写了一个很废话的代理方法。app里面的直播项，自己摸不着头脑，不知道直播怎么做，然后想把它的空缺补上。重要的是百度贴吧还有直播……这个……总感觉有点跑题。（这里不是发水印的地方，直播间里也能发水印吗？）当然最重要的是直播这个功能我自己搞不定。然后，我用“知道”代替了“直播”。（主要是我经常去贴吧搜贴，找一些别人以前问过的问题，毕竟有些问题别处回答不了，或者回答不好。。。）那我就需要给用户实时提示，在这个地方，我代表了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文件分开，变成了几个独立的文件：组件中使用的数据也被编写为每个文件的模板。每次我需要编写一个组件时，我都会复制一个模板并更改它。另外，我把该去掉的地方都拉出来了。实在拿不下来，或者拿不动，就没搬。为了完成这个应用，我连续提取了几个库文件。（写在readme中）跨域库、indexDB库、常用函数库、mongoosePromise版curd库这些文件最后上传到了我的个人工具库。有关详细信息，请参阅freeedit/lib-mini-libs-collection项目。打包后的文件其实挺大的（904kb），对比手机流量消耗。为了让项目具备线下存储的能力，减少流量消耗。于是在项目中使用webpack插件配置了一个manifest.js文件，需要使用Https。但是不知道是域名问题还是其他原因。即使我添加了https证书，也无法访问https，所以最后只好暂时改用http。如果浏览器显示“不安全”字样，并且浏览器显示某条WARN信息，应该是HTTPS引起的。（本项目不做SSR优化，一是这个应用不是必须的，会增加服务器的负担，二是我对这方面不熟悉，还处于初级阶段。）（也许接下来，我需要认真全面的研究一下SSR和PWAServiceWorker）4.问题4.1vuecomputedvuecomputed中的函数貌似不能用async+await（我用的时候才发现会失败），但是我当时卡住了，跳不过去，所以后来在其他地方使用了定时查询来获取。不知道有没有其他方法可以在computed中使用async异步获取数据。（虽然我明白这件事不应该用computed来完成）4.2mongoosepopulate不知道如何在mongoose的populate()函数中写同级的多个populates。（在populate的地方中，有很多地方需要populate）比如获取文章，那么需要populate('floor')，而在floor中，需要populate('ff')和填充提交数组的属性之一称为uid。不知道怎么写，求教。constpostSchema=newSchema({bar:{type:Schema.ObjectId,ref:'bar',index:true}lz:{type:Schema.ObjectId,required:true,ref:'user',index:true}地板:[{type:Schema.ObjectId,ref:'floor',index:true}]})constfloorSchema=newSchema({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+CSSCSS不谋而合，就像它是为他们设计的。正是因为前期形成了一些难以描述的概念，我才能尝试填补这个作品中的设计空白。5.3总结在做这个项目的过程中，我意识到大项目来之不易。说起来容易做起来难，即使是看似简单的应用程序也不是一件容易的事。我尝试从事的项目越大，我就越觉得自己理解得太广了。想要做的精细，还需要时间和不断的思考。原文地址：http://blog.freeedit.cn/2017/06/12/Yihang-Tieba-Introduction/一航：http://blog.freeedit.cn/about/2017/6/1210:078906字
