第十三篇:axios网络通信

好了这事一个非常艰巨的任务  解释以下的全部代码

<template>
  <div class="hello">
    <p style="color:gray">
      提示：在vscode terminal中使用npm run server启动服务，否则是看不到效果的
    </p>
    <!-- <el-button @click="check">点击以测试接口</el-button>
    <el-row>
      <el-select v-model="method">
        <el-option
          v-for="(m, key) in methods"
          :key="key"
          :label="m + '(' + key + ')'"
          :value="key"
        ></el-option>
      </el-select>
    </el-row>
    <el-row style="width:40%;">
      用户名:<el-input v-model="id"></el-input>

      密码:<el-input v-model="password"></el-input>

      年龄:<el-input v-model="age"></el-input>

      性别:<el-input v-model="sexual"></el-input>
    </el-row> -->
    <h1 style="text-align:center">
      用户操作表
    </h1>
    <pre>
      {{ result }}
    </pre>
    <!---测试案例-->
    <el-row>
      <el-button @click="addUser">添加用户</el-button>
    </el-row>
    <el-table :data="tableData" style="width: 100%">
      <el-table-column prop="id" label="用户名" width="180"> </el-table-column>
      <el-table-column prop="password" label="用户密码" width="180">
      </el-table-column>
      <el-table-column prop="age" label="年龄"> </el-table-column>
      <el-table-column prop="sexual" label="性别">
        <template slot-scope="scope">
          {{ scope.row.sexual ? "女" : "男" }}
        </template>
      </el-table-column>
      <el-table-column prop="age" label="年龄">
        <template slot-scope="scope">
          <el-button @click="editUser(scope.row)" type="text" size="small"
            >编辑</el-button
          >
          <el-button @click="removeUser(scope.row)" type="text" size="small"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <el-dialog :visible.sync="showDialog">
      <el-row style="width:40%;">

        用户名:<el-input v-model="id" :disabled="mode == 'update'"></el-input>

        密码:<el-input v-model="password"></el-input>

        年龄:<el-input-number v-model="age"></el-input-number>

        性别:<el-select v-model="sexual">
          <el-option label="男" :value="0"></el-option>
          <el-option label="女" :value="1"></el-option>
        </el-select>
      </el-row>
      <div slot="footer">
        <el-button @click="showDialog = false">取 消</el-button>
        <el-button type="primary" @click="apply(mode)">{{
          mode == "add" ? "创建" : "编辑"
        }}</el-button>
      </div>
    </el-dialog>
  </div>
</template>

下面是脚本了
<script>
export default {
  name: "HelloWorld",
  mounted() {
    this.refreshTable();
  },
  data() {
    return {
      showDialog: false,
      mode: "add",
      tableData: [],
      methods: {
        save: "保存用户信息",
        update: "修改用户信息",
        check: "验证密码",
        delete: "删除用户",
        add: "添加用户",
        get: "获取用户信息"
      },
      method: "check",
      result: "",
      age: "",
      sexual: "",
      id: "",
      password: ""
    };
  },
  methods: {
    apply(mode) {
      this.send(
        mode,
        {
          id: this.id,
          password: this.password,
          sexual: this.sexual,
          age: this.age
        },
        () => {
          this.refreshTable();
          this.showDialog = false;
        }
      );
    },
    addUser() {
      this.showDialog = true;
      this.mode = "add";
      ["id", "sexual", "age", "password"].forEach(item => {
        this[item] = undefined;
      });
    },
    editUser(source) {
      this.showDialog = true;
      this.mode = "update";
      ["id", "sexual", "age", "password"].forEach(item => {
        this[item] = source[item];
      });
    },
    removeUser(user) {
      this.send("delete", user, () => {
        this.refreshTable();
      });
    },
    send(method, option, callback) {
      this.result = "";
      this.$axios.post("/user/" + method, option).then(res => {
        let result = res.data;
        if (result.status == -1) {
          alert(result.msg);
          return;
        }
        callback(result.data && JSON.parse(JSON.stringify(result.data)));
      });
    },
    refreshTable() {
      this.send("get", {}, data => {
        this.tableData = data;
      });
    },
    check() {
      this.result = "";
      this.$axios
        .post("/user/" + this.method, {
          id: this.id,
          age: this.age,
          password: this.password,
          sexual: this.sexual
        })
        .then(res => {
          console.log("res=>", res);
          this.result = res.data;
        });
    }
  }
};
</script>