// url:用于请求的服务器URL； data:请求体； config:接口请求的参数(写在params里)
 axios.get(url[, config])
 axios.delete(url[, config])
 axios.post(url[, data[, config]])
 axios.put(url[, data[, config]])

订单页

订单页获取数据

getOrderList() {
      let obj = {};
      Object.keys(this.form).forEach((item) => {
        if (this.form[item] !== "") {
          obj[item] = this.form[item];
        }
      });
      this.loading = true;
      this.$axios
        .get("https://api2.bmob.cn/1/classes/orderList", {
          params: obj,
        })
        .then((res) => {
          // console.log(res.data.results)
          this.orderList = res.data.results.map((item) => {
            item.type = posterType[item.type];
            return item;
          });
          this.orderList = res.data.results.map((item) => {
            item.status = orderStatus[item.status];
            return item;
          });
          // this.pagination = res.data.pagination;
        })
        .catch((err) => {
          console.log(err);
        })
        .finally((e) => {
          setTimeout((e) => {
            this.loading = false;
          }, 1000);
        });
    },

订单页搜索功能

search() {
      // 获取搜索表单中不为空且表单元素不为'date'的值 组成的对象
      let obj = {};
      Object.keys(this.form).forEach((item) => {
        if (this.form[item] !== "" && item != 'date') {
          obj[item] = this.form[item];
        }
      
      
      this.loading = true;
      this.$axios
        .get(`https://api2.bmob.cn/1/classes/orderList`, {
          params: {
            where: obj,   // 条件查询语句
          },
        })
        .then((res) => {
          console.log(res.data.results);
          this.orderList = res.data.results; //将搜索结果显示在表格中，替换原表格
        })
        .catch((err) => {
          console.log(err);
        })
        .finally((e) => {
          setTimeout((e) => {
            this.loading = false;
          }, 1000);
        });
    },

1. Object.keys()

Object.keys() 方法会返回一个由一个给定对象的自身可枚举属性组成的数组，数组中属性名的排列顺序和正常循环遍历该对象时返回的顺序一致。

参数：

obj：要返回其枚举自身属性的对象。

返回值：

一个表示给定对象的所有可枚举属性的字符串数组。

var obj = { 0: 'a', 1: 'b', 2: 'c' };
console.log(Object.keys(obj)); // console: ['0', '1', '2']

2. Array.prototype.forEach()

forEach() 方法对数组的每个元素执行一次给定的函数。

1&2示例：

Object.keys(this.form).forEach((item) => {
        if (this.form[item] !== "" && item != 'date') {
          obj[item] = this.form[item];
        }
      });

模板字符串语法：

`string text`
`string text line 1
 string text line 2`
`string text ${expression} string text`
tag `string text ${expression} string text`
/**
 * 使用反引号 (` `) 来代替普通字符串中的用双引号和单引号。
 * 模板字符串可以包含特定语法（`${expression}`）的占位符
 */

订单页删除功能

handleDelete(index, row) {
      this.$confirm(`确认是否删除订单号为${row.objectId}的记录？`, "删除", {
        confirmButtonText: "确定",
      }).then(() => {
        this.$axios
          //带参数的url
          .delete("https://api2.bmob.cn/1/classes/orderList/" + row.objectId)
          .then((res) => {
            if (res) {
              this.$message.success("删除成功");
              this.getOrderList();
            } else {
              this.$message.error("删除失败");
            }
          });
      });
    },

管理员页

管理员页修改密码

    // 弹出修改密码的对话框
    handleEdit(index,row) {
      this.dialogFormVisible = true;
      this.dialogForm.account = row.account;
      this.objectId = row.objectId    
    },
    // 对话框点击确定触发事件
    editPassword() {}，

将row.objectId 赋值给objectId,并写入 data 中

 data() {
    return {
    objectId: '',
    }

在弹出的 dialog 中使用 this.objectId ,与请求的url拼接在一起

 this.$axios
        .put("https://api2.bmob.cn/1/classes/adminList/"+ this.objectId, {
          password: this.dialogForm.password,
        })

完整的密码修改功能

handleEdit(index,row) {
      this.dialogFormVisible = true;
      this.dialogForm.account = row.account;
      this.objectId = row.objectId    
    },
    editPassword() {
      if (this.dialogForm.password !== this.dialogForm.confirmPassword) {
        this.$message.warning("两次输入的密码不一致！");
        return;
      }
      this.$axios
        .put("https://api2.bmob.cn/1/classes/adminList/"+ this.objectId, {
          password: this.dialogForm.password,           
        })
        .then((res) => {
          if (res) {
            this.$message.success("修改成功");
            let index = this.adminList.findIndex(
              (item) => item.account === this.dialogForm.account
            );
            this.adminList[index].password = this.dialogForm.password;
          } else {
            this.$message.success("修改失败");
          }
        })
        .finally((e) => {
          this.dialogFormVisible = false;
        });
    },

XXX总结后续

订单页