十次方项目前端，招聘列表页以及招聘详情页（十三）
一、 招聘列表页
1.编写API方法
（1）将管理后台的api/recruit.js和api/enterprise.js 拷贝到当前工程的api文件夹下
（2）修改api/recruit.js，增加方法
recommend() {
return request({
url: `/${group_name}/search/recommend`,
method: 'get'
})
},
newlist() {
return request({
url: `/${group_name}/search/newlist`,
method: 'get'
})
}
（3）修改api/enterprise.js，增加方法
hotlist() {
return request({
url: `/${group_name}/${api_name}/search/hotlist`,
method: 'get'
})
}
2.招聘列表页数据渲染
（1）修改pages/recruit/index.vue axios.all可以并发多个异步请求，axios.spread负责获取多个异步请求的返回结果。
<script>
import recruitApi from '@/api/recruit'
import enterpriseApi from '@/api/enterprise'
import '~/assets/css/page-sj-recruit-index.css'
import axios from 'axios'
export default {
asyncData(){
return axios.all([recruitApi.recommend(),recruitApi.newlist(),enterpriseApi.hotlist()]).then(
axios.spread( function(recommendList,newList,hostList){
return {
recommendList: recommendList.data.data,
newList: newList.data.data,
hostList: hostList.data.data
}
})
)
}
}
</script>
（2）模板部分代码：
<template>
<div>
<div class="wrapper tag-item">
<div class="fl left-list">
<div class="job-position">
<div class="job-type reco-job">
<div class="head">
<h4 class="title pull-left">推荐职位</h4>
<span class="more pull-right"><a href="#">更多职位推荐 <i class="fa fa-angle-right" aria-hidden="true"></i></a></span>
<div class="clearfix"></div>
</div>
<ul class="yui3-g job-list" style="display:block;">
<li class="yui3-u-1-2 job-item" v-for="(item,index) in recommendList" :key="index">
<p>
<span class="name"><a href="~/assets/recruit-detail.html" target="_blank">{{item.jobname}}</a></span>
<span class="city"><i class="fa fa-map-marker"></i> {{item.address}}</span>
</p>
<p class="need">
<span class="money">{{item.salary}}</span>/{{item.condition}}/{{item.education}}/{{item.type}}
</p>
<p><span class="company">{{item.eid}} · {{item.createtime}}</span></p>
</li>
</ul>
</div>
<div class="job-type latest-job">
<div class="head">
<h4 class="title pull-left">最新职位</h4>
<span class="more pull-right"><a href="#">更多职位推荐 <i class="fa fa-angle-right" aria-hidden="true"></i></a></span>
<div class="clearfix"></div>
</div>
<ul class="yui3-g job-list" style="display:block;">
<li class="yui3-u-1-2 job-item" v-for="(item,index) in newList" :key="index">
<p>
<span class="name"><a href="~/assets/recruit-detail.html" target="_blank">{{item.jobname}}</a></span>
<span class="city"><i class="fa fa-map-marker"></i> {{item.address}}</span>
</p>
<p class="need">
<span class="money">{{item.salary}}</span>/{{item.condition}}/{{item.education}}/{{item.type}}
</p>
<p><span class="company">{{item.eid}} · {{item.createtime}}</span></p>
</li>
</ul>
</div>
</div>
</div>
<div class="fl right-tag">
<div class="hot-company">
<p class="mail">提交收录请发邮件至ccccccc@qq.com</p>
<div class="company">
<div class="head">
<h4>热门企业</h4>
</div>
<ul class="yui3-g company" style="display:block;">
<li class="yui3-u-1-3 company-item" v-for="(item,index) in hostList" :key="index">
<p><img :src="item.logo" alt="" /></p>
<p class="title">{{item.name}}</p>
<p class="position">
<a href="~/assets/recruit-company.html" target="_blank">{{item.jobcount}}个职位</a>
</p>
</li>
</ul>
</div>
</div>
</div>
<div class="clearfix"></div>
</div>
</div>
</template>
效果：
二、招聘详情页
1.构建招聘详情页
（1）构建招聘详细页 pages/recruit/item/_id.vue
<template>
<div>
<div class="wrapper tag-item">
<div class="job-intro">
<div class="left-img">
<img src="~/assets/img/widget-company.png" alt="" />
</div>
<div class="middle-intro">
<div class="name">
Python开发工程师 · 有赞
</div>
<div class="intro">
15K-25K / 经验3-5年 / 本科及以上 / 全职
</div>
<div class="tag">
<li>Python</li>
<li>Python</li>
<li>O2O</li>
<li>Python</li>
<li>Python</li>
</div>
</div>
<div class="right-tool">
<p class="throw"><button class="sui-btn btn-throw">投简历</button></p>
<button class="sui-btn btn-collect">收藏</button>
<span>100收藏</span>
<span>291浏览</span>
</div>
<div style="clear:both"></div>
</div>
<div class="fl left-list ">
<div class="tit">
<span>职位描述</span>
</div>
<div class="content">
<p>我们提供：</p>
<p>富有市场竞争力的薪水；</p>
<p>一套程序猿的顶级梦幻装备， 一台顶级CPU+大内存+SSD台式机+护眼显示屏，一把舒适的人体工程学座椅；</p>
<p>一群聪明欢乐的小伙伴们；</p>
<p>顶级IT创业公司提供的大平台，丰富的晋升机制；</p>
<p>提供独立的单身公寓，空调热水。</p>
<p>提供五险，双休和法定假日休假</p>
</div>
<div class="tit">
<span>职位要求</span>
</div>
<div class="content">
<p>对新技术有好奇心, 学习能力强, 良好的英文资料阅读能力</p>
<p>熟悉面向对象编程, 有良好的编程⻛格和习惯.</p>
<p>良好的团队合作精神和沟通能力，勤奋上进</p>
<p>熟练使用PHP, 熟悉symfony/laravel优先.</p>
<p>熟悉HTML/CSS/JS, 懂vuejs优先.</p>
<p>熟悉 Linux/Mac 开发环境</p>
<p>熟悉 MySQL 数据库，掌握 MongoDB, Redis 等 NoSQL</p>
<p>熟悉git协作</p>
<p>*我们是正域团队,，我们正在做一件改变行业的事情，</p>
<p>如果你激情四射、胆大有料、敢想敢干、协作一流， 立刻加入我们！</p>
</div>
<div class="time">
发布于1小时前
</div>
</div>
<div class="fl right-tag">
<div class="company-job">
<div class="intro">
<img src="~/assets/img/widget-company.png" alt="" />
<div class="title">
有赞App
</div>
<div class="content">
“有赞”基于云服务模式向商户提供免费、强大的微商城系统和完整的微电商行业解决方案，并致力于通过粉丝营销、交易创新、消保体系为广大商户、消费者搭建移动购物平台。
</div>
</div>
<div class="tag">
<li>电子商务</li>
<li>移动互联网</li>
<li>O2O</li>
<li>2012年成立</li>
<li>11-50名雇员</li>
</div>
<div class="btns">
<a class="sui-btn btn-home" href="~/assets/recruit-company.html" target="_blank">企业主页</a>
<a class="sui-btn btn-position" href="~/assets/recruit-job.html" target="_blank">1个职位</a>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import '~/assets/css/page-sj-recruit-detail.css'
export default {
}
</script>
（2）修改pages/recruit/index.vue 链接
<span class="name"><a href="~/assets/recruit-detail.html" target="_blank">{{item.jobname}}</a></span>
2.招聘详情页-数据渲染
修改 pages/recruit/item/_id.vue
<template>
<div>
<div class="wrapper tag-item">
<div class="job-intro">
<div class="left-img">
<img :src="enterprise_item.logo" alt="" />
</div>
<div class="middle-intro">
<div class="name">
{{item.jobname}} · {{enterprise_item.name}}
</div>
<div class="intro">
{{item.salary}}/{{item.condition}}/{{item.education}}/{{item.type}}
</div>
<div class="tag">
<li>{{item.label}}</li>
</div>
</div>
<div class="right-tool">
<p class="throw"><button class="sui-btn btn-throw">投简历</button></p>
<button class="sui-btn btn-collect">收藏</button>
<span>100收藏</span>
<span>291浏览</span>
</div>
<div style="clear:both"></div>
</div>
<div class="fl left-list ">
<div class="tit">
<span>职位描述</span>
</div>
<div class="content">
<p>{{item.content1}}</p>
</div>
<div class="tit">
<span>职位要求</span>
</div>
<div class="content">
<p>{{item.content2}}</p>
</div>
<div class="time">
{{item.createtime}}
</div>
</div>
<div class="fl right-tag">
<div class="company-job">
<div class="intro">
<img :src="enterprise_item.logo" alt="" />
<div class="title">
{{enterprise_item.name}}
</div>
<div class="content">
{{enterprise_item.summary}}
</div>
</div>
<div class="tag">
<li v-for="(label,index) in enterprise_item.labels.split(',')":key="index">{{label}}</li>
</div>
<div class="btns">
<a class="sui-btn btn-home" :href="enterprise_item.url" target="_blank">企业主页</a>
<a class="sui-btn btn-position" href="~/assets/recruit-job.html" target="_blank">{{enterprise_item.jobcount}}个职位</a>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import '~/assets/css/page-sj-recruit-detail.css'
import recruitApi from '@/api/recruit'
import enterpriseApi from '@/api/enterprise'
export default {
asyncData({params}){
return recruitApi.findById(params.id ).then( res =>{
return enterpriseApi.findById( res.data.data.eid ).then(res2=>{
return {
enterprise_item: res2.data.data,
item:res.data.data
}
}
)
})
}
}
</script>
3.
为了达到良好的测试效果，建议修改以下easyMock的数据
/recruit/enterprise/{enterpriseId} (GET)
{
"code": "20000",
"flag": true,
"message": "@string",
"data": {
"id": "@string",
"name": "传智播客",
"summary": "传智播客是一家高端IT教育培训机构",
"address": "@string",
"labels": "IT教育培训,高端,新三板上市企业",
"coordinate": "@string",
"ishot": "@string",
"logo": "http://www.itcast.cn/2018czgw/images/logo.png",
"jobcount": "132",
"url": "http://www.itcast.cn"
}
}