一、搭建分类发布页
在elment表单中选择合适的组件并且复制代码到（views->classify->pub.vue）
二、LeanCloud云服务
2.1 使用流程
- 注册 LeanCloud 账号，并实名认证
- 进入控制台--新建应用--选择开发版
- 进入应用获取三条信息 -- 设置 -- 应用凭证
- AppID
- AppKey
- RestApi 服务器地址
2.2 接口风格
- 普通风格接口：通过后端给的不同 url 地址，来区分每个接口的作用
app.post('/classify/add') 新增分类
app.post('/classify/list') 查询分类
app.post('/classify/edit') 修改分类
app.post('/classify/delete') 删除分类
- Rest 风格接口：LeanCloud 采用这种风格。通过前后端对接时所用的不同方法来区分接口的作用
app.post('/classify') 新增分类
app.get('/classify') 查询分类
app.put('/classify') 修改分类
app.delete('/classify') 删除分类
三、 接口测试工具ApiPost
- 新建项目（ApiPost）
- 新建接口（ApiPost）
- 新增数据（post）：
- 在leancloud->文档->RSET API->数据存储RSET API->对象->创建对象中复制https://API_BASE_URL/1.1/classes/Post，其中https://API_BASE_URL表示域名，Post是自定义表名
- 在LeanCloud中复制RestApi 服务器地址替换到https://API_BASE_URL中，并设置自己的表名
- 在leancloud->文档->RSET API->数据存储RSET API->对象->创建对象中复制-H开头的请求头到ApiPost中（Header导入参数，要去掉引号和多余空格）
- 在Body中选择raw并写入数据
- 发送
- 在结构化数据中查看表
curl -X POST \ //请求所用的方法时POST
-H "X-LC-Id: PhooC2pGuFn5MkTPdTRn7O99-gzGzoHsz" \ //请求头headers相关信息
-H "X-LC-Key: 4x587AuiHPH0eZspQnvR5qaH" \
-H "Content-Type: application/json" \
-d '{"content": ""}' \ //请求接口时需要携带的数据包
https://API_BASE_URL/1.1/classes/自定义表名 //接口地址
- 查询数据（get）：
- 新建接口
- 新建环境
- 设置Header（和新增一样）
- 发送
- 修改数据（put）：
- 删除数据（delete）：
四、axios 发起异步请求
- Axios 是一个基于 promise 的网络请求库，可以用于浏览器和 node.js
- axios 文档
4.1 安装
npm i axios
4.2 创建文件
4.3 提前封装axios
在axios实列中复制代码到新建文件中(utils->request.js)
//提前把axios封装一下，提前做一些通用配置
import axios from "axios";
//创建axios实列
const instance = axios.create({
baseURL: 'https://bgap5pvs.lc-cn-n1-shared.com/1.1/',//应用凭证中的服务器地址
headers: {
'X-LC-Id': 'bGAP5PvsTz0cHsXvupGXjKks-gzGzoHsz',
'X-LC-Key': '2zEmtTeYzNyrS6hWt16QR7mg',
'Content-Type': 'application/json',
}
});
export default instance;
4.4 在pub.vue中请求
import request from "@/utils/request";
request.post("classes/VueClassify", {
...this.ruleForm,
})
.then((res) => {
console.log(res);
});
五、单独拆分api异步请求版块
5.1 新建文件
5.2 拆分
在job.js中书写
// 集中管理跟岗位相关的异步请求
import request from "@/utils/request";
// 发布分类
export const classifyPost = (cfyObj)=>{
return request
.post("classes/VueClassify", cfyObj);
}
在pub.vue中写
import {classifyPost} from '@/api/job'
classifyPost(this.ruleForm).then(res=>{
console.log(res);
})
六、使用where条件查询获取后端数据
在job.js中
// 加载分类 查
export const classifyGet = ()=>{
// 条件查询
return request
.get(`classes/VueClassify?where={"parent":"0-0"}`);
}
在public.vue中
html:
<el-option v-for="item in cfyList" :label="item.name" :value="item.objectId" :key="item.objectId"></el-option>
js:
import {classifyPost,classifyGet} from '@/api/job';
created () {
classifyGet().then(res=>{
console.log(res);
this.cfyList=res.data.results
})
},
七、el-table表格渲染及自定义插槽内容
- 在elementPlus表格中找到合适组件复制代码到list.vue中
<template>
<el-table :data="tableData" style="width: 100%">
<el-table-column prop="objectId" label="分类id" />
<el-table-column prop="name" label="分类名称" />
<el-table-column prop="online" label="上架状态">
<!-- 插槽内容 -->
<template #default="scope">
<el-switch v-model="scope.row.online"></el-switch>
</template>
</el-table-column>
<el-table-column prop="online" label="操作">
<!-- 插槽内容 -->
<template #default="scope">
<el-button type="primary">编辑</el-button>
<el-button type="danger">删除</el-button>
</template>
</el-table-column>
</el-table>
</template>
<script>
import {classifyGet} from '@/api/job'
export default {
data() {
return {
tableData: []
}
},
created () {
classifyGet().then(res=>{
this.tableData=res.data.results
})
},
}
</script>
<style lang="scss" scoped>
</style>
八、表格二级类目 在job.js中
// 加载分类 查
export const classifyGet = (bool)=>{
// 条件查询
let query = bool?'':'?where={"parent":"0-0"}'
return request
.get(`classes/VueClassify${query}`);
}
在list.vue中
<template>
<div>
<el-table
:data="tableData"
style="width: 100%"
row-key="objectId"
:tree-props="{ children: 'list' }"
>
<el-table-column label="分类层级">
<template #default="scope">
{{ scope.row.parent == "0-0" ? "一级类目" : "" }}
</template>
</el-table-column>
<el-table-column prop="name" label="分类名称" />
<el-table-column label="上架状态">
<template #default="scope">
<el-switch v-model="scope.row.online" />
</template>
</el-table-column>
<el-table-column label="操作">
<template #default="scope">
<el-button type="primary">编辑</el-button>
<el-button type="danger">删除</el-button>
</template>
</el-table-column>
</el-table>
</div>
</template>
<script>
import { classifyGet } from "@/api/job";
export default {
data() {
return {
tableData: [],
};
},
created() {
classifyGet(true).then((res) => {
// this.tableData = res.data.results;
let { results } = res.data;
let parentArr = results.filter((item) => item.parent == "0-0");
parentArr.forEach((item) => {
item.list = results.filter((child) => child.parent == item.objectId);
});
console.log(parentArr);
this.tableData = [...parentArr];
});
},
};
</script>
<style lang="scss" scoped></style>
