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 持久化支持。