VUE-CRUD+表单验证

1.后台数据接口准备

   增删改接口

/**
	 * 书本新增
	 * @param book
	 */
	public void addBook(Book book) {
		String sql="insert into t_book_vue(bookname,price,booktype) values(?,?,?)";
		super.executeUpdate(sql, new Object[] {
				book.getBookname(),
				book.getPrice(),
				book.getBooktype()
		});
	}
	
	/**
	 * 书本删除
	 * @param book
	 */
	public void delBook(Book book) {
		String sql="delete from t_book_vue where id=?";
		super.executeUpdate(sql, new Object[] {
				book.getId()
		});
	}
	
	/**
	 * 书本修改
	 * @param book
	 */
	public void updateBook(Book book) {
		String sql="update t_book_vue set bookname=?,price=?,booktype=? where id=?";
		super.executeUpdate(sql, new Object[] {
				book.getBookname(),
				book.getPrice(),
				book.getBooktype(),
				book.getId()
		});
	}

---

2.Dialog弹出框

 

  2.1 基本结构

  <el-dialog :title="title" :visible.sync="dialogFormVisible" @close="dialogClose">
    <!-- form表单 -->
    <el-form :label-position="labelPosition" :model="bookForm" :rules="rules" ref="bookForm">
    ...
    </el-form>
  </el-dialog>

---

 3.表单 

 

 3.1 基本结构

  <el-form :label-position="labelPosition" :model="bookForm" :rules="rules" ref="bookForm">
     <el-form-item label="书本编号" :label-width="formLabelWidth">
    <el-input v-model="bookForm.id" autocomplete="off"></el-input>
     </el-form-item>
     <el-form-item label="书本名称" prop="bookname" :label-width="formLabelWidth">
        <el-input v-model="bookForm.bookname" autocomplete="off"></el-input>
     </el-form-item>
     ... 
  </el-form>

  注1：:label-position设置表单对齐方式
  注2：<el-form :model="bookForm"></el-form>设置表单元素属性双向绑定的对象属性名称
  
       data: function() {
       return {
               bookForm: {
           id: null,
           bookname: null,
           price: '',
           booktype: null
           }
           };
       }

  3.2 表单验证

  <el-form :model="bookForm" :rules="rules" ref="bookForm">
     ...
  </el-form>

  注1：:rules="rules"表单验证定义，只需要通过 rules 属性传入约定的验证规则
       
       //将el-form-item的prop属性设置为需校验的字段名即可,如下：
       <el-form-item label="书本名称" prop="bookn