调用后端的接口

最新推荐文章于 2025-07-01 16:52:45 发布

原创最新推荐文章于 2025-07-01 16:52:45 发布 · 3k 阅读

9 ·

CC 4.0 BY-SA版权

vue 专栏收录该内容

17 篇文章

订阅专栏

本文介绍了如何调用后端接口进行数据获取和删除。在获取数据时，首先查看后端接口，然后在axios的api.js中找到对应接口（如getNotice），并在需要的文件中调用。删除数据的步骤类似，通过修改接口名称（如delNotice）并进行调用来实现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

获取数据

1、查看后端的接口
在这里插入图片描述
2、在axios目录下的api.js文件里获取后端的接口（每个接口写发都差不多，只要改接口名称就好如：getNotice）

export const getNotice = (query, tenantkey_A, tenantid_A, username) => { //获取通知消息
  let time_A = getTime()
  let sha_A = hex_sha1("/v1/user/getNotice" + tenantkey_A + time_A)
  return service({
    url: "user/getNotice",
    method: 'get',
    processData: false,
    headers: {
      ts: time_A,
      siginfo: sha_A,
      tenantid: tenantid_A,
      username: username
    },
    params: query
  }).then(res => res)
};

3、在需要的文件里面调用这个方法

import host from "../../host.js";
import { loginout, getNotice } from "../../axios/api";
export default {
  name: "Menu",
  data() {
    return {
      contrForPrioNum: this.$store.state.userInfo.prionum,
      tenantid_A: this.$store.state.userInfo.tenantid,
      tenantkey_A: this.$store.state.userInfo.tenantkey,
      userName: this.$store.state.userInfo.username,
      searchList: {
        username: this.$store.state.userInfo.username,
        status: 1, //1 未读；2 已读
        page: "",
        count: "",
      },
      msgtable: ''
    };
  },
  methods: {
    getMsg() {
      var that=this
      getNotice(
        this.searchList,
        this.tenantkey_A,
        this.tenantid_A,
        this.userName
      ).then((res)=>{
        console.log(res)
        if(res.code == 1001){
          that.msgtable=res.data.list
        }
      });
    },

删除数据

1、查看后端的接口
在这里插入图片描述
2、在axios目录下的api.js文件里获取后端的接口（每个接口写发都差不多，只要改接口名称就好如：delNotice ）

export const delNotice = (datas, tenantkey_A, tenantid_A, username) => { //删除通知信息
  let time_A = getTime()
  let sha_A = hex_sha1("/v1/user/delNotice" + JSON.stringify(datas) + tenantkey_A + time_A)
  return service({
    url: "user/delNotice",
    method: 'delete',
    headers: {
      ts: time_A,
      siginfo: sha_A,
      tenantid: tenantid_A,
      username: username
    },
    data: datas
  }).then(res => res)
};

3、在需要的文件里面调用这个方法


import { delNotice } from "../../axios/api";
data() {
    return {
      contrForPrioNum: this.$store.state.userInfo.prionum,
      tenantid_A: this.$store.state.userInfo.tenantid,
      tenantkey_A: this.$store.state.userInfo.tenantkey,
      userName: this.$store.state.userInfo.username,
      multipleSelection: [],
      searchList: {
        username: this.$store.state.userInfo.username,
        status: "", //1 未读；2 已读
        page: 1,
        count: 10,
      },
      currentPage1: 1,
      total: 0,
      tableData: [],
    };
  },
  //批量删除通知
    deleteMsg(index) {
      var that = this;
      let ids = [];
      for (let i = 0; i < this.multipleSelection.length; i++) {
        ids.push(this.tableData[i].id);
      }
      let datas = {
        ids: ids,
      };
      console.log(datas);
      this.$confirm("确定要删除吗？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        delNotice(datas, this.tenantkey_A, this.tenantid_A, this.userName).then(
          (res) => {
            console.log(res);
            if (res.code == 1001) {
              that.getMsg();
              that.$message({
                message: "删除成功！",
                type: "success",
              });
            }
          }
        );
      });
    },
//删除通知
    deleteRow(index) {
      var that = this;
      let ids = [];
      ids.push(this.tableData[index].id);
      let datas = {
        ids: ids,
      };
      this.$confirm("确定要删除吗？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        delNotice(datas, this.tenantkey_A, this.tenantid_A, this.userName).then(
          (res) => {
            console.log(res);
            if (res.code == 1001) {
              that.getMsg();
              that.$message({
                message: "删除成功！",
                type: "success",
              });
            }
          }
        );
      });
    },