? ? ? ? ? ? ? ? ? ? ? ?

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ???本文章收錄與ElementUI原創(chuàng)專欄：ElementUI專欄

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ????? ElementUI的官網(wǎng)：ElementUI官網(wǎng)

目錄

一.前言

二.使用ElementUI完成增刪改

? ? ? ? 2.1 后臺代碼

? ? ? ? 2.2 前端代碼

三.使用ElementUI完成表單驗證

一.前言

? ? ? ? 本章是繼上一篇的基礎(chǔ)之上在做完善，上一篇是教大家如何使用ElementUI制作動態(tài)菜單欄以及表格的分頁查詢，本章就是繼續(xù)上篇完成剩下的增刪改功能，采用的是前后端分離，大家如果有不懂的可以點擊上方的ElementUI的專欄進去查看喲~

二.使用ElementUI完成增刪改

? ? ? ? 2.1 后臺代碼

? ? ? ? ? ? ? ?增刪改的后端代碼：

  @RequestMapping("/addBook")
    @ResponseBody
    public JsonResponseBody<?> addBook(Book book){
        try {
            bookService.insert(book);
            return new JsonResponseBody<>("新增書本成功",true,0,null);
        } catch (Exception e) {
            e.printStackTrace();
            return new JsonResponseBody<>("新增書本失敗",false,0,null);
        }
    }

    @RequestMapping("/editBook")
    @ResponseBody
    public JsonResponseBody<?> editBook(Book book){
        try {
            bookService.updateByPrimaryKey(book);
            return new JsonResponseBody<>("編輯書本成功",true,0,null);
        } catch (Exception e) {
            e.printStackTrace();
            return new JsonResponseBody<>("編輯書本失敗",false,0,null);
        }
    }

    @RequestMapping("/delBook")
    @ResponseBody
    public JsonResponseBody<?> delBook(Book book){
        try {
            bookService.deleteByPrimaryKey(book.getId());
            return new JsonResponseBody<>("刪除書本成功",true,0,null);
        } catch (Exception e) {
            e.printStackTrace();
            return new JsonResponseBody<>("刪除書本失敗",false,0,null);
        }
    }

    @RequestMapping("/queryBookPager")
    @ResponseBody
    public JsonResponseBody<List<Book>> queryBookPager(Book book, HttpServletRequest req){
        try {
            PageBean pageBean=new PageBean();
            pageBean.setRequest(req);
            List<Book> books = bookService.queryBookPager(book, pageBean);
            return new JsonResponseBody<>("OK",true,pageBean.getTotal(),books);
        } catch (Exception e) {
            e.printStackTrace();
            return new JsonResponseBody<>("分頁查詢書本失敗",false,0,null);
        }
    }

? ? ? ? 2.2 前端代碼

? ? ? ? 定義接口：?????????

? ? ? ? 數(shù)據(jù)樣式格式：都是去ElementUI官網(wǎng)copy的，然后根據(jù)自己的情況進行修改即可

<template>
  <div class="books" style="padding: 20px;">
    <!-- 1.搜索框 -->
    <el-form :inline="true" class="demo-form-inline">
      <el-form-item label="書籍名稱">
        <el-input v-model="bookname" placeholder="書籍名稱"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">查詢</el-button>
        <el-button type="primary" @click="open">新增</el-button>
      </el-form-item>
    </el-form>
    <!-- 2.表格 -->
    <el-table :data="tableData" style="width: 100%">
      <el-table-column prop="id" label="書籍ID" width="180">
      </el-table-column>
      <el-table-column prop="bookname" label="書籍名稱" width="180">
      </el-table-column>
      <el-table-column prop="price" label="書籍價格" width="180">
      </el-table-column>
      <el-table-column prop="booktype" label="書籍類型" width="180">
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button size="mini" @click="open(scope.row)">編輯</el-button>
          <el-button size="mini" type="danger" @click="del(scope.row)">刪除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 3.分頁條 -->
    <div class="block">
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="page"
        :page-sizes="[10, 20, 30, 40]" :page-size="100" layout="total, sizes, prev, pager, next, jumper" :total="total">
      </el-pagination>
    </div>
    <!-- 4.多功能彈出框 -->
    <el-dialog :title='title' :visible.sync="dialogFormVisible" @close="clear">
      <el-form :model="book">
        <el-form-item label="書籍ID" :label-width="formLabelWidth">
          <el-input v-model="book.id" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="書籍名稱" :label-width="formLabelWidth">
          <el-input v-model="book.bookname" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="書籍價格" :label-width="formLabelWidth">
          <el-input v-model="book.price" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="書籍類別" :label-width="formLabelWidth">
          <el-select v-model="book.booktype" placeholder="請選擇書籍類型">
            <el-option v-for="t in types" :label="t.name" :value="t.name" :key="'key_'+t.id"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="dosub">確 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

