Vue——数据整合处理

前端和后端需要的数据格式并不都是彼此所想要接收的数据，所以整合数据是家常便饭；
下面一个功能就是需要整合一下数据，
前端需要的数据格式是：

backend:[
	{
      protocol: "192.168.1.111",
      port: "8080"
    },
    {
      protocol: "192.168.1.112",
      port: "8081"
    }
]

而后端需要的数据格式是：

backend:[
	"192.168.1.111:8080",
	"192.168.1.112:8081"
]

<v-form class="pa-4" v-model="valid" ref="form">
<v-row align="center">
  <v-col cols="3">
     <v-subheader style="color: rgba(0, 0, 0, 0.7)"
       ><span class="red--text">*</span>服务器</v-subheader
     >
   </v-col>
   <v-col cols="9">
     <v-icon @click="add">mdi-plus</v-icon>
     <span
       @click="add"
       style="
         font-weight: 400;
         padding-left: 10px !important;
         cursor: pointer !important;
       "
       >添加</span
     >
   </v-col>
 </v-row>
 <v-row
   align="center"
   v-for="(item, index) in backend"
   :key="index"
   class="add_list"
   style="margin-top: 0 !important"
 >
   <v-col cols="3">
     <v-subheader></v-subheader>
   </v-col>
   <v-col cols="9" class="d-flex align-center">
     <v-col cols="7" style="padding: 4px 0 !important">
       <v-text-field
         v-model="item.protocol"
         class="text-caption border_styleset"
         placeholder="IP地址"
         required
         :rules="rules.notNullRules"
       ></v-text-field>
     </v-col>
     :
     <v-col cols="3">
       <v-text-field
         v-model="item.port"
         class="text-caption border_styleset"
         placeholder="端口号"
         required
         :rules="rules.notNullRules"
       ></v-text-field>
     </v-col>
     <v-icon color="red" @click="remove(index)"
       >mdi-trash-can-outline</v-icon
     >
   </v-col>
 </v-row>
 <v-row>
  <v-col class="d-flex" cols="3"></v-col>
  <v-col cols="9" class="text-left">
    <v-btn
      elevation="4"
      medium
      @click="type === 'create' ? save() : modify()"
      >提交</v-btn
    >
  </v-col>
</v-row>
</v-form>
 
 <script>
import { api_request } from "@/util/network";
import bus from "@/util/eventBus";
import { dealBacken, renderBacken } from "../util/dealData";
import Snackbar from "@/components/Snackbar";

export default {
  name: "AddApplication",
  props: ["type", "curId"],
  data() {
    return {
      rules: {
        notNullRules: [(v) => !!v || "此项为必填项"]
      },
      valid: true,
      backend: [
        {
          protocol: "",
          port: "",
        },
      ],
    };
  },
  methods: {
    save() {
      if (this.$refs.form.validate() && this.backend.length > 0) {
        let payload = {
          backend: dealBacken(this.backend),
        };
        this.$http
          .post("/api/create", payload)
          .delegateTo(api_request)
          .then(() => {
            this.$store.commit("show_sheet", { show: false });
            bus.$emit("refreshList");
            return "创建成功";
          })
          .catch(({ code, message }) => {
            throw `创建失败：${this.$t("api." + code)}, 额外信息: ${this.$t(
              "api." + typeof message === "string"
                ? message
                : JSON.stringify(message)
            )}`;
          })
          .delegateTo(this.$snackbar.delegate);
      } else {
        this.$snackbar.showMessage({
          content: `请填写完整`,
          isError: true,
        });
      }
    },
    modify() {
      if (this.$refs.form.validate() && this.backend.length > 0) {
        let payload = {
          backend: dealBacken(this.backend),
        };
        this.$http
          .patch(`/api/${this.curId}`, payload)
          .delegateTo(api_request)
          .then(() => {
            this.$store.commit("show_sheet", { show: false });
            bus.$emit("refreshList");
            return "修改成功";
          })
          .catch(({ code, message }) => {
            throw `修改失败：${this.$t("api." + code)}, 额外信息: ${this.$t(
              "api." + typeof message === "string"
                ? message
                : JSON.stringify(message)
            )}`;
          })
          .delegateTo(this.$snackbar.delegate);
      } else {
        this.$snackbar.showMessage({
          content: `请填写完整`,
          isError: true,
        });
      }
    },
    add() {
      this.backend.unshift({
        protocol: "",
        port: "",
      });
    },
    remove(index) {
      this.backend.splice(index, 1);
    },
    fetchCurApplication() {
      return this.$http
        .get(`/api/port/${this.curId}`)
        .delegateTo(api_request)
        .then(({ backend }) => {
          this.backend = renderBacken(backend);
        })
        .catch(({ code, message }) => {
          this.loading = true;

          throw `获取数据失败：${this.$t("api." + code)}, 额外信息: ${this.$t(
            "api." + typeof message === "string"
              ? message
              : JSON.stringify(message)
          )}`;
        })
        .delegateTo(this.$snackbar.delegateError);
    },
  },
  computed: {
    show_sheet: {
      get() {
        return this.$store.state.show_sheet;
      },
      set(value) {
        this.$store.commit("show_sheet", { show: value });
      },
    },
  },
  watch: {
    show_sheet(v) {
      if (v === false) {
        this.$emit("resetCompEvent", null);
      } else {
        this.type === "edit" ? this.fetchCurApplication() : null;
      }
    },
  },
  components: {
    Snackbar,
  },
};
</script>  

util/dealData.js

function dealBacken(list) {
  return list.map((item) => {
    item = `${item.protocol}:${item.port}`;
    return item;
  });
}

function renderBacken(list) {
  return list.map((item) => {
    let obj = {};
    let curItem = item.split(":");
    obj.protocol = curItem[0];
    obj.port = curItem[1];
    return obj;
  });
}

export { dealBacken, renderBacken };