Vue - day09

46 阅读3分钟

一、搭建分类发布页

elment表单中选择合适的组件并且复制代码到(views->classify->pub.vue)

二、LeanCloud云服务

  • 第三方公司开发的一套通用的后端接口云服务
  • ServerLess 无服务、弱服务
  • 官网
  • 接口文档
    • 接口地址
    • 请求方法
    • 传递的参数 (headers、data)
    • 返回的结果

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/自定义表名  //接口地址

image.png

image.png

  • 查询数据(get):
    • 新建接口
    • 新建环境 image.png
    • 设置Header(和新增一样)

image.png - 发送

  • 修改数据(put): image.png
  • 删除数据(delete):

image.png

四、axios 发起异步请求

  • Axios 是一个基于 promise 的网络请求库,可以用于浏览器和 node.js
  • axios 文档

4.1 安装

npm i axios

4.2 创建文件

image.png

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 新建文件

image.png

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表格渲染及自定义插槽内容

<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>