综合作业

### 一、项目基本信息
- **项目网址**：https://edu.cnblogs.com/campus/fzu/2024DataCollectionandFusiontechnology
- **组名**：数据矿工
- **项目需求**：爬取招聘网站的求助信息、编辑信息匹配系统等。
- **项目目标**：
    - 根据求职者的个人信息为其推荐最合适的工作。
    - 根据全国各省的各行业信息为求职者提供合适的参考城市。
- **项目开展技术路线**：
    - **数据库操作**：使用pymysql库与MySQL数据库进行交互，执行SQL查询和获取数据。
    - **Web框架**：使用Flask作为Web应用框架，用于创建Web服务和API端点。
    - **WSGI服务器**：pywsgi作为WSGI服务器来运行Flask应用。
- **团队成员学号**：102202132、102202131、102202143、102202111、102202122、102202136
- **其他参考文献**：
    - Flask Web框架官方文档：https://flask.palletsprojects.com/en/latest/
    - PyMySQL官方文档：https://github.com/PyMySQL/PyMySQL
    - 讯飞星火大模型API文档：https://www.xfyun.cn/doc/spark/Web.html
    - 数据库设计和优化：https://db-book.com/
    - 云服务器和数据库部署：https://cloud.tencent.com/
    - gitee地址：https://gitee.com/zheng-bingzhi/2022-level-data-collection/tree/master/职业规划与就业分析平台

### 二、成员分工
|成员编号|角色|职责|
|----|----|----|
|成员1|项目经理 & 前端开发|项目整体规划与进度管理，团队协调与沟通保障，前端界面设计与开发，前后端数据交互协作|
|成员2|后端开发 & 数据采集分析师|后端逻辑与API开发，数据库管理，参与数据采集，确保数据准确及时，与前端团队协作，保障数据正确展示|
|成员3|后端开发|专注于后端服务开发，服务器端逻辑与数据库交互，与数据采集团队合作，优化数据处理|
|成员4|前端开发 & 数据采集分析师|前端界面开发，保障美观与易用性，参与数据采集，确保数据展示准确|
|成员5|数据采集分析师|从招聘网站爬取岗位、薪资、行业趋势等数据，数据清洗与分析，为智能推荐服务提供数据支持|
|成员6|数据采集分析师|与成员5协作，负责数据采集与分析，确保数据质量与分析准确性|

### 三、核心代码片段
#### 1. `FujianRecruitmentView.vue`
```vue
async fetchRecruitments() {
      const savedRecruitments = localStorage.getItem('recruitments');
      if (savedRecruitments) {
        this.originalRecruitments = JSON.parse(savedRecruitments);
        this.allRecruitments = this.setDefaultOccupationType([...this.originalRecruitments]);
        this.allRecruitments.forEach(recruitment => {
          recruitment.Location = recruitment.Location.trim();
          recruitment.Occupation_Type = recruitment.Occupation_Type? recruitment.Occupation_Type.trim() : '未知';
        });
        this.resetRecruitments();
      } else {
        try {
          const response = await axios.get('http://81.70.22.101:5000/province-recruitment');
          if (response.data.code === 200) {
            this.originalRecruitments = response.data.data;
            this.allRecruitments = this.setDefaultOccupationType([...this.originalRecruitments]);
            this.allRecruitments.forEach(recruitment => {
              recruitment.Location = recruitment.Location.trim();
              recruitment.Occupation_Type = recruitment.Occupation_Type? recruitment.Occupation_Type.trim() : '未知';
            });
            this.resetRecruitments();
          } else {
            console.error(response.data.message);
            this.allRecruitments = [];
            this.visibleRecruitments = [];
          }
        } catch (error) {
          console.error('Error fetching recruitments:', error);
          this.allRecruitments = [];
          this.visibleRecruitments = [];
        }
      }
    },
```
#### 2. `IntelligentRecommendationInputView.vue`
```vue
this.isLoading = true; // 开始加载
      try {
        // 发送获取匹配职位的 API 请求
        const response1 = await axios.post('http://81.70.22.101:5000/api/recommend_career_advice', {
          desired_position: this.formData.jobs.join(', '), // 转化成逗号分隔字符串
          expected_salary: this.formData.salary,
          resume: this.formData.bio,
          requirements: this.formData.requirements,
          work_experience: this.formData.experience
        });

// 发送获取职业规划建议的 API 请求
        const response2 = await axios.post('http://127.0.0.1:5000/recommend-career-advice', {
          desired_position: this.formData.jobs.join(', '),
          expected_salary: this.formData.salary,
          resume: this.formData.bio,
          requirements: this.formData.requirements,
          work_experience: this.formData.experience
        });

// 检查两个接口的响应状态
        console.log('Response1:', response1);
        console.log('Response2:', response2);

if (response1.data.code === 200 && response2.data.code === 200) {
          // 将匹配职位和职业规划建议保存到 Vuex 中
          this.$store.dispatch('saveRecommendedJobs', response1.data.data);  // 保存职位数据
          this.$store.dispatch('saveCareerAdvice', response2.data.data);  // 保存职业规划数据

// 跳转到结果页面
          console.log('Navigating to result page');
          this.$router.push('/intelligent-recommendation-result');
        } else {
          this.errorMessage = response1.data.message || response2.data.message || '获取匹配职位失败';
        }
```
#### 3. `IntelligentRecommendationResultView.vue`
```vue
<script>
import Header from "../components/Header.vue";

export default {
  name: "IntelligentRecommendationResultView",
  components: {
    Header,
  },
  data() {
    return {
      // 从 Vuex 获取推荐职业数据
      recommendedJobs: this.$store.state.recommendedJobs,
      tabs: ["岗位现状", "职位面试", "就职方向", "人际沟通"],
      activeTab: "岗位现状", // 默认选中的标签
      currentContent: "", // 当前显示的文本内容
    };
  },
  mounted() {
    this.fetchTabContent();
  },
  methods: {
    goToRecruitmentDetail(id) {
      this.$router.push(`/recruitment-detail/${id}`);
    },
    changeTab(tab) {
      this.activeTab = tab;
      this.fetchTabContent();
    },
    fetchTabContent() {
      // 获取职业规划建议内容
      const careerAdvice = this.$store.state.careerAdvice;

switch (this.activeTab) {
        case "岗位现状":
          this.currentContent = careerAdvice.Current_Situation || "暂无内容";
          break;
        case "职位面试":
          this.currentContent = careerAdvice.Interview_Advice || "暂无内容";
          break;
        case "就职方向":
          this.currentContent = careerAdvice.Career_Direction || "暂无内容";
          break;
        case "人际沟通":
          this.currentContent = careerAdvice.Communication_Skills || "暂无内容";
          break;
        default:
          this.currentContent = "暂无内容";
      }
    },
  },
};
</script>
```
#### 4. `NationalEmploymentView.vue`
```vue
// 监听地图点击事件
      myChart.on('click', (params) => {
        this.selectedProvince = params.name; // 获取点击的省份名称
        this.navigateToProvincePage(this.selectedProvince, module);
      });
    },

// 导航到对应的省份页面并在新窗口中打开
    navigateToProvincePage(provinceName, module) {
      let url;
      if (module === 'industryAverageSalary') {
        url = `http://81.70.22.101:5000/${provinceName}`; // 行业平均工资页面
      } else if (module === 'industryPopulationChange') {
        url = `http://81.70.22.101:5000/api/${provinceName}`; // 行业人数变化页面
      }
      // 在新窗口中打开 URL
      window.open(url, '_blank');
    },
