雅思口语练习网站新手避坑实战指南

面试被问原理答不上来，这是很多应届毕业生的噩梦。你代码写得飞起，但一问到设计思路就卡壳。新手避坑的关键，在于动手从零搭建一个完整项目，比如这个雅思口语练习网站。别被名字吓到，它核心是前端交互与后端数据流的结合，非常适合练手。

项目目标与需求拆解

很多新手一上来就写代码，结果方向跑偏。我们先明确要做什么。这个网站的核心功能有三个：一是用户输入口语录音，进行简单的文本转写（这里用模拟接口代替真实AI，避免复杂配置）；二是展示常见的雅思口语题库，支持分类筛选；三是记录用户的练习历史，生成简单的统计图表。

为什么选这个主题？因为面试中常问“你做过什么前端项目”，这种带点业务逻辑、有数据交互的站点，比单纯的静态页面更有说服力。而且它涵盖了表单处理、异步请求、状态管理、本地存储等高频考点。

我们不需要真的调用昂贵的语音识别API，重点在于前端的用户体验和数据流转。后端可以用Node.js + Express搭一个简单的Mock服务，返回固定的题库数据和模拟的评分结果。这样既保证了项目的完整性，又不会因为外部依赖过多导致环境配置地狱。

目录结构与工程化配置

项目结构清晰是工程化的第一步。我们采用Vite + Vue3 + TypeScript的技术栈，因为Vite启动快，TypeScript能帮我们在编码阶段就发现类型错误，这也是很多大厂面试中会考察的基础素养。

project-root
├── client              # 前端代码
│   ├── public
│   ├── src
│   │   ├── components  # 通用组件，如录音按钮、题库列表
│   │   ├── views       # 页面组件，如首页、练习页、统计页
│   │   ├── stores      # Pinia状态管理
│   │   ├── utils       # 工具函数，如时间格式化、音频处理
│   │   ├── api         # 接口封装，统一处理请求
│   │   ├── App.vue
│   │   └── main.ts
│   └── package.json
├── server              # 后端Mock服务
│   ├── routes
│   │   └── question.ts # 题库路由
│   │   └── score.ts    # 模拟评分路由
│   ├── index.ts
│   └── package.json
└── README.md

初始化项目时，注意不要直接复制网上的配置。自己跑一遍npm create vite@latest，选择Vue + TS模板。安装依赖时，推荐显式安装axios用于请求，pinia用于状态管理，vue-router用于路由。

一个常见的坑是代理配置。前端开发时端口是5173，后端是3000，直接跨域请求会被浏览器拦截。在vite.config.ts中配置代理是标准解法：

// vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'export default defineConfig({plugins: [vue()],server: {port: 5173,proxy: {'/api': {target: 'http://localhost:3000',changeOrigin: true,rewrite: (path) => path.replace(/^\/api/, '')}}}
})

这段配置的意思是，所有以/api开头的请求，都会被转发到后端3000端口，并去掉/api前缀。这样前端代码里写fetch('/api/questions')，实际请求的是http://localhost:3000/questions，完美解决跨域问题。

核心代码实现：从录音到数据流

接下来进入核心编码环节。我们分模块讲解，每个部分都对应面试中的高频考点。

1. 音频录制与上传

录音功能依赖浏览器的MediaRecorder API。很多新手只知道怎么调API，但不清楚底层原理。根据MDN Web Docs的定义，MediaRecorder用于将音频或视频编码为一系列帧，并将其写入文件。

