Full Stack 150 mins
全栈程序员速成150mins
来自：3 mins Lab【一口气从零到全栈开发】
涉及：
HTML：网页开发标记语言
CSS：网页开发样式语言
JavaScript：实现连接前后端的接口，全栈程序员必备的语言技能
Vue：前端开发框架
Axios：用于前后端数据交互
Node.js：一个开源的、跨平台的 JavaScript 运行环境
MongoDB：NoSQL的文档型数据库
Cursor：内嵌AI的代码编辑器【重要】
Sealos：云开发管理平台【重要】
1. 前端预备知识
关于HTML和CSS的相辅相成的运用。
HTML
HTML主要就是一些<div>的组合，记住一些基础的标签就好。其他等用到再学习。
CSS
CSS是网页样式定义的基本形式，在style中写好class之后可以直接调用即可。可以与HTML页面联合使用可以完成大部分的网页制作。这个的学习也是推荐在项目中学习深入。
JavaScript
能够实现网页的逻辑功能，一方面可以完成网页里的交互行为，使其有意义，另一方面也可以实现和后端的交互，获取后端的数据和给后端传入数据。所以JS可以说对于想要入军全栈的朋友意义是非凡的。JS的学习主要是语法，结构，可以通过刷题的提升熟练度，当然也可以通过前后端项目来加深使用。
Vue
前端开发框架，主要是JavaScript语言来执行的。
2. 后端
Axios
这个项目里是用来实现异步的代码。
来自kimi：
async/await是现代 JavaScript 中用于处理异步操作的一种语法糖。
Node
开发环境，主要是JavaScript语言来执行的。
MongoDB
JSON风格的文档，要学会看JSON样式。
数据的存储包括了 字段、数据类型、值 等等
3. 工具
Cursor
和一般的AI的差异在于他可以直接帮你进行文件的操作，而且内嵌的是OpenAI或Cluade等的高性能大模型。
Sealos
云开发平台，一键管理你的代码和框架，帮你实现产品的上线，和Cursor配合使用可以极大提高开发效率。
4. 开发一个全栈项目
首先是进行数据库的创立。这里以MongoDB为例子，用于管理我们的数据。
然后进行后端开发框架的选择。这里由于是个人开发，为了和前端进行更好的连接，可以选择Node.js来开发。
随后进行后端代码的编写。一边编写可以一边进行接口的测试。关于接口测试，主要是curl语句。通过这些语句在命令行执行可以很好进行测试，为上线做准备。
进行前端框架的选择。选择Vue。其他主流的框架还有React、Flask等等。
进行前端代码的编写。前端主要是UI涉及，语法的难度不大，主要是需要一直进行调参，我之所以认为前端方向不适合我就是因为我个人容易陷入完美主义困境。而编程要求保持的就是一知半解的状态。
进行前后端的对接，前端接口需要接入后端的数据库，后端需要处理前端传入的数据，加入数据库进行管理，并返回前端需要的数据。总的来说是一个配合过程。
项目打包，部署上线。使用Sealos的devbox进行部署发布，可以得到后端的公网地址，作为前端代码的根目录。得到前端的公网地址作为访问项目的地址。
成功完成项目的前期工作，而更重要的是后期的维护和再开发。如何进行版本的迭代等等，这些是后续需要不断学习的过程。
5. 伴学知识点
我听课的时候并没有选择去做笔记，这篇Review其实是在完课了之后的回忆版本。用来做我个人的梳理文档。感兴趣的朋友可以以此文档进行二次开发。
5.1. AI工具的使用
分而治之的策略，AI就像一个老师，你和他好好说是包能学到东西的。
下面是本项目提示词工程的例子
用于Cursor代码开发。
后端提示词：
请为我开发一个基于 Node.js 和Express 框架的 Todo List 后端项目。项目需要实现以下四个 RESTful API 接口：
查询所有待办事项
接口名: GET /api/get-todo
功能: 从数据库的'list'集合中查询并返回所有待办事项
参数: 无
返回: 包含所有待办事项的数组
添加新的待办事项
接口名: POST /api/add-todo
功能: 向'list'集合中添加新的待办事项
参数: { "value": string, // 待办事项的具体内容 "isCompleted": boolean // 是否完成，默认为 false }
返回: 新添加的待办事项对象，包含自动生成的唯一 id
更新待办事项状态
接口名: POST /api/update-todo/
功能: 根据 id 更新指定待办事项的完成状态（将 isCompleted 值取反）
参数: id
返回: 更新后的待办事项对象
删除待办事项
接口名: POST /api/del-todo/
功能: 根据 id 删除指定的待办事项
参数: id
返回: 删除操作的结果状态
技术要求：
使用 Express 框架构建 API
使用 MongoDB 作为数据库，通过 Mongoose 进行数据操作
实现适当的错误处理和输入验证
使用异步/等待（async/await）语法处理异步操作
遵循 RESTful API 设计原则
添加基本的日志记录功能
以下是数据库连接方式： mongodb://root:xxxxxxxxxxxxxx
直接以当前目录作为项目根目。注意 此目录已经初始化完了nodejs项目 直接修改即可
如果需要执行命令，请暂停创建文件，让我先执行命令
为这个项目中的所有代码写上详细注释
前后端的开发提示词务必分开。AI也只有一个脑子。
前端提示词：
请为我开发一个基于 Vue 3 的Todo List 应用。要求如下：
功能需求：
添加新的待办事项
标记待办事项为完成/未完成
删除待办事项
统计待办事项完成度
过滤显示（全部/已完成/未完成）
UI/UX 设计要求：
全屏响应式设计，适配不同设备
拥有亮色模式和夜间模式
现代化、简洁的界面风格
丰富的色彩运用，但保持整体和谐
流畅的交互动画，提升用户体验
在按钮和需要的地方添加上图标
参考灵感：结合苹果官网的设计美学
要求：
直接以当前目录作为项目根目。注意 此目录已经初始化完了vue3项目结构 直接修改即可
如果需要执行命令，请暂停创建文件，让我先执行命令
请你根据我的需要，一步一步思考，给我开发这个项目。特别是UI部分 一定要足够美观和现代化
那这里总结一下 我们用Cursor完成了前端代码的开发 我们就是发送提示词写清楚我们的需求 以及出现问题 或者想调整功能和UI 继续 用文字和他持续沟通即可。
好好利用AI是真能挣钱！！！
5.2. 状态码的学习
2xx：成功状态码
4xx：客户端错误状态码：前端程序出错
5xx：服务器错误状态码：后端程序出错
5.3. Docker K8s
本项目具有 Docker K8s 的特性。
Docker是一个开源的容器化平台。
Kubernetes（简称K8s）是一个开源的容器编排平台，用于自动化容器化应用的部署、扩展和管理。
Last updated