vue--vuue+Element使用表单验证+CRU

 接上篇的数据表格与分页,今天我们给表格中的数据增删改与表单验证

后端接口

Web层
 

private Book book=new Book();
	private BookDao bookDao=new BookDao();
	private ObjectMapper mapper=new ObjectMapper();
	@Override
	public Book getModel() {
		return book;
	}

	public String queryBookPager(HttpServletRequest req,HttpServletResponse resp)
			throws ServletException,IOException{
		PageBean pageBean=new PageBean();
		pageBean.setRequest(req);
		List<Book> books = bookDao.queryBookPager(book, pageBean);
		Map<String,Object> map=new HashMap<String,Object>();
		Map<String,Object> data=new HashMap<String,Object>();
		data.put("rows", books);
		data.put("total", pageBean.getTotal());
		map.put("data", data);
		map.put("success", true);
		map.put("msg", "OK");
		mapper.writeValue(resp.getOutputStream(),map);
		return null;
	}
	
	/**
	 * 新增
	 * @param req
	 * @param resp
	 * @return
	 * @throws ServletException
	 * @throws IOException
	 */
	public String addBook(HttpServletRequest req,HttpServletResponse resp)
			throws ServletException,IOException{
		bookDao.addBook(book);
		Map<String,Object> map=new HashMap<String,Object>();
		map.put("success", true);
		map.put("msg", "OK");
		mapper.writeValue(resp.getOutputStream(),map);
		return null;
	}

	/**
	 * 修改
	 * @param req
	 * @param resp
	 * @return
	 * @throws ServletException
	 * @throws IOException
	 */
	public String editBook(HttpServletRequest req,HttpServletResponse resp)
			throws ServletException,IOException{
		bookDao.UpdateBook(book);
		Map<String,Object> map=new HashMap<String,Object>();
		map.put("success", true);
		map.put("msg", "OK");
		mapper.writeValue(resp.getOutputStream(),map);
		return null;
	}
		
	/**
	 * 删除
	 * @param req
	 * @param resp
	 * @return
	 * @throws ServletException
	 * @throws IOException
	 */
	public String deleteBook(HttpServletRequest req,HttpServletResponse resp)
			throws ServletException,IOException{
		bookDao.deleteBook(book);
		Map<String,Object> map=new HashMap<String,Object>();
		map.put("success", true);
		map.put("msg", "OK");
		mapper.writeValue(resp.getOutputStream(),map);
		return null;
	}

新增

在上一篇中的查询按钮后再加入一个新增按钮,用来打开新增的Dialog 对话框

<el-form-item>
   <el-button type="primary" icon="el-icon-search" @click="query(1)">查询</el-button>
   <el-button type="success" icon="el-icon-plus" @click="open">新增</el-button>
</el-form-item>

添加对话框,在ElementUI官网找到自定义对话框 

<el-dialog :title="title" :visible.sync="dialogFormVisible"  :close-on-click-modal="false" @close="dialogClose">
      <el-form :model="book" >
        <el-form-item label="书本编号" :label-width="formLabelWidth">
          <el-input readonly="readonly" 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  style="width: 100%;" v-model="book.booktype" placeholder="请选择书本类型">
            <el-option label="玄幻" value="玄幻"></el-option>
            <el-option label="计算机" value="计算机"></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="save">确 定</el-button>
   </div>
</el-dialog>

在这里新增和修改共用一个页面

:visible.sync="dialogFormVisible"   用来控制对话框的显示和隐藏 
 dialogFormVisible值为   true/false


 :close-on-click-modal="false"   防止用户误点击对话框外的地方导致对话框关闭

@close="dialogClose"   此方法用于清空上一次打开对话框输入的数据

:label-width="formLabelWidth"  设置文本框的宽度

数据属性定义

data: function() {
      return {
        bookname: '',
        tableData: [],
        page: 1,
        rows: 8,
        total: 0,
        title: '书本新增',
        book: {
          id: '',
          bookname: '',
          price: '',
          booktype: ''
        },
        dialogFormVisible: false,
        formLabelWidth: '100px'
      }
    },

对话框的打开与关闭事件

//对话框打开事件
      open: function() {
        this.dialogFormVisible = true;
      },
      //对话框关闭事件
      dialogClose:function(){
        //清空表单数据
        this.book={
          id: '',
          bookname: '',
          price: '',
          booktype: ''
        };
        //清空表单验证
        this.$refs['book'].resetFields();
        //重置对话框标题
      this.title='书本新增';
      },

确定按钮   

                修改和确定共用一个对话框 ,在此判断标题并对其执行方法进行改变

