02 创建前后端工程:让网页和接口都跑起来
02 创建前后端工程:让网页和接口都跑起来
本章你会做出什么
你会创建一个全新的 servicedesk-practice 项目,里面有 Vue 前端 client 和 Express 后端 server。最后在项目根目录执行一次 npm run dev,同时启动网页和接口。
先理解三个概念
1. 为什么分为 client 和 server
client 的代码在浏览器中运行,负责页面。server 的代码由 Node.js 运行,负责返回数据和校验权限。分开后职责清晰,也符合企业项目的常见结构。
2. package.json 与 npm workspace
每个 Node.js 项目都有 package.json,记录名称、依赖和脚本。workspace 让根目录统一管理 client 与 server 两个子项目,后续你不用进入两个目录分别安装所有依赖。
3. 端口
端口像本机程序的门牌号。本项目规定:
前端页面:http://localhost:5173
后端接口:http://localhost:3001/api/v1
本章最终目录变化
servicedesk-practice/
client/
src/
package.json
vite.config.ts
server/
src/
index.ts
package.json
tsconfig.json
package.json
一步一步操作
第 1 步:创建总目录和根项目
在你为学习准备的父目录中运行:
mkdir servicedesk-practice
cd servicedesk-practice
npm init -y
用 VS Code 打开当前项目:
code .
第 2 步:创建 Vue 前端
仍在 servicedesk-practice 根目录运行:
npm create vite@latest client -- --template vue-ts
这个命令会创建包含 Vue、TypeScript 和 Vite 的前端骨架。
第 3 步:创建 Express 后端
mkdir server
cd server
npm init -y
mkdir src
cd ..
第 4 步:将根目录配置成 workspace
将根目录 package.json 替换为下面的完整内容:
{
"name": "servicedesk-practice",
"private": true,
"type": "module",
"version": "1.0.0",
"workspaces": ["client", "server"],
"scripts": {
"dev": "concurrently -n server,client -c blue,green \"npm run dev -w server\" \"npm run dev -w client\"",
"build": "npm run build -w server && npm run build -w client",
"typecheck": "npm run typecheck -w server && npm run typecheck -w client"
},
"devDependencies": {
"concurrently": "^9.1.2"
},
"engines": {
"node": ">=20.0.0"
}
}
private: true 表示该练习项目不会误发布到 npm。concurrently 用于同时运行两端开发服务器。
第 5 步:安装前端后续要使用的库
npm install -w client vue-router pinia element-plus @element-plus/icons-vue axios echarts
第 6 步:配置后端依赖
将 server/package.json 替换为:
{
"name": "@servicedesk/server",
"private": true,
"version": "1.0.0",
"type": "module",
"scripts": {
"dev": "tsx watch src/index.ts",
"build": "tsc -p tsconfig.json",
"typecheck": "tsc -p tsconfig.json --noEmit"
},
"dependencies": {
"cors": "^2.8.5",
"express": "^5.1.0"
},
"devDependencies": {
"@types/cors": "^2.8.17",
"@types/express": "^5.0.1",
"@types/node": "^22.15.0",
"tsx": "^4.19.4",
"typescript": "^5.8.3"
}
}
安装根目录及两个 workspace 的依赖:
npm install
第 7 步:创建后端 TypeScript 配置
新建 server/tsconfig.json:
{
"compilerOptions": {
"target": "ES2022",
"module": "NodeNext",
"moduleResolution": "NodeNext",
"strict": true,
"esModuleInterop": true,
"forceConsistentCasingInFileNames": true,
"skipLibCheck": true,
"outDir": "dist",
"rootDir": "src"
},
"include": ["src/**/*.ts"]
}
第 8 步:写一个最小后端服务器
新建 server/src/index.ts:
import cors from 'cors'
import express from 'express'
const app = express()
const port = 3001
app.use(cors())
app.use(express.json())
app.get('/api/v1/health', (_request, response) => {
response.json({
code: 0,
message: 'ok',
data: {
status: 'up',
database: 'memory'
}
})
})
app.listen(port, () => {
console.log(`ServiceDesk API running at http://localhost:${port}/api/v1`)
})
第 4 章会把这个文件拆成更规范的配置、应用和启动文件。本章先确认后端能运行。
第 9 步:让前端请求转发到后端
打开 Vite 生成的 client/vite.config.ts,替换为:
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
export default defineConfig({
plugins: [vue()],
server: {
port: 5173,
proxy: {
'/api': 'http://localhost:3001'
}
}
})
代理的含义是:前端代码请求 /api/v1/health 时,由 Vite 转发到后端端口,开发阶段不需要在每个请求中写完整域名。
关键文件完整代码
本章需要保证以下文件已经完整创建:
| 文件 | 作用 |
|---|---|
package.json |
同时启动两个 workspace |
server/package.json |
安装 Express 与 TypeScript 开发工具 |
server/tsconfig.json |
开启严格类型检查 |
server/src/index.ts |
返回第一个健康检查结果 |
client/vite.config.ts |
代理 /api 请求 |
它们的完整内容均已在上面的步骤中给出。Vite 自动生成的 client/src/App.vue 暂时不需要修改。
启动并验证
同时启动前后端
在项目根目录运行:
npm run dev
终端应该同时显示 Vite 页面地址和 API 启动地址。不要关闭这个终端。
验证页面
在浏览器打开:
http://localhost:5173
应该看到 Vite 默认欢迎页面。
验证接口
另开一个 PowerShell,执行:
Invoke-RestMethod http://localhost:3001/api/v1/health
应该能看到 code 为 0,status 为 up,database 为 memory。
按 Ctrl + C 可停止开发服务器。
常见报错与原因
| 报错 | 原因 | 处理 |
|---|---|---|
npm create vite 下载失败 |
网络或 npm 镜像暂时不可用 | 换网络后重试命令 |
EADDRINUSE: 3001 |
已有后端程序占用端口 | 关闭旧终端中的服务,再运行 |
Cannot find package 'express' |
没有在根目录安装依赖 | 确认位于根目录后执行 npm install |
| 浏览器只有 Vite 页面、接口访问失败 | 只启动了前端 | 从根目录执行 npm run dev 并确认 server 输出 |
本章完成清单
- 我的练习目录下有
client和server。 - 我知道两个目录分别负责什么。
-
npm run dev能同时启动两端。 - 浏览器能打开前端页面。
- PowerShell 能请求健康检查接口。
面试时这一章能怎么讲
项目采用前后端分离结构,根目录使用 npm workspace 统一管理依赖和开发脚本;开发环境中由 Vite 代理
/api到 Express 服务,以保持页面请求路径和生产接口结构一致。