一次全栈实践心得

在开始做之前，我的技术栈中只有 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是个不错的选择）
• 尝试盈利，有了一定的流量后可以开始接入广告，例如 淘宝联盟 。从初级 淘宝客 到拥有 钻石展位 ，一路升级打怪，很有意思。

结语

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