软件工程学习日志2025.10.27

news/2025/10/27 20:52:23/文章来源:https://www.cnblogs.com/dynastyeast/p/19170117

🎯 今日目标

完成基于Trae框架的IT岗位求职记录系统开发，重点训练数据库的增删改查操作能力

💻 项目启动：9:00 AM

技术选型确定

今天开始着手开发老师布置的IT岗位求职记录系统。经过技术调研，我决定采用以下技术栈：
• 前端框架：Vue.js 3（组合式API）

• HTTP客户端：Trae（轻量级HTTP库）

• UI组件库：Element Plus

• 模拟后端：JSON Server

• 开发工具：VS Code + Vue Devtools

初始化项目

vue create job-tracker-system
cd job-tracker-system
npm install trae element-plus
npm install -g json-server

项目结构设计

src/
├── api/
│ └── trae.js # Trae配置
├── services/
│ └── jobService.js # 岗位相关API
├── components/
│ ├── JobList.vue # 岗位列表
│ ├── AddJob.vue # 添加岗位
│ └── EditJob.vue # 编辑岗位
├── views/
│ ├── Home.vue # 首页
│ └── Jobs.vue # 岗位管理
└── App.vue

🚀 核心开发：10:30 AM - 12:00 PM

Trae配置实现

首先配置Trae作为HTTP客户端，这是本次训练的重点：
// src/api/trae.js
import trae from 'trae';
import { ElMessage } from 'element-plus';

const api = trae.create({
baseUrl: 'http://localhost:3001',
mode: 'cors'
});

// 请求拦截器
api.before((request) => {
console.log(🚀 发送请求: ${request.method} ${request.url});
return request;
});

// 响应拦截器
api.after((response) => {
if (response.status >= 200 && response.status < 300) {
return response.data;
} else {
ElMessage.error(请求失败: ${response.status});
throw new Error(HTTP Error: ${response.status});
}
});

export default api;

岗位服务层封装

封装了完整的CRUD操作服务：
// src/services/jobService.js
import api from '@/api/trae';

export default {
// 获取岗位列表（带筛选）
async getJobs(filters = {}) {
try {
const params = {};
if (filters.company) params.company_like = filters.company;
if (filters.position) params.position_like = filters.position;

  const response = await api.get('/jobs', { params });console.log('📊 获取到岗位数据:', response.length, '条');return response;
} catch (error) {console.error('❌ 获取岗位列表失败:', error);throw error;
}

// 添加新岗位
async addJob(jobData) {
try {
const newJob = {
...jobData,
createdAt: new Date().toISOString().split('T')[0],
id: Date.now() // 简单ID生成
};
const response = await api.post('/jobs', newJob);
console.log('✅ 添加岗位成功:', response);
return response;
} catch (error) {
console.error('❌ 添加岗位失败:', error);
throw error;
}
}
};

🍃 午休时间：12:00 - 13:30

简单休息后，整理了上午的开发思路，发现Trae的拦截器配置比axios更简洁明了。

💡 功能开发：13:30 PM - 16:00 PM

岗位列表组件开发

实现了带筛选功能的列表页面：

添加岗位功能

实现了表单验证和数据提交：
// 在AddJob组件中的提交逻辑
async handleSubmit() {
try {
// 表单验证
await this.$refs.jobForm.validate();

// 显示加载状态
this.loading = true;// 调用Trae服务
await jobService.addJob(this.formData);// 成功反馈
ElMessage.success('🎉 岗位添加成功！');// 跳转回列表页
this.$router.push('/jobs');

} catch (error) {
if (error.name !== 'ValidationError') {
ElMessage.error('❌ 添加失败，请重试');
}
} finally {
this.loading = false;
}
}

☕ 技术难点突破：16:00 PM - 17:30 PM

遇到的挑战与解决方案

难点1：Trae的响应拦截器配置
• 问题：初始配置时对错误处理不完善

• 解决：增加了状态码判断和统一错误处理

难点2：筛选查询的实现
• 问题：JSON Server的模糊查询语法不熟悉

• 解决：使用_like参数实现模糊匹配

难点3：组件间数据传递
• 问题：编辑页面数据回显问题

• 解决：使用Vuex进行状态管理，确保数据一致性

数据库设计优化

// db.json 数据结构
{
"jobs": [
{
"id": 1,
"company": "字节跳动",
"position": "前端开发工程师",
"salary": "25-40K",
"requirements": "熟悉Vue/React，有大型项目经验",
"status": "active",
"createdAt": "2023-10-25",
"updatedAt": "2023-10-25"
}
]
}

📊 项目成果展示：18:00 PM

功能完成情况

• ✅ 岗位添加功能（包含完整表单验证）

• ✅ 岗位列表展示（支持分页）

• ✅ 条件筛选查询（按企业/岗位名称）

• ✅ 岗位信息编辑（数据回显+更新）

• ✅ 岗位删除功能（确认对话框）

• ✅ 响应式布局设计

技术亮点