Async get and post request interface data (add, delete, modify and query pages)

1.async get Request interface data

async xzlist() {
  const { data: res } = await this.$http_message.post(
    "/shift_change_log/list",
    this.queryList
  );
  if (res.code == 0) {
    console.log(res.data);
    this.list = res.data.rows;
    this.total = res.data.total;
  } else {
    return this.$message.error(" Failed to get user information ！");
  }
},

queryList You may be confused when you see here
Here we put the requested parameters ID name Or paging parameters
for example ：

  queryList: {
        asc: true,
        orderBy: "id",
        pageNum: 1,
        pageSize: 10,
         regDateBeginTime: "2001-01-01",
         regDateEndTime: "2001-01-01",
         shiftId: 0,
         status: 1,
        teamId: 10,
      },

xzlist This is the event name We can do it in mounted perhaps created To mount .

 created() {
    //  Enter the page to call the Department user information 
    this.xzlist();
  },

We can do it in console.log() Print it. Let's look at it on the console

At the same time, it is more convenient for us to be backstage network It is more convenient to view the interface request information .

So our data will pass list The array is rendered to the page

To add, we use post request
As above, put the requested parameters into addForm in

// New Department 
    async addDepartment() {
      const { data: res } = await this.$http_message.post(
        "/fault_info/create",
        this.addForm
      );
      console.log(res.data);
      if (res.code == 0) {
        this.$message.success(res.msg);
        this.ediDialogVisible = false;
        this.xzlist();
      } else {
        return this.$message.error(" Failed to add Department ！");
      }
    },

To edit, we first click the Edit button to get the current id The data of The echo

  // Revision Department 
    async showEditDialog(id) {
      this.addDialogVisible = true;
      const { data: res } = await this.$http_message.get(
        "fault_info/getDataById?id=" + id
      );
      if (res.code == 0) {
        console.log(res.data);
        this.ediForm = res.data;
      } else {
        console.log(" Failure ");
      }
    },

The second is the edit and modify page pop-up box

async eidtUserInfo() {
  const { data: res } = await this.$http_base.post(
    "parameters/main/update",
    this.ediForm
  );
  if (res.code == 0) {
    this.$message.success(" Department modified successfully ");
    this.addDialogVisible = false;
    this.xzlist();
  } else {
    console.log(" Failure ");
    return this.$message.error(" Failed to modify Department !");
  }
},

Someone may be right **$http_base** This is a stranger This is our server request
Because we have several servers In order to distinguish between

Configure a to request back-end services api

It's no stranger to delete Maybe my favorite thing is to delete Directly through id Delete

  // Delete user 
    async removeUserById(id) {
      const confirmResult = await this.$confirm(
        " Are you sure you want to delete the current user ",
        " Delete ",
        {
          confirmButtonText: " determine ",
          cancelButtonText: " Cancel ",
          type: "warning",
        }
      ).catch((err) => {
        return err;
      });
      if (confirmResult !== "confirm") {
        return this.$message.info(" Cancel deletion succeeded ");
      } else {
        const { data: res } = await this.$http_message.get(
          "fault_info/delete?id=" + id,
          this.delete
        );
        if (res.code == 0) {
          this.$message.success(" Delete user succeeded ");
          this.xzlist();
        } else {
          return this.$message.error(" Failed to delete user ！");
        }
      }
    },

Paging is also an essential part （html department ）

  <p style="margin-top: 20px; color: #fff"> common {
   { total }} Bar record </p>
      <div class="fenye">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="queryList.page"
          :page-sizes="[5, 10, 15]"
          :page-size="queryList.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        ></el-pagination>
      </div>

methods: Write events in it

handleSizeChange(newSize) {
  console.log(newSize);
  this.queryList.pageSize = newSize;
  this.xzlist();
},
handleCurrentChange(newpage) {
  console.log(newpage);
  this.queryList.pageNum = newpage;
  this.xzlist();
},

a fly in the ointment Please give me more suggestions

《 Front end interview questions of first-line large factories + Develop learning notes + The latest architecture explanation video + Handout of the event station project 》
【https://docs.qq.com/doc/DQVJzbnRIWWNtcVR4】 Full content open source sharing