vue加elementui加axios之简单的CRUD

前言：为大家带来一用vue加elementui加axios之简单的CRUD篇
element-ui-api
vue与axios就不太多介绍了(推荐文章参考)
axios基本用法
vue添加axios，并且指定baseurl
后台数据(分页)
前端页面效果
1.数据展示

2.数据添加（或修改对话框）【采用简单的输入框复杂请查看element-ui-api】容许偷个小懒😉😁😁😁😁

废话不多说-----撸代码
—页面代码基础页面代码

<template>
  <div>
    <el-container>
      <el-header
        style="padding: 0px;display:flex;justify-content:space-between;align-items: center"
      >
        <div style="display: inline">
          <el-input
            placeholder="输入书籍名称"
            clearable
            @change="keywordsChange"
            style="width: 300px;margin: 0px;padding: 0px;"
            size="mini"
            :disabled="advanceSearchViewVisible"
            @keyup.enter.native="searchEmp"
            prefix-icon="el-icon-search"
            v-model="keywords"
          ></el-input>
          <el-button
            type="primary"
            size="mini"
            style="margin-left: 5px"
            icon="el-icon-search"
            @click="search"
          >搜索</el-button>
        </div>
        <div style="margin-left: 5px;margin-right: 20px;display: inline">
          <el-button type="primary" size="mini" icon="el-icon-plus" @click="showAddView">添加书籍</el-button>
        </div>
      </el-header>
      <el-main style="padding-left: 0px;padding-top: 0px">
        <div>
          <transition name="slide-fade">
          </transition>
          <el-table
            :data="books"
            v-loading="tableLoading"
            border
            stripe
            @selection-change="handleSelectionChange"
            size="mini"
            style="width: 100%"
          >
            <el-table-column type="selection" align="left" width="30"></el-table-column>
            <el-table-column prop="bkid" align="left" fixed label="书籍编号" width="90"></el-table-column>
            <el-table-column label="封面" width="180">
              <template slot-scope="scope">
　　　　        <img :src="scope.row.bkcover" width="60" height="100" class="head_pic"/>
　　          </template>
            </el-table-column>

            <el-table-column prop="bkname" label="书籍名称" width="180"></el-table-column>
            <el-table-column prop="bkauthor" label="作者" width="180"></el-table-column>
            <el-table-column  label="文件位置">
              <template slot-scope="scope">
                <a :href="scope.row.bkfile" target="_blank" class="buttonText">{{scope.row.bkfile}}</a>
              </template>
            </el-table-column>
            <el-table-column fixed="right" label="操作" width="195">
              <template slot-scope="scope">
                <el-button
                  @click="showEditView(scope.row)"
                  style="padding: 3px 4px 3px 4px;margin: 2px"
                  size="mini"
                >编辑</el-button>
                <el-button
                  type="danger"
                  style="padding: 3px 4px 3px 4px;margin: 2px"
                  size="mini"
                  @click="delete(scope.row)"
                >删除</el-button>
              </template>
            </el-table-column>
          </el-table>
          <div style="display: flex;justify-content: space-between;margin: 2px">
            <el-button
              type="danger"
              size="mini"
              v-if="books.length>0"
              :disabled="multipleSelection.length==0"
              @click="deleteMany"
            >批量删除</el-button>
            <el-pagination
              background
              :page-size="5"
              :current-page="currentPage"
              @current-change="currentChange"
              layout="prev, pager, next"
              :total="totalCount"
            ></el-pagination>
          </div>
        </div>
      </el-main>
    </el-container>
    <el-form :model="book" :rules="rules" ref="myForm" style="margin: 0px;padding: 0px;">
      <div style="text-align: left">
        <el-dialog
          :title="dialogTitle"
          style="padding: 0px;"
          :close-on-click-modal="false"
          :visible.sync="dialogVisible"
          :label-position="right" 
          width="40%"
        >
                <el-form-item label="书籍名称:" prop="bkname">
                 <el-input prefix-icon="el-icon-edit"  v-model="book.bkname" size="mini" style="width: 150px"
                  ></el-input>
                </el-form-item>
                <el-form-item label="书籍封面:" prop="bkcover" >
                 <img :src="book.bkcover" width="60" height="100" class="head_pic" v-if="book.bkcover!=''"/>
                <el-input prefix-icon="el-icon-edit"  v-model="book.bkcover" size="mini" style="width: 200px"
                  ></el-input>
                </el-form-item >
                <el-form-item label="书籍作者:" prop="bkauthor">
                 <el-input prefix-icon="el-icon-edit"  v-model="book.bkauthor" size="mini" style="width: 150px"
                  ></el-input>
                  </el-form-item >
                   <el-form-item label="书籍位置:" prop="bkfile">
                 <el-input prefix-icon="el-icon-edit"  v-model="book.bkfile" size="mini" style="width: 250px"
                  ></el-input>
                  </el-form-item >
          <span slot="footer" class="dialog-footer">
            <el-button size="mini" @click="cancelEidt">取 消</el-button>
            <el-button size="mini" type="primary" @click="subMyform('myForm')">确 定</el-button>
          </span>
        </el-dialog>
      </div>
    </el-form>
  </div>
