接口文件按照功能分目录组织,这里的接口是正式部署的时候请求的接口
`/api/ujob/headhunter.js`文件
```
import request from "@/plugins/request";
/**
* 根据ID参数查找项目的详细信息
* @param {int} id 微猎项目的主键
*/
export function getInfo(id) {
return request({
url: "/api/ujob/headhunter/getInfo",
method: "get",
params: { id: id },
});
}
/**
* 获取满足条件的招聘任务列表的分页数据,默认分页大小为10
* @param {*} map
*/
export function getList(map = {}) {
return request({
url: "/api/ujob/headhunter/getList",
method: "get",
params: map,
});
}
```
如果正式接口有很多文件,希望整理成一个文件导出,可以参考一下例子:
`/api/ujob/index.js`
```
import headhunter from "./headhunter";
export { headhunter };
```
在正式的接口还没有实现的情况下,前端使用Mockjs模拟数据请求,框架已经实现了请求拦截,只需要编写相应的请求模拟文件。
`/mock/ujob/headhunter.js`文件
实例模拟了后台返回单个对象和列表数据的情况,具有一定的代表性。
> 要想获取模拟请求的请求参数,可以再handle函数中,使用body参数获取post过来的表单数据,使用params获取get的参数。
注意:这里拦截的请求路径path必须和正式的接口请求的路径完全一致。
```
/**
* Mockjs的语法参阅官方文档 http://mockjs.com/
* @see http://mockjs.com/
*/
import Mock from "mockjs";
/**
* 请求接口模拟数据
*/
export default [
{
path: "/api/ujob/headhunter/getInfo",
method: "get",
handle({ body, params }) {
// console.log(body, params);
const mockOptions = {
id: params.id,
//需要模拟的数据字段
company_name: "广东皂园科技有限公司",
logo: "", //公司logo
job_title: "网络客服",
salary: "5k-8k",
work_type: "全职",
city: [],
job_address: "广州市番禺区",
diplomas: "硕士",
end_time: "2020-5-1", //截止时间
share_limit: 10, //分享份数限制
share_count: 10, //已经分享份数
price: "40", //价格
price_desc: "推荐合适奖金", //价格描述
description: "", //职位描述
tags: ["英语熟练", "普通话标准", "粤语流利"],
work_type_label: "全职",
work_province_label: "广东省",
work_city_label: "广州市",
work_county_label: "番禺区",
industry_top_label: "制造业",
diplomas_label: "学历不限",
min_salary_label: "5K",
max_salary_label: "8K",
task_apply_limit: 10,
task_apply_count: 3,
task_end_time: "2020-09-20 18:00",
task_bonus_resume: 5,
task_bonus_success: 100,
job_requirements: "@cparagraph(10,20)",
responsibilities: "@cparagraph(10,20)",
};
const mockedData = {
errno: 0,
errmsg: "",
data: Mock.mock(mockOptions),
};
// console.log(mockedData);
return mockedData;
},
},
{
path: "/api/ujob/headhunter/getList",
method: "get",
handle({ body, params }) {
// console.log(body, params);
const mockOptions = {
pageSize: 10, //每页显示的条数, think-model@1.1.8 之前该字段为 pagesize
currentPage: 1, //当前页
count: 100, //总条数
totalPages: 10, //总页数
"data|10": [
{
// 属性 id 是一个自增数,起始值为 1,每次增 1
"id|+1": 1,
//需要模拟的数据字段
company_name: "广东皂园科技有限公司",
logo: "", //公司logo
job_title: "网络客服",
salary: "5k-8k",
work_type: "全职",
city: [],
job_address: "广州市番禺区",
diplomas: "硕士",
end_time: "2020-5-1", //截止时间
share_limit: 10, //分享份数限制
share_count: 10, //已经分享份数
price: "40", //价格
price_desc: "推荐合适奖金", //价格描述
description: "", //职位描述
tags: ["英语熟练", "普通话标准", "粤语流利"],
work_type_label: "全职",
work_province_label: "广东省",
work_city_label: "广州市",
work_county_label: "番禺区",
industry_top_label: "制造业",
diplomas_label: "学历不限",
min_salary_label: "5K",
max_salary_label: "8K",
task_apply_limit: 10,
task_apply_count: 3,
task_end_time: "2020-09-20 18:00",
task_bonus_resume: 5,
task_bonus_success: 100,
},
],
};
const mockedData = {
errno: 0,
errmsg: "",
data: Mock.mock(mockOptions),
};
return mockedData;
},
},
];
```
- 文档说明
- 服务端开发指南
- 客户端开发指南
- 请求拦截器
- API接口实例分析
- 页面文件
- NPM包管理
- 创建NPM包项目
- 课程设计
- 概述
- 内容管理系统项目
- 配置开发环境
- 设计静态原型
- 快速构建项目
- 构建CMS系统前端界面
- 门户模块
- 新闻列表
- API接口规范
- 生成模拟数据
- 显示新闻列表
- NavigatorPath组件
- ChannelHeader组件
- v-line-clamp指令
- formatDate过滤器
- 新闻详情页
- 修改顶部导航菜单
- 实现访问远程API
- 扩展功能
- 组件开发
- 服务端项目
- 编写服务模块
- 项目配置
- 数据库
- 创建数据库脚本
- 配置数据库
- 创建模拟数据
- 新闻模块控制器
- 添加逻辑验证层
- 实现接口
- 书栈模块
- QA