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 服务，以保持页面请求路径和生产接口结构一致。