TL;DR.
前些天做了个覆盖面很广的项目:FastTest。涉及到静态网站、node.js 后端 API、响应式、多语言、Vue3 全家桶、前端工具链、nginx 配置等一系列技术,都是很基础的应用,相信对大家入门很有帮助。
GitHub:https://github.com/meathill/fasttest
欢迎阅读学习,有任何问题均可提问或提 issue。
前些日子有个朋友找到我,想请我帮他做个项目。我看了一眼需求,不太想接:这个项目太小,要多了不合适;要少了感觉又不值当——有那时间还不如砍两把胖虎。
后来我仔细一想,感觉这个项目很适合拿来做教程,而且是非常全面的全栈入门教程。
先来看需求。他的需求很简单:开发一个测速应用。用户打开页面,点击按钮,然后下载一些东西,下载完成之后,告诉他他的网速是多少。与之前的测速产品不同,这个应用不下载大文件,而是从各种 CDN 下载 JS 库和 SDK,因为大部分 web 应用都依赖这些资源,所以可能更接近真实体验。
关于需求我们不深入讨论(我觉得挺有道理,但也未必有道理到哪儿去……),只看实现。为了满足这个需求,我们需要开发这些东西:
- 静态页,让用户能够测速。这就需要:
- HTML+CSS+JS,静态资源
- 响应式,支持桌面和移动端
- 多语言支持
- 后台,能调整待测资源、修改翻译、控制广告、查看数据。这就需要:
- 友好的 Admin panel:vue 全家桶
- 后端 API:express.js + node.js server
- 自动发布静态页(webpack 前端工具链)
- 部署到服务器:
- 静态服务供给用户端页面和资源
- SPA 服务,提供后台 Admin Panel 给管理员
- 反向代理 express.js API
- 配置 CDN
- 其它,比如版本管理、前端预处理工具,等等
这些东西可以说是非常全栈,除了没有移动 App、没有数据库操作,其它 Web 开发的东西都用到了。而且涉及到技术也都很基础,没有特别深入的东西。再加上,这个项目会上线,会迭代,是个真实产品。所以,很适合拿来做教程,大部分观众,不管是什么背景,都可以拿来入门。
于是我就答应了,然后断断续续在直播的时间把它做了出来。当然还有一些问题,不过大部分功能都就绪了。
项目放在 GitHub 上:https://github.com/meathill/fasttest,有需要的同学请自由取用。对其中任何技术点有问题都可以提问或者开 issue。
网站地址在 https://afasttest.com。
视频还需要一些时间来整理,将来慢慢放出来吧。着急且有时间的同学可以自行从百度网盘下载:https://pan.baidu.com/s/1KPuCM-9gPd0hQsr5Df_PnA 提取码: w8f2。
发表回复