save:function(){
          //表单验证
           this.$refs['book'].validate((valid) => {
              if (valid) {
                //请求路径
                let url=this.axios.urls.QUERY_BOOK;
                let methodName='addBook';
                console.log(this.title);
                if(this.title=='编辑书本'){
                  methodName='editBook';
                }
                //请求参数
                this.book['methodName']=methodName;

                //发送axios请求
                this.axios.post(url,this.book).then(resp=>{
                  let data=resp.data;
                   console.log(resp);
                   this.$message({
                            message: data.msg,
                            type: data.success==true?'success':'error'
                   });

                   if(data.success){
                     //关闭对话框
                      this.dialogFormVisible = false;
                     //刷新页面
                     this.query(this.page);
                   }
                }).catch(err=>{
                  console.log(err);
                });

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

表单验证

找到官方文档中的表单验证

Form 组件提供了表单验证的功能,只需要通过 rules 属性传入约定的验证规则,并将 Form-Item 的 prop 属性设置为需校验的字段名即可

定义验证规则  

        rules: {
            bookname: [
                 { required: true, message: '请输入书本名称', trigger: 'blur' },
            ],
            price: [
                 { required: true, message: '请输入书本价格', trigger: 'blur' },
            ],
            booktype: [
                 { required: true, message: '请选择书本类型', trigger: 'change' },
            ],
        }

然后给表单使用验证

<el-form :model="book" :rules="rules" ref="book">
        <el-form-item label="书本编号" :label-width="formLabelWidth">
          <el-input readonly="readonly" v-model="book.id" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item prop="bookname" label="书本名称" :label-width="formLabelWidth">
          <el-input v-model="book.bookname" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item prop="price" label="书本价格" :label-width="formLabelWidth">
          <el-input v-model="book.price" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item  prop="booktype" label="书本类型" :label-width="formLabelWidth">
          <el-select  style="width: 100%;" v-model="book.booktype" placeholder="请选择书本类型">
            <el-option label="玄幻" value="玄幻"></el-option>
            <el-option label="计算机" value="计算机"></el-option>
          </el-select>
        </el-form-item>
      </el-form>

在表单上添加rules 和ref属性   rules代表定义的验证规则  ref代表一个唯一的id一样
在每一个需要验证的标签中添加prop属性,prop="此处的名字,必须与rules中定义的属性一致"

 

 

修改

首先在官方文档中找到表格中的自定义列模板

<!-- 数据表格 -->
    <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="id" label="书本编号" width="180">
        </el-table-column>
        <el-table-column prop="bookname" label="书本名称" width="180">
        </el-table-column>
        <el-table-column prop="price" label="书本价格">
        </el-table-column>
        <el-table-column prop="booktype" label="书本类型">
        </el-table-column>
        <!-- 插槽 -->
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button
              size="mini"
              @click="handleEdit(scope.row)">编辑</el-button>
            <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.row)">删除</el-button>
          </template>
        </el-table-column>
    </el-table>

方法定义

//书本编辑
      handleEdit:function(row){
          //设置标题为编辑书本
          this.title='编辑书本';
          //设置对话框显示
          this.dialogFormVisible = true;
          //赋值表单数据
          this.book={
            id: row.id,
            bookname: row.bookname,
            price: row.price,
            booktype: row.booktype
          }
      }

然后在关闭对话框中我们需要重置对话框的标题和数据以及表单验证

//对话框关闭事件
      dialogClose:function(){
        //清空表单数据
        this.book={
          id: '',
          bookname: '',
          price: '',
          booktype: ''
        };
        //清空表单验证
        this.$refs['book'].resetFields();
        //重置对话框标题
      this.title='书本新增';
      }

 这里不能直接使用参数row给book赋值,因为数据是双向绑定的

当我直接使用row给book赋值时,就会出现以下情况

先编辑38号书本

 然后我们打开下面书本的编辑按钮并直接关闭对话框

在这里就实现了数据双向绑定 

 

 

删除

定义删除方法

handleDelete:function(row){
        this.$confirm('确定要删除吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
            let url=this.axios.urls.QUERY_BOOK;
            let params={
              id:row.id,
              methodName:'deleteBook'
            };
            //发起axios请求
            this.axios.post(url,params).then(resp=>{
              let data=resp.data;
               console.log(resp);
               this.$message({
                   message: data.msg,
                   type: data.success==true?'success':'error'
               });

               if(data.success){
                 //刷新页面
                 this.query(this.page);
               }
            }).catch(err=>{
              console.log(err);
            });

        }).catch(() => {});
      }

id为40的书本被删除了 

 

至此vue+ElementUI实现动态树+数据表格+分页介绍完毕,由于作者水平有限难免有疏漏,欢迎留言纠错。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值