分类： 作品

TL;DR.

前些天做了个覆盖面很广的项目：FastTest。涉及到静态网站、node.js 后端 API、响应式、多语言、Vue3 全家桶、前端工具链、nginx 配置等一系列技术，都是很基础的应用，相信对大家入门很有帮助。

GitHub：https://github.com/meathill/fasttest

欢迎阅读学习，有任何问题均可提问或提 issue。

---

前些日子有个朋友找到我，想请我帮他做个项目。我看了一眼需求，不太想接：这个项目太小，要多了不合适；要少了感觉又不值当——有那时间还不如砍两把胖虎。

后来我仔细一想，感觉这个项目很适合拿来做教程，而且是非常全面的全栈入门教程。

先来看需求。他的需求很简单：开发一个测速应用。用户打开页面，点击按钮，然后下载一些东西，下载完成之后，告诉他他的网速是多少。与之前的测速产品不同，这个应用不下载大文件，而是从各种 CDN 下载 JS 库和 SDK，因为大部分 web 应用都依赖这些资源，所以可能更接近真实体验。

关于需求我们不深入讨论（我觉得挺有道理，但也未必有道理到哪儿去……），只看实现。为了满足这个需求，我们需要开发这些东西：

1. 静态页，让用户能够测速。这就需要：
   1. HTML+CSS+JS，静态资源
   2. 响应式，支持桌面和移动端
   3. 多语言支持
2. 后台，能调整待测资源、修改翻译、控制广告、查看数据。这就需要：
   1. 友好的 Admin panel：vue 全家桶
   2. 后端 API：express.js + node.js server
   3. 自动发布静态页（webpack 前端工具链）
3. 部署到服务器：
   1. 静态服务供给用户端页面和资源
   2. SPA 服务，提供后台 Admin Panel 给管理员
   3. 反向代理 express.js API
   4. 配置 CDN
4. 其它，比如版本管理、前端预处理工具，等等

这些东西可以说是非常全栈，除了没有移动 App、没有数据库操作，其它 Web 开发的东西都用到了。而且涉及到技术也都很基础，没有特别深入的东西。再加上，这个项目会上线，会迭代，是个真实产品。所以，很适合拿来做教程，大部分观众，不管是什么背景，都可以拿来入门。

于是我就答应了，然后断断续续在直播的时间把它做了出来。当然还有一些问题，不过大部分功能都就绪了。

项目放在 GitHub 上：https://github.com/meathill/fasttest，有需要的同学请自由取用。对其中任何技术点有问题都可以提问或者开 issue。

网站地址在 https://afasttest.com。

视频还需要一些时间来整理，将来慢慢放出来吧。着急且有时间的同学可以自行从百度网盘下载：https://pan.baidu.com/s/1KPuCM-9gPd0hQsr5Df_PnA 提取码: w8f2。