辻嬄1. 项目背景与目标
作为山东大学软件学院23级创新实训的首篇个人记录，这个项目标志着本科阶段首次系统性工程实践的开始。不同于常规课程作业，创新实训更强调真实场景下的技术应用与问题解决能力培养。从标题中的"（一）"可以看出，这是系列记录的开篇，通常会包含环境搭建、技术选型和初期开发等内容。
在高校软件工程教育中，这类实训往往具有以下典型特征：
- 采用企业级开发流程（如敏捷开发）
- 使用版本控制系统（Git）进行协作
- 需要完成从需求分析到部署上线的完整生命周期
- 强调文档编写和过程记录
需要模型API调用？ 免费领10W Token，多模型网关一键接入 Claude、DeepSeek 等主流模型。
2. 技术栈分析与选型
2.1 前端技术选择
根据软件学院往届项目经验，前端技术通常会在以下方案中选择：
| 技术方案 | 适用场景 | 学习曲线 | 社区支持 |
|---|---|---|---|
| React + Ant Design | 管理后台类应用 | 中等 | 丰富 |
| Vue3 + Element Plus | 快速原型开发 | 平缓 | 完善 |
| 原生HTML/CSS/JS | 基础教学项目 | 低 | 广泛 |
考虑到实训周期（通常4-8周）和团队协作需求，建议选择组件化框架。Vue的单文件组件结构对初学者更友好，而React的生态更丰富但学习成本略高。
2.2 后端技术考量
后端技术选型需要特别注意与课程知识的衔接：
python复制# 示例：Flask基础路由配置
from flask import Flask
app = Flask(__name__)
@app.route('/api/data')
def get_data():
return {'status': 'success', 'data': [...]}
常见选择包括：
- Python Flask/Django：适合数据处理类项目
- Java Spring Boot：适合复杂业务系统
- Node.js Express：适合全栈JavaScript项目
数据库方面，MySQL是教学标配，但MongoDB对JSON数据更友好。建议根据项目数据类型选择：
- 关系型数据：MySQL/PostgreSQL
- 非结构化数据：MongoDB
- 缓存需求：Redis
3. 开发环境搭建实录
3.1 标准化开发环境
推荐使用VS Code作为主力编辑器，配置统一的插件集：
- ESLint/Vetur：代码规范检查
- Prettier：代码格式化
- GitLens：版本控制可视化
- REST Client：API测试
bash复制# 项目初始化示例
mkdir project-name && cd project-name
npm init -y
git init
echo "node_modules" > .gitignore
3.2 协作工具链配置
- 代码仓库：建议使用GitLab校内仓库或GitHub Classroom
- 项目管理：使用GitHub Projects或禅道进行任务跟踪
- 文档协作：Markdown + Git或飞书文档
- CI/CD：最简单的GitHub Actions配置示例：
yaml复制name: Node.js CI
on: [push]
jobs:
build:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v2
- run: npm install
- run: npm test
4. 常见问题解决方案
4.1 依赖冲突处理
当出现npm install失败时，按以下步骤排查：
- 删除node_modules和package-lock.json
- 检查Node.js版本（建议使用LTS版本）
- 使用
npm cache clean --force清理缓存 - 换用yarn或pnpm进行安装
4.2 API调试技巧
使用VS Code的REST Client插件进行接口测试：
code复制### 获取用户列表
GET http://localhost:3000/api/users
Content-Type: application/json
{
"page": 1,
"size": 10
}
5. 项目规范建议
5.1 代码规范
- 组件/文件命名采用PascalCase
- 接口定义使用TypeScript
- 提交信息遵循Conventional Commits规范
- 重要函数必须写JSDoc注释
typescript复制/**
* 计算两个坐标点之间的距离
* @param {number[]} pointA - 起点坐标 [x,y]
* @param {number[]} pointB - 终点坐标 [x,y]
* @returns {number} 两点间距离
*/
function calculateDistance(pointA: number[], pointB: number[]): number {
return Math.hypot(pointB[0]-pointA[0], pointB[1]-pointA[1]);
}
5.2 文档规范
建议包含以下文档：
- README.md：项目概览和快速开始
- ARCHITECTURE.md：系统架构说明
- API.md：接口文档
- CHANGELOG.md：版本变更记录
6. 效率提升技巧
- 代码片段管理：使用VS Code的User Snippets功能
- 终端优化：配置oh-my-zsh + powerlevel10k主题
- 接口Mock：使用Mock.js快速生成测试数据
- 可视化调试：React Developer Tools/Vue Devtools
javascript复制// Mock.js示例
const Mock = require('mockjs')
const data = Mock.mock({
'list|10': [{
'id|+1': 1,
'name': '@cname',
'age|18-60': 1
}]
})
在实训初期，建议每天花10分钟进行团队站会，同步以下内容：
- 昨日进展
- 今日计划
- 遇到问题
- 需要协助
这种记录方式既能保证项目透明度，也为后续的实训报告积累了素材。当项目涉及复杂状态管理时，可以考虑使用Redux或Vuex，但要注意避免过早优化。对于大多数课程项目来说，Context API或Composition API已经足够。