从零开始打造招聘网站-Nuxt初体验

2023-09-19 08:30:39

项目需求

使用 Nuxt 搭建招聘网站
实现岗位列表、岗位详情、企业信息等模块
采用响应式设计，适配不同屏幕尺寸

技术选型

Nuxt.js
Vue.js
Axios
Element UI

项目搭建

安装 Nuxt.js

npm install nuxt

创建 Nuxt 项目

nuxt create nuxt-job

cd nuxt-job

启动项目

npm run dev

打开浏览器，访问 http://localhost:3000，即可看到项目主页。

功能实现

岗位列表

岗位列表页面主要展示所有岗位信息，包括岗位名称、公司名称、发布时间等。

<template>
  <div class="job-list">
    <job-item v-for="job in jobs" :job="job" :key="job.id" />
  </div>
</template>

<script>
import { mapState } from 'vuex'
import JobItem from '@/components/JobItem.vue'

export default {
  components: { JobItem },
  computed: {
    ...mapState('jobs', ['jobs'])
  }
}
</script>

岗位详情

岗位详情页面主要展示单个岗位的详细信息，包括岗位名称、公司名称、职位、任职要求等。

<template>
  <div class="job-detail">
    <h1>{{ job.name }}</h1>
    <p>{{ job.company }}</p>
    <div class="job-description">
      {{ job.description }}
    </div>
    <div class="job-requirements">
      <h3>任职要求</h3>
      <ul>
        <li v-for="requirement in job.requirements">{{ requirement }}</li>
      </ul>
    </div>
  </div>
</template>

<script>
import { mapState, mapActions } from 'vuex'
import JobItem from '@/components/JobItem.vue'

export default {
  components: { JobItem },
  computed: {
    ...mapState('jobs', ['jobs'])
  },
  methods: {
    ...mapActions('jobs', ['getJob'])
  },
  created() {
    this.getJob(this.$route.params.id)
  }
}
</script>

企业信息

企业信息页面主要展示单个企业的详细信息，包括企业名称、地址、联系方式等。

<template>
  <div class="company-detail">
    <h1>{{ company.name }}</h1>
    <p>{{ company.address }}</p>
    <p>{{ company.phone }}</p>
    <p>{{ company.email }}</p>
  </div>
</template>

<script>
import { mapState, mapActions } from 'vuex'
import JobItem from '@/components/JobItem.vue'

export default {
  components: { JobItem },
  computed: {
    ...mapState('companies', ['companies'])
  },
  methods: {
    ...mapActions('companies', ['getCompany'])
  },
  created() {
    this.getCompany(this.$route.params.id)
  }
}
</script>

响应式设计

为了使网站能够适应不同屏幕尺寸，我们在项目中采用了响应式设计。

/* 媒体查询 */
@media (max-width: 768px) {
  /* 针对小屏幕的样式 */
}

@media (min-width: 769px) and (max-width: 1024px) {
  /* 针对中屏幕的样式 */
}

@media (min-width: 1025px) {
  /* 针对大屏幕的样式 */
}

遇到的问题和解决方法

Nuxt 中使用 Axios 发送请求

在项目中，我们需要使用 Axios 来发送请求。但是，Nuxt 并没有内置 Axios。

解决方案：我们可以通过 npm install axios 来安装 Axios，然后在 nuxt.config.js 中添加如下代码：

/* nuxt.config.js */
export default {
  // ...
  plugins: [
    // ...
    { src: '~/plugins/axios.js' }
  ]
}

Nuxt 中使用 Element UI

在项目中，我们使用了 Element UI 来构建 UI 组件。但是，Nuxt 并没有内置 Element UI。

解决方案：我们可以通过 npm install element-ui 来安装 Element UI，然后在 nuxt.config.js 中添加如下代码：

/* nuxt.config.js */
export default {
  // ...
  css: [
    // ...
    'element-ui/lib/theme-chalk/index.css'
  ],
  plugins: [
    // ...
    { src: '~/plugins/element-ui.js' }
  ]
}