一次全栈实践心得

话很少说，先放项目体验地址 (适配移动端) ：掌上饥荒

前端技术栈

• vue
• vue-router
• vuex
• webpack
• axios
• better-scroll
• lavas
• vuetify

后端技术栈

• egg
• express
• mysql
• mongo

运维

• nginx
• pm2
• https
• oss对象存储
• cdn
• dns云解析

起始

在开始作以前，个人技术栈中只有vue相关的前端知识。后端只了解一点mysql，运维零基础。一路支撑我走过来的动力，除了项目自己的价值以外，很大一部分在于探索未知技术领域的新奇感。

前端

自17年三月chrome提出渐进式web应用后我就一直很关注，就想着实践一下。从lavas开始说吧，lavas的初衷是快速地接入pwa的相关特性，包括骨架屏，离线缓存，AppShell等等。

• 骨架屏简单来讲就是替代loader，在用户等待页面加载时，更加耐心。骨架屏对于用户体验的提高很大，淘宝，饿了吗的页面大量地用到了骨架屏。
• AppShell是指把公共的组件像header，slider，底部导航等抽象出来放到根组件。其它拥有路由的页面只须要配置参数，以及根据eventBus传递的事件作处理就能够了，比起以前往子组件导入公共组件的方式优雅很多。
• 离线缓存，是指即便在无网的状况下，页面仍是会显示基础的app结构，而不是未链接互联网。service worker的使用是一个难点，各位有兴趣能够去lavas官方站点看看，那里有不错的文档。

后端

最开始我只是想提供一些数据服务，后端用express写了一些简单的接口，用mongo存储非结构化的物品资料的数据。部署的时候会用到pm2，pm2的做用是代码出错node会自动重启，而不是整个服务崩溃。刚上线的时候发现被植入了广告，是一种被称之为dns劫持的东西。就是第三方网络运营商在dns服务器上作了手脚，开个dns云解析就行了。

随着用户增长，我开始想实践一些更复杂的功能，因而就接入了用户系统。就是登陆，注册，发文，评论，回复这些功能。express很难支撑社区相关的业务逻辑，我须要一种更严谨的后端架构，因而开始使用egg。egg时基于的koa的，开发体验跟java后端那种mvc的开发模式很像：

• router负责调度请求给controller处理
• controller处理具体业务逻辑
• service负责跟数据打交道，一些增删改查的逻辑 不只如此，egg还有本身的插件接入mysql和mongo，而且制定了严格的规范。值得一提的是，使用egg接入阿里云的一些服务会很方便。好比接入oss作文件上传。顺带一提，oss的功能很强大，好比你想使用不一样尺寸或者不一样压缩比的图片，只须要在图片路径后添加在oss控制台添加好的样式名就能够了，而不用去改源文件。oss接入cdn也很是方便，网络链路层的优化对于静态资源加载速度的提高很大。

服务端

同源策略中有一项是同协议，也就是说http访问不了https的接口，因此为了实践pwa相关的特性作了全站https。

阿里云和腾讯云其实都提供了免费的https证书，不过不是通配符型的，也就是说你的二级域名用不了。因为开了express和egg两个服务，因此我分别申请了阿里云和腾讯云的证书，用nginx作代理。为了使以前老用户能够正常访问，还须要把http的80端口重定向到https的443端口。https部署的过程如今看来其实很简单，就是把证书放到站点指定目录下，而后更改nginx的配置就能够了，不过因为以前没接触过运维相关的知识，折腾了很多时间。

如何坚持下去

我的项目很容易烂尾，究其缘由是得不到即时反馈。我有一些建议，帮助你持续坚持下去：

• 项目的出发点能极大地调动你的积极性，要么有给你带来财富自由的可能，要么能促进社区成长，成就我的荣誉
• 拥抱社区，弄清楚你的直系用户，并在他们常常汇集的论坛分享你的想法和进度，获取反馈（百度贴吧）
• 接入统计，观察站点天天浏览量和新增用户的起伏就是一个很好的反馈（Growingio是个不错的选择）
• 尝试盈利，有了必定的流量后能够开始接入广告，例如淘宝联盟。从初级淘宝客到拥有钻石展位，一路升级打怪，颇有意思。

结语

对我而言，完成这个项目最大的收获应该是视野的提高。看问题的角度不只仅局限于前端，也使得我在实际的工做中能承担更多的任务和责任。