</template>

js代码
各种书据及方法

<script>
export default {
  data() {
    return {
    //接收表格加载的数据
      books: [],
      //搜索的关键字
      keywords: "",
      //对话框的标题
      dialogTitle: "",
      multipleSelection: [],
      //对话框的显示和隐藏
      dialogVisible: false
      tableLoading: false,
      //分页的控制
      totalCount: -1,
      currentPage: 1,
      //表单的数据模型
      book: {
        bkid: '',
        bkclass: '',
        bkname: "11",
        bkauthor: "",
        bkpublisher: "",
        bkfile: "",
        bkcover: "",
        bkprice: "",
        bookbrief: ""
      }
    }
  },
  mounted: function() {
  	//页面加载直接加载表格数据
    this.initData();
  },
  methods: {
   //初始化表单加载数据
    initData() {
      var _this = this;
      //通过axios调用接口得到数据
      this.getRequest(
        "/books/tableData?page=" +
          this.currentPage +
          "&size=3&keywords=" +
          this.keywords 
          ).then(resp => {
        if (resp && resp.status == 200) {
          var data = resp.data;
          _this.books = data.list;
          _this.totalCount = data.total;
        }
      });
    },
    //打开编辑对话框(传输一行数据)
    showEditView(row) {
      //console.log(row);
      //把传输的一行数据使用表单数据模型存储
      this.book=row;
      //更改对话框标题
      this.dialogTitle = "编辑书籍";
      this.dialogVisible = true;
      
    },
    //打开添加对话框
    showAddView() {
    //更改对话框标题
      this.dialogTitle = "添加书籍";
      this.dialogVisible = true;
     
    },
    //提交表单数据
    subMyform(formName) {
      var _this = this;
      //通过表单验证
      this.$refs[formName].validate(valid => {
        if (valid) {
        //通过表单数据模型层Id判断添加/修改
          if (this.book.bkid) {
            //更新(把表单数据模型传输到后端)
             this.putRequest("/books", this.book).then(resp=> {
                if (resp && resp.status == 200) {
                  var data = resp.data;
                  _this.$message({type: data.status, message: data.msg});
                  //关闭对话框
                  _this.dialogVisible = false;
                  //清空表单数据模型
                  _this.emptyData();
                 //重新加载数据
                  _this.initData();
                }
              })
          } else {
            //添加更新(把表单数据模型传输到后端)
             this.tableLoading = true;
              this.postRequest("/books", this.emp).then(resp=> {
                if (resp && resp.status == 200) {
                  var data = resp.data;
                  _this.$message({type: data.status, message: data.msg});
                 //关闭对话框
                  _this.dialogVisible = false;
                  //清空表单数据模型
                  _this.emptyData();
                 //重新加载数据
                  _this.initData();
                }
              })
            }
          }
        } else {
          return false;
        }
      });
    },
  	//多选框的统计
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    //删除多行数据
    deleteMany() {
      this.$confirm(
        "此操作将删除[" + this.multipleSelection.length + "]条数据, 是否继续?",
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }
      )
        .then(() => {
          var ids = "";
          for (var i = 0; i < this.multipleSelection.length; i++) {
            ids += this.multipleSelection[i].bkid + ",";
          }
          this.doDelete(ids);
        })
        .catch(() => {});
    },
    //删除一行数据
    delete(row) {
      this.$confirm("此操作将永久删除[" + row.bkname + "], 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.doDelete(row.bkid);
        })
        .catch(() => {});
    },
    //通过axios调用接口删除数据
    doDelete(ids) {
      var _this = this;
      this.deleteRequest("/books" + ids).then(resp => {
        if (resp && resp.status == 200) {
          var data = resp.data;
          _this.$message({ type: data.status, message: data.msg });
        }
      });
    },
    //搜索框改变事件
    keywordsChange(val) {
      if (val == "") {
        this.initData();
      }
    },
    //搜索
    search() {
      this.initData();
    },
    //页码改变事件
    currentChange(currentChange) {
      this.currentPage = currentChange;
      this.initData();
    },
    //取消编辑隐藏对话框
    cancelEidt() {
      this.dialogVisible = false;
      this.emptyData();
    },
    
    //清空表单数据
    emptyData() {
       this.book =  {
        bkid: '',
        bkclass: '',
        bkname: "",
        bkauthor: "",
        bkpublisher: "",
        bkfile: "",
        bkcover: "",
        bkprice: "",
        bookbrief: ""
      };
    },
   
};
</script>

码字不易；希望对大家有帮助😁😁😁😁😉