Vue-cli 使用 vue-axios Element 完成数据列表分页 以及增删操作

vue-axios: 一个可以发起 get、post、put、delete请求的插件

1. 安装vue-axios

1. 打开 vs code 进入项目

这个demo的项目创建请参考：

https://blog.csdn.net/assiduous_me/article/details/89208649 

https://blog.csdn.net/assiduous_me/article/details/89210533

2. 打开 vs code 的终端，在终端输入

npm install --save axios vue-axios

2. 配置 vue-axios

1. 打开 main.js

 

import Vue from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";
import ElementUI from "element-ui";
import "element-ui/lib/theme-chalk/index.css";
import axios from "axios";
import VueAxios from "vue-axios";

Vue.config.productionTip = false;
Vue.use(ElementUI);
Vue.use(VueAxios, axios);
Vue.prototype.$axios = axios;
new Vue({
  router,
  store,
  render: h => h(App)
}).$mount("#app");

3. 测试使用 vue-axios

1. 先创建 ScheduleAdd.vue ScheduleList.vue 视图组件

2. 代码编写

ScheduleAdd.vue

<template>
  <div id="container">
    <el-form ref="form" class="scheduleForm" :model="form" label-width="80px">
      <el-form-item label="日程名称">
        <el-input v-model="form.scheduleName"></el-input>
      </el-form-item>
      <el-form-item label="日程地点">
        <el-input v-model="form.scheduleAddr"></el-input>
      </el-form-item>
      <el-form-item label="日程时间">
        <el-input v-model="form.scheduleTime"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button
          type="warning"
          icon="el-icon-back"
          @click="backScheduleList"
          style="margin-right: 140px;"
        >返回列表</el-button>
        <el-button type="primary" @click="onSubmit">立即创建</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
import qs from "qs";
export default {
  data() {
    return {
      form: {
        scheduleName: "",
        scheduleAddr: "",
        scheduleTime: ""
      }
    };
  },
  methods: {
    backScheduleList() {
      this.$router.replace({
        path: "/schedule-list"
      });
    },
    onSubmit() {
      let params = {
        scheduleName: this.form.scheduleName,
        scheduleAddr: this.form.scheduleAddr,
        scheduleTime: this.form.scheduleTime
      };
      params = qs.stringify(params);
      this.$axios
        .post("http://domla.xyz:8080/member/schedule", params, {
          headers: {
            "Content-Type": "application/x-www-form-urlencoded"
          }
        })
        .then(response => {
          if (response.data.code == 200) {
            this.$message({
              type: "success",
              message: "添加成功!"
            });
          } else {
            this.$message({
              type: "error",
              message: "添加失败!"
            });
          }
        });
    }
  }
};
</script>
<style>
#container {
  margin-top: 250px;
}
.scheduleForm {
  width: 500px;
  margin: 0 auto;
}
</style>

ScheduleList.vue

<template>
  <div id="listContainer">
    <el-button id="addBtn" type="primary" icon="el-icon-plus" @click="addSchedule">添加日程</el-button>
    <el-table :data="tableData" style="width: 1200px;" class="mTable">
      <el-table-column label="日程ID" width="180">
        <template slot-scope="scope">{{ scope.row.scheduleId }}</template>
      </el-table-column>
      <el-table-column label="日程名称" width="180">
        <template slot-scope="scope">{{ scope.row.scheduleName }}</template>
      </el-table-column>
      <el-table-column label="日程地点" width="180">
        <template slot-scope="scope">{{ scope.row.scheduleAddr }}</template>
      </el-table-column>
      <el-table-column label="日程时间" width="180">
        <template slot-scope="scope">{{ scope.row.scheduleTime }}</template>
      </el-table-column>
      <el-table-column label="日程状态" width="180">
        <template slot-scope="scope">{{ scope.row.scheduleStatus == 0 ? '未完成' : '已完成' }}</template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
          <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="block">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="pageSizes"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      ></el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [],
      currentPage: 0,
      pageSizes: [5, 10],
      pageSize: 0,
      total: 0,
      page: 1,
      limit: 5
    };
  },
  mounted() {
    this.getScheduleList();
  },
  methods: {
    addSchedule() {
      this.$router.replace({
        path: "/schedule-add"
      });
    },
    handleEdit(index, row) {
      console.log(index, row);
    },
    handleDelete(index, row) {
      console.log(index, row);
      this.$confirm("此操作将永久删除该记录, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.$axios
            .delete("http://domla.xyz:8080/member/schedule/" + row.scheduleId)
            .then(response => {
              if (response.data.code == 200) {
                this.$message({
                  type: "success",
                  message: "删除成功!"
                });
                this.getScheduleList();
              } else {
                this.$message({
                  type: "error",
                  message: "删除失败!"
                });
              }
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },
    handleSizeChange(val) {
      this.limit = val;
      this.getScheduleList();
    },
    handleCurrentChange(val) {
      this.page = val;
      this.getScheduleList();
    },
    getScheduleList() {
      this.$axios
        .get(
          "http://domla.xyz:8080/member/schedule/list?page=" +
            this.page +
            "&limit=" +
            this.limit
        )
        .then(response => {
          this.tableData = response.data.data;
          this.total = response.data.pageInfo.total;
          this.currentPage = response.data.pageInfo.pageNum;
        });
    }
  }
};
</script>
<style>
#listContainer {
  margin-top: 100px;
}
.mTable {
  margin: 40px auto;
}
#addBtn {
  margin-right: 1100px;
}
</style>

 4. 效果展示

列表

添加 

删除

5. 代码地址：https://github.com/2223791042/hello-vue

6. 提示：代码中使用的接口为本人测试时写的，不一定能使用