00 开始之前:工具、文件和互联网应用的基本概念
00 开始之前:工具、文件和互联网应用的基本概念
本章你会做出什么
这一章不写业务代码。你会准备开发环境,学会打开终端和确认工具安装成功,并理解后续章节频繁出现的词语。
先理解三个概念
1. 文件夹、文件路径和编辑器
文件夹用于把代码分组保存,例如 servicedesk-practice 是项目文件夹,client 是前端文件夹。文件路径就是文件所在的位置:
E:\study\servicedesk-practice\client\src\main.ts
Windows 路径以盘符开始,使用反斜杠 \。VS Code 是用来打开文件夹、编辑代码和观察报错的工具。
2. 终端、命令、依赖包和开发服务器
PowerShell 是 Windows 上的终端。你输入一行命令,电脑执行一项操作:
mkdir servicedesk-practice
cd servicedesk-practice
-
mkdir创建文件夹。 -
cd进入文件夹。 -
依赖包是别人已经写好的通用代码,例如 Vue、Express、Axios。
-
npm是 Node.js 附带的包管理工具,负责下载依赖和执行脚本。 -
开发服务器是开发期间运行的本地程序。前端服务器把页面展示在浏览器中;后端服务器接受请求并返回数据。
3. 前端、后端和数据库
浏览器中看到和点击的页面叫前端。处理登录、权限、工单保存与统计的服务叫后端。将数据长期保存下来的系统叫数据库。
在本项目中:
浏览器中的 Vue 页面 -> HTTP 请求 -> Express 接口 -> 内存数据或 MySQL
前 12 章先把数据放在后端程序的内存中。关闭程序后数据恢复默认值,但你能更快学会业务逻辑。第 13 章再接入 MySQL,让数据长期保存。
必须认识的名词
HTML、CSS、JavaScript 与 TypeScript
| 名称 | 白话作用 | 在本项目的用途 |
|---|---|---|
| HTML | 页面上的标题、表单、按钮等结构 | Vue 模板中的标签 |
| CSS | 控制颜色、间距、布局和大小 | 美化后台页面 |
| JavaScript | 让页面响应点击并请求数据 | Vue 与 Node.js 的运行语言 |
| TypeScript | 给 JavaScript 增加类型检查 | 防止把工单状态写错 |
TypeScript 最终会被工具转换为浏览器或 Node.js 能运行的 JavaScript。初学时可以把它理解成“更容易提前发现错误的 JavaScript”。
Vue、组件和 Vite
-
Vue 是前端框架,它让我们用数据驱动页面更新。
-
组件是一块可复用页面,例如
StatusTag.vue专门显示工单状态。 -
.vue单文件组件通常同时包含模板、脚本和样式。 -
Vite 是前端开发与构建工具,它会启动快速的本地开发服务器。
Node.js、Express 与接口
-
Node.js 让 JavaScript 可以在浏览器之外运行,例如运行后端服务器。
-
Express 是编写 HTTP 接口的后端框架。
-
接口,也叫 API,是前端向后端请求数据的约定。
例如登录页发送账号密码:
POST /api/v1/auth/login
后端验证成功后返回用户信息和 Token。
JSON 与 HTTP 请求
JSON 是前后端交换数据的常用文本格式:
{
"username": "user",
"password": "123456"
}
HTTP 请求包含方法和路径:
| 方法 | 用途例子 |
|---|---|
GET |
获取工单列表 |
POST |
创建工单或登录 |
PATCH |
修改工单 |
PUT |
保存一份完整权限配置 |
数据库表、Token 和权限码
-
数据库表像一张结构固定的表格,
tickets表的一行表示一张工单。 -
Token 是登录成功后后端发给浏览器的身份凭证。之后请求携带 Token,后端才知道是谁在操作。
-
权限码是一项可执行能力的名字,如
ticket:assign表示可以分配工单。
前端隐藏无权操作的按钮是为了界面友好;后端仍必须校验权限,不能只相信前端。
本章最终目录变化
本章还没有源代码。你可以在学习父目录创建一份环境记录,便于后续排查:
study/
environment-check.md
一步一步操作
第 1 步:安装 Node.js 20 LTS
- 打开 Node.js 下载页面。
- 选择 LTS 版本,版本号需为
20或更高。 - 运行安装程序,保持默认选项。
- 安装结束后关闭并重新打开 PowerShell。
第 2 步:安装 VS Code
- 打开 VS Code 下载页面。
- 安装 Windows 版本。
- 安装过程中可勾选“将 Code 添加到 PATH”,便于在终端用
code .打开当前目录。
第 3 步:打开 PowerShell
按键盘 Win 键,输入 PowerShell,点击打开。终端中最左侧显示当前所在目录,例如:
PS C:\Users\your-name>
第 4 步:确认安装成功
在 PowerShell 中逐行执行:
node -v
npm -v
code -v
你应该看到类似结果:
v20.19.0
10.8.2
1.100.0
小版本数字可以不同。关键要求是 node -v 的第一段版本至少为 v20。
第 5 步:准备练习位置
选择一个没有中文空格问题、容易找到的位置。下面示例使用 D:\study:
D:
mkdir study
cd study
code .
本教程下一章开始会在这里建立 servicedesk-practice 文件夹。
关键文件完整代码
本章唯一建议保存的文件是 environment-check.md。安装完成后填写你的实际版本:
# 我的开发环境
- 操作系统:Windows 11
- Node.js:v20.x.x
- npm:10.x.x
- VS Code:1.x.x
- 练习父目录:D:\study
这里不是业务代码,但能帮助你在安装依赖或求助时准确说明环境。
启动并验证
本章的验证不是网页,而是工具能运行:
node -e "console.log('Node 可以运行')"
预期输出:
Node 可以运行
常见报错与原因
| 现象 | 原因 | 处理方法 |
|---|---|---|
node 不是可识别的命令 |
未安装或安装后终端没有重开 | 重装 Node.js,关闭后重新打开 PowerShell |
code 不是可识别的命令 |
VS Code 未加入 PATH | 从开始菜单打开 VS Code,或重装并勾选 PATH |
npm 执行脚本被系统禁止 |
PowerShell 执行策略限制 | 使用 npm.cmd -v;如长期出现,请查询公司电脑的执行策略要求 |
| 路径中找不到文件 | 当前目录不对 | 执行 pwd 查看所在目录,执行 ls 查看当前文件 |
本章完成清单
-
我知道前端负责页面,后端负责接口和业务校验。
-
我知道 Token 与权限码不是同一个东西。
-
我安装了 Node.js 20 或更高版本和 VS Code。
-
node -v、npm -v、code -v均能输出版本。 -
我准备好了用于练习的父文件夹。
面试时这一章能怎么讲
环境安装本身不是亮点,但你需要能准确介绍项目技术栈:
项目采用 Vue 3 和 TypeScript 开发前端,使用 Vite 构建;后端使用 Node.js 与 Express 提供 REST API。第一阶段使用内存数据快速验证业务闭环,之后增加 MySQL 持久化支持。