// utils/recorder.ts
export class AudioRecorder {private mediaRecorder: MediaRecorder | null = nullprivate chunks: Blob[] = []private stream: MediaStream | null = nullasync start() {try {this.stream = await navigator.mediaDevices.getUserMedia({ audio: true })this.mediaRecorder = new MediaRecorder(this.stream)this.chunks = []this.mediaRecorder.ondataavailable = (event) => {if (event.data.size > 0) {this.chunks.push(event.data)}}this.mediaRecorder.start(100) // 每100ms收集一次数据块console.log('Recording started')} catch (err) {console.error('Error accessing microphone:', err)throw new Error('Microphone access denied')}}stop(): Promise<Blob> {return new Promise((resolve, reject) => {if (!this.mediaRecorder || this.mediaRecorder.state === 'inactive') {reject(new Error('Recorder is not active'))return}this.mediaRecorder.onstop = () => {const audioBlob = new Blob(this.chunks, { type: 'audio/webm' })// 停止所有音轨，释放资源this.stream?.getTracks().forEach(track => track.stop())this.mediaRecorder = nullthis.stream = nullresolve(audioBlob)}this.mediaRecorder.stop()})}
}

逐行讲解重点：

getUserMedia是异步操作，必须await，否则拿不到流。
ondataavailable回调中，event.data是二进制数据块，需要累积到chunks数组中。
stop()返回Promise，因为停止录音是异步过程，需要等待所有数据块收集完毕。
避坑点：很多新手忘记track.stop()，导致麦克风指示灯一直亮着，资源泄露。这是面试中问“如何优化前端性能”时的常见细节题。

2. 题库展示与筛选

题库页面需要支持按分类（如Part 1, Part 2, Part 3）筛选。这里我们使用Pinia来管理状态。

// stores/questionStore.ts
import { defineStore } from 'pinia'
import { ref, computed } from 'vue'
import { fetchQuestions } from '@/api/question'export const useQuestionStore = defineStore('question', () => {const questions = ref<Question[]>([])const selectedCategory = ref<string>('all')const loading = ref(false)const error = ref<string | null>(null)// 计算属性：筛选后的题库const filteredQuestions = computed(() => {if (selectedCategory.value === 'all') {return questions.value}return questions.value.filter(q => q.category === selectedCategory.value)})// 动作：加载题库数据const loadQuestions = async () => {loading.value = trueerror.value = nulltry {const data = await fetchQuestions()questions.value = data} catch (err) {error.value = 'Failed to load questions'console.error(err)} finally {loading.value = false}}// 动作：切换分类const setCategory = (category: string) => {selectedCategory.value = category}return {questions,selectedCategory,loading,error,filteredQuestions,loadQuestions,setCategory}
})

面试考点解析：

响应式原理：computed依赖questions和selectedCategory，当其中任何一个变化时，filteredQuestions会自动重新计算。这是Vue3响应式系统的核心。
状态管理：为什么用Pinia而不是直接放在组件里？因为题库数据可能被多个组件使用（如练习页、统计页），集中管理便于共享和调试。
异步错误处理：try...catch...finally结构保证了无论成功失败，loading状态都能正确重置，避免UI卡死。

3. 模拟评分与历史存储

用户提交录音后，我们调用后端Mock接口获取模拟评分。同时，将练习记录存入localStorage。

// api/score.ts
import axios from 'axios'export interface ScoreResult {id: stringtimestamp: numberscore: numberfeedback: string
}export const submitRecording = async (audioBlob: Blob): Promise<ScoreResult> => {const formData = new FormData()formData.append('audio', audioBlob, 'recording.webm')// 注意：Content-Type由浏览器自动设置为multipart/form-dataconst { data } = await axios.post('/api/score', formData)return data
}

// utils/storage.ts
import { ScoreResult } from '@/api/score'const STORAGE_KEY = 'ielts_practice_history'export const saveScore = (result: ScoreResult) => {const history = getHistory()history.push(result)// 只保留最近50条记录，避免存储溢出if (history.length > 50) {history.shift()}localStorage.setItem(STORAGE_KEY, JSON.stringify(history))
}export const getHistory = (): ScoreResult[] => {const data = localStorage.getItem(STORAGE_KEY)return data ? JSON.parse(data) : []
}

避坑点：

localStorage是同步API，大量数据读写会阻塞主线程。我们限制存储条数，并在读取时使用try...catch防止JSON解析错误。
FormData上传文件时，不要手动设置Content-Type header，浏览器会自动添加boundary参数，手动设置会导致后端解析失败。

运行与测试：验证你的工程能力

代码写完只是开始，能跑起来、能测过才是硬道理。

本地运行步骤

启动后端：进入server目录，npm run dev。确保Express监听在3000端口。
启动前端：进入client目录，npm run dev。浏览器访问http://localhost:5173。
测试录音：点击录音按钮，允许浏览器麦克风权限，说几句话，停止录音。
验证数据流：打开浏览器开发者工具Network面板，查看/api/score请求，确认请求体包含音频文件，响应返回模拟分数。查看Console，确认无错误日志。

单元测试示例

面试中常问“你做过单元测试吗？覆盖率多少？”。我们用Vitest写一个简单的工具函数测试。

// utils/timeFormat.test.ts
import { describe, it, expect } from 'vitest'
import { formatTimestamp } from './timeFormat'describe('formatTimestamp', () => {it('should format timestamp to readable string', () => {const timestamp = new Date('2023-10-27T10:00:00').getTime()expect(formatTimestamp(timestamp)).toBe('2023-10-27 10:00:00')})it('should handle invalid timestamp', () => {expect(formatTimestamp(NaN)).toBe('Invalid time')})
})

在package.json中添加"test": "vitest"，运行npm test。绿色通过说明测试有效。虽然这个项目简单，但展示你有测试意识，这在应届生面试中是加分项。

优化扩展与性能思考

项目能跑之后，面试官可能会问“还能怎么优化？”。

1. 懒加载路由

如果页面多了，初始加载会变慢。使用import()实现路由懒加载：

// router/index.ts
const routes = [{path: '/',name: 'home',component: () => import('@/views/HomeView.vue')},{path: '/practice',name: 'practice',component: () => import('@/views/PracticeView.vue')}
]

这样，只有访问对应页面时，才会下载对应的JS chunk。