```
#### 5. `IntelligentRecommendationResultView.vue（另一部分）`
```vue
 methods: {
    async fetchJobDetail() {
      try {
        const recruitmentId = this.$route.params.id; // 使用 'id' 而不是 'recruitment_id'
        const response = await axios.get('http://81.70.22.101:5000/recruitment-detail', {
          params: {
            id: recruitmentId  // 传递正确的参数名
          }
        });

if (response.data.code === 200) {
          this.jobDetail = response.data.data; // 赋值给 jobDetail
        } else {
          console.error('Error fetching job details:', response.data.message);
        }
      } catch (error) {
        console.error('API request failed:', error);
      }
    },
    goBack() {
      this.$router.go(-1); // 返回上一页
    },
    prevImage() {
      if (this.jobDetail.Company_Photo && this.jobDetail.Company_Photo.length > 0) {
        this.currentImageIndex = (this.currentImageIndex - 1 + this.jobDetail.Company_Photo.length) % this.jobDetail.Company_Photo.length;
      }
    },
    nextImage() {
      if (this.jobDetail.Company_Photo && this.jobDetail.Company_Photo.length > 0) {
        this.currentImageIndex = (this.currentImageIndex + 1) % this.jobDetail.Company_Photo.length;
      }
    }
```

### 四、项目收获
- **深度洞悉Vue3**：通过项目实践全方位透彻理解Vue3的响应式系统、组件化架构及Composition API，打造出高效且可维护的前端应用。
- **精通可视化应用构建**：结合Vue3与ECharts等库构建直观图表和数据展示页面，提升应用交互性与信息传达效果。
- **沉淀前后端交互实战心得**：主导前后端交互环节，借助Axios进行HTTP请求处理，保障数据传输与处理的准确、完整和及时。
- **精研API调用与测试之道**：深度参与API测试，运用单元测试和Postman等工具确保API在复杂场景下稳定运行。
- **练就卓越问题解决本领**：面对技术难题形成有效解决策略，如解决Vue3跨域问题，积累排障经验。
- **深化前端技术栈造诣**：对前端技术栈理解进阶，熟练掌握HTML、CSS、JavaScript及Vue3创新特性。
- **磨砺时间管理与团队引领能力**：合理安排项目时间与资源，按时交付项目，同时提升团队领导素养，营造良好团队氛围。

张诚坤/数据采集融合

内容风险标识

评论 (0)

张诚坤/数据采集融合 .gitee-modal { width: 500px !important; }

内容风险标识

综合作业

评论 (0)

搜索帮助

张诚坤/数据采集融合