话不多说,先放项目体验地址 (适配移动端) :
前端技术栈
- 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是个不错的选择) - 尝试盈利,有了一定的流量后可以开始接入广告,例如
淘宝联盟
。从初级淘宝客
到拥有钻石展位
,一路升级打怪,很有意思。
结语
对我而言,完成这个项目最大的收获应该是视野的提升。看问题的角度不仅仅局限于前端,也使得我在实际的工作中能承担更多的任务和责任。