如何处理后台返回的数据

如何处理后台返回的数据

作为前端人员来说，学会调接口的同时，最主要的是需要学会处理后台返回来的数据。
记得刚接触项目的时候，处理后台返回的数据可让我好一阵头疼。
今天就来说点简单的。
最常见的就是后台返回一个数字，或是字符串，我们需要在页面将它转换为对应的中文。
比如常见的有政治面貌，审核状态，分类等。
先以政治面貌为例子

 { label: "中共党员", value: "1" },
    { label: "中共预备党员", value: "2" },
    { label: "共青团员", value: "3" },
    { label: "群众", value: "4" },

这是返回值所对应的中文含义。
一般在项目中这些数据字典都会被单独拿出来放在一个文件中，我个人喜欢写在util中命名为dict。

const data = {
  // 政治面貌
  political: [
    { label: "中共党员", value: "1" },
    { label: "中共预备党员", value: "2" },
    { label: "共青团员", value: "3" },
    { label: "群众", value: "4" },
  ],
  }

然后我们到我们需要的页面去引入我们的数据字典

 import dict from "@/utils/dict";
 export default {
  components: { dict },
  data() {
    return {
      loading: false,
      tableData: [],
      //政治面貌相关
    statusOption:dict(" political")
    };
  },

//循环获取我们想要的值
  getStatus(val) {
       let item = this.statusOption.find((item) => item.value === val);
      return item ? item.label : val;
     },

页面应该怎么写呢

<el-table-column prop="  political" label="政治面貌" align="center">
          <template slot-scope="{ row }">
            {{ getStatus(row.  political) }} 
          </template>
        </el-table-column>

这样我们就能把他们传过来的字符串转换成我们想要的中文了。不过值得注意的是，一定要分清他们传过来的是string还是number。

以上的写法其实不太简便，如果我们一个页面或者多个页面都需要这样的转换，我们如果对每一个都这么循环处理的话，不仅造成代码冗余还麻烦，所以此时我们就可以自己封装成一个组件，以便全局复用。

<template>
  <el-select clearable v-bind="$attrs" v-on="$listeners">
    <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value"
    />
  </el-select>
</template>

<script>
//引入数据字典
import dict from "@/utils/dict";
export default {
  props: {
    dictType: {
      type: String,
      required: true,
    },
  },
  data() {
    return {
      options: dict[this.dictType],
    };
  },
};
</script>

这样的话我们就可以直接在页面引用了

<el-table-column prop="political" align="center">
          <template slot-scope="{ row }">
            {{ row.political | dictParse("political") }}
          </template>
        </el-table-column>

以上的是针对下拉框，且数据是固定好的数字，如果我们的选项数据也是通过另外一个接口返回的，在这种情况下，我们的页面就不应该是下拉框，而应该是级联选择器。

这是我自己私下写的一个比较直观的小模型。其实在我们的项目，尤其是写PC端的后台时，是经常使用的，所以我们可以仿照上面的自定义一个组件

<template>
  <el-cascader
    v-bind="$attrs"
    :options="options"
    :props="mergeProps"
    v-on="$listeners"
  />
</template>

<script>
/**
 * 分类组件
 */
import axios from "@/utils/axios";
export default {
  props: {
    props: {
      type: Object,
      default: () => ({}),
    },
  },
  data() {
    return {
      options: [],
      base: {
        value: "id",
        label: "categoryName",
        checkStrictly: true,
        multiple: false,
        emitPath: false,
      },
      mergeProps: {},
    };
  },
  watch: {
    props: {
      deep: true,
      immediate: true,
      handler(newVal) {
        this.mergeProps = { ...this.base, ...newVal };
      },
    },
  },
  created() {
  //该分类的接口
    axios.post("xxx").then((value) => {
      this.options = value.data.data;
    });
  },
};
</script>

组件封装好以后，同样去页面引用就好了

 <el-form-item>
          <Cascader
            v-model="search.classify"
            :show-all-levels="false"
            placeholder="分类"
            clearable
            :props="{ expandTrigger: 'hover' }"
          />
        </el-form-item>

就这样，我们的级联列表就做好了。对了，别忘了页面使用的时候需要引入哦