? ? ? ? 邏輯代碼：新增和修改是共用一個彈框，然后用 if 判斷，改變窗口的標題，接著根據(jù)窗體的標題來判斷調(diào)用新增的方法還是修改的方法，刪除的彈框的話也是在ElementUI官網(wǎng)中找的，獲取id進行刪除整條數(shù)據(jù)。

<script>
  export default {
    data() {
      return {
        bookname: '',
        tableData: [],
        rows: 10,
        page: 1,
        total: 0,
        title: '新增界面',
        // 默認不展示窗口
        dialogFormVisible: false,
        formLabelWidth: "100px", //寬度
        types: [],
        book: {
          id: "",
          bookname: "",
          price: "",
          booktype: ""
        }
      }
    },
    methods: {
      //刪除
      del(row) {
        this.$confirm('你確定要刪除該數(shù)據(jù)嘛~親?', '提示', {
          confirmButtonText: '確定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          let url = this.axios.urls.BOOK_DEL;
          this.axios.post(url, {id:row.id}).then(r => {
            console.info(r);
            //彈出框
            this.$message({
              type: 'success',
              message: '刪除成功!'
            });

            this.query({});
          }).catch(e => {})

        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消刪除'
          });
        });
      },
      dosub() {
        //新增
        //路由
        let url = this.axios.urls.BOOK_ADD;
        if (this.title == '編輯界面') {
          url = this.axios.urls.BOOK_UPD;
        }
        let params = {
          id: this.book.id,
          bookname: this.book.bookname,
          price: this.book.price,
          booktype: this.book.booktype
        };
        console.info(params);
        this.axios.post(url, params).then(r => {
          console.info(r);
          this.clear();
          this.query({});
        }).catch(e => {

        })
      },
      clear() {
        //初始化窗體
        this.dialogFormVisible = false;
        this.title = '新增界面';
        this.book = {
          id: "",
          bookname: "",
          pric: "",
          booktype: ""
        }
      },
      open(row) {
        //打開窗口
        this.dialogFormVisible = true;
        if (row) {
          this.title = '編輯界面';
          //賦值
          this.book.id = row.id;
          this.book.bookname = row.bookname;
          this.book.price = row.price;
          this.book.booktype = row.booktype;

        }
      },
      query(params) {
        //路由
        let url = this.axios.urls.BOOK_LIST;
        this.axios.get(url, {
          params: params
        }).then(r => {
          console.info(r);
          this.tableData = r.data.rows;
          this.total = r.data.total;
        }).catch(e => {

        })
      },
      onSubmit() {
        //模糊查詢的字段
        let params = {
          bookname: this.bookname
        }
        this.query(params);
      },
      handleSizeChange(r) {
        // 當頁大小發(fā)生變化

        let params = {
          bookname: this.bookname,
          rows: r,
          page: this.page
        }
        this.query(params);
      },
      handleCurrentChange(p) {
        // 當前頁碼發(fā)生變化
        let params = {
          bookname: this.bookname,
          rows: this.rows,
          page: p
        }
        this.query(params);
      }

    },
    created() {
      this.query({});
      //需要發(fā)ajax請求后臺數(shù)據(jù)，在這里我給它定死了
      this.types = [{
        id: 1,
        name: '短文'
      }, {
        id: 2,
        name: '愛情'
      }, {
        id: 3,
        name: '爽文'
      }]
    }
  }
</script>

? ? ? ? 看一下效果吧：

三.使用ElementUI完成表單驗證

????????第一步:去ElementUI官網(wǎng)搜索表單驗證：會發(fā)現(xiàn)需要添加：

? ?第二步：指定需要驗證的屬性字段，添加：

第三步，寫驗證規(guī)則

rules: {
          bookname: [{
            required: true,
            message: '請輸入書籍名稱',
            trigger: 'blur'
          }],
          price: [{
            required: true,
            message: '請輸入書籍價格',
            trigger: 'blur'
          }],
          booktype: [{
            required: true,
            message: '請輸入書籍類型',
            trigger: 'blur'
          }]
        }

最后一步使用驗證規(guī)則：

?

代碼：

 dosub() {
        // 驗證表單
        this.$refs['book'].validate((valid) => {
          if (valid) {
            //新增
            //路由
            let url = this.axios.urls.BOOK_ADD;
            if (this.title == '編輯界面') {
              url = this.axios.urls.BOOK_UPD;
            }
            let params = {
              id: this.book.id,
              bookname: this.book.bookname,
              price: this.book.price,
              booktype: this.book.booktype
            };
            console.info(params);
            this.axios.post(url, params).then(r => {
              console.info(r);
              this.clear();
              this.query({});
            }).catch(e => {

            })
          } else {
            console.log('error submit!!');
            return false;
          }
        });


      }

?好啦，看看效果吧?。?/strong>