当前位置：首页 > VUE

vue实现招聘页面

2026-02-17 11:04:32VUE

Vue实现招聘页面的核心步骤

搭建基础项目结构
使用Vue CLI或Vite初始化项目，安装必要依赖（vue-router、axios等）。创建以下基础目录：

views/（页面级组件）
components/（可复用组件）
store/（状态管理，如需Vuex/Pinia）
api/（接口封装）

设计数据流与API交互
封装axios实例处理招聘岗位数据的获取：

// api/jobs.js
import axios from 'axios';

export const getJobList = (params) => {
  return axios.get('/api/jobs', { params });
};

export const getJobDetail = (id) => {
  return axios.get(`/api/jobs/${id}`);
};

构建页面布局
主页面通常包含：

顶部导航栏（可抽离为Header组件）
岗位列表区（JobList组件）
筛选侧边栏（FilterPanel组件）
分页控件（Pagination组件）

实现岗位列表组件
使用v-for渲染岗位卡片，示例代码：

vue实现招聘页面

<template>
  <div class="job-list">
    <job-card 
      v-for="job in jobs" 
      :key="job.id"
      :title="job.title"
      :salary="job.salary"
      @click="goToDetail(job.id)"
    />
  </div>
</template>

<script>
import JobCard from './JobCard.vue';

export default {
  components: { JobCard },
  props: ['jobs'],
  methods: {
    goToDetail(id) {
      this.$router.push(`/jobs/${id}`);
    }
  }
}
</script>

筛选功能实现
在FilterPanel组件中绑定表单数据：

<template>
  <div class="filters">
    <input v-model="filters.keyword" placeholder="职位关键词">
    <select v-model="filters.city">
      <option value="">全部城市</option>
      <option v-for="city in cities" :value="city">{{city}}</option>
    </select>
    <button @click="applyFilters">筛选</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      filters: {
        keyword: '',
        city: ''
      },
      cities: ['北京','上海','深圳']
    }
  },
  methods: {
    applyFilters() {
      this.$emit('filter-change', this.filters);
    }
  }
}
</script>

路由配置
设置页面路由（需安装vue-router）：

vue实现招聘页面

const routes = [
  {
    path: '/',
    component: Home,
    children: [
      {
        path: 'jobs',
        component: JobList,
        name: 'job-list'
      },
      {
        path: 'jobs/:id',
        component: JobDetail,
        name: 'job-detail'
      }
    ]
  }
];

状态管理（可选）
使用Pinia管理全局状态示例：

// store/jobs.js
import { defineStore } from 'pinia';

export const useJobsStore = defineStore('jobs', {
  state: () => ({
    jobs: [],
    filters: {}
  }),
  actions: {
    async fetchJobs() {
      const res = await getJobList(this.filters);
      this.jobs = res.data;
    }
  }
});

样式与交互优化