SPA对数据增删改

后台增删改方法接口

增加方法

//增加方法
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()
});
}

修改方法

//修改
public void editBook(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()
});
}

删除方法

//删除
public void delBook(Book book) {
String sql=“delete from t_book_vue where id=?”;
super.executeUpdate(sql, new Object[] {
book.getId()
});
}

Action调用

public String addBook(HttpServletRequest req,HttpServletResponse resp)
			throws ServletException,IOException{
		try {
			bookDao.addBook(book);
			json.put("msg", "新增书本信息成功");
			json.put("success", true);
			mapper.writeValue(resp.getOutputStream(),json);
		} catch (Exception e) {
			json.put("msg", "新增书本信息失败");
			json.put("success", false);
			mapper.writeValue(resp.getOutputStream(),json);
		}
		return null;
	}
	
	public String editBook(HttpServletRequest req,HttpServletResponse resp)
			throws ServletException,IOException{
		try {
			bookDao.editBook(book);
			json.put("msg", "修改书本信息成功");
			json.put("success", true);
			mapper.writeValue(resp.getOutputStream(),json);
		} catch (Exception e) {
			json.put("msg", "修改书本信息失败");
			json.put("success", false);
			mapper.writeValue(resp.getOutputStream(),json);
		}
		return null;
	}
	
	public String delBook(HttpServletRequest req,HttpServletResponse resp)
			throws ServletException,IOException{
		try {
			bookDao.delBook(book);
			json.put("msg", "删除书本信息成功");
			json.put("success", true);
			mapper.writeValue(resp.getOutputStream(),json);
		} catch (Exception e) {
			json.put("msg", "删除书本信息失败");
			json.put("success", false);
			mapper.writeValue(resp.getOutputStream(),json);
		}
		return null;
	}

前台

新增

<h5点击新增弹出框进行增加

弹出框原型界面

增加与修改共用一个弹出框，使用动态绑定数据

	<!-- 弹出框 -->
	<el-dialog :title="title" :visible.sync="dialogFormVisiblee" 
	:close-on-click-modal="false" @close="diaLogClose">
  <el-form :model="bookForm" :rules="rules" ref="bt">
	  <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-item label="书本价格" prop="price" :label-width="formLabelWidth">
	<el-input v-model="bookForm.price"  autocomplete="off"></el-input>
	</el-form-item>
    <el-form-item label="书本类型" prop="booktype" :label-width="formLabelWidth">
      <el-select v-model="bookForm.booktype" placeholder="----请选择类型----">
        <el-option v-for="t in btype" :key="t.id" :label="t.name" :value="t.id"></el-option>
      </el-select>
    </el-form-item>
  </el-form>
  <div slot="footer" class="dialog-footer">
    <el-button type="primary" @click="dose()">保 存</el-button>
  </div>
</el-dialog>

相关属性定义

弹出框的关闭

关闭时清空弹出框中的类容，并清空表单验证信息

//弹出框关闭
			diaLogClose:function(){
				this.bookForm.id=null;
				this.bookForm.bookname=null;
				this.bookForm.price=null;
				this.bookForm.booktype=null;
				//关闭表单时清空验证信息
				this.$refs['bt'].resetFields();
			}

保存事件与增加，修改方法共用

dose:function(){
				//通过表达验证，然后进行保存
				this.$refs['bt'].validate((valid) =>{
					if(valid){
						let url=this.axios.urls.SYSBOOK_BOOKLIST;
						if(this.title=="书本新增"){
							this.methodName="addBook";
							
						}else{
							this.methodName="editBook";
						}
						let params={
							id:this.bookForm.id,
							bookname:this.bookForm.bookname,
							price:this.bookForm.price,
							booktype:this.bookForm.booktype,
							methodName:this.methodName
						};
						this.axios.post(url,params).then(resp=>{
							let json=resp.data;
							if(json.success){
							 this.$message({
                             message: json.msg,
                              type: 'success'
                             });	
							 //关闭对话框
							 this.dialogFormVisiblee=false;
							 //增加完后调用查询方法
							 this.query();
							}
							else{
							this.$message({
							message: json.msg,
							type: 'error'
							});		
							}
						}).catch(resp=>{
						});
					}
				});
			},	

修改

修改点击事件

//修改按钮事件
			handleEdit:function(index,row){
				//打开弹出框
				this.dialogFormVisiblee=true;
				this.bookForm.id=row.id;
				this.bookForm.bookname=row.bookname;
				this.bookForm.price=row.price;
				this.bookForm.booktype=row.booktype;
				this.title="书本编辑";
				
			},

删除

//删除按钮事件
			handleDelete:function(index,row){
				let url=this.axios.urls.SYSBOOK_BOOKLIST;
				this.axios.post(url,{
					'id':row.id,
					'methodName':'delBook'
					
				}).then(resp=>{
					
			 this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          	let json=resp.data;
          	if(json.success){
          	this.$message({
          	message: json.msg,
          	type: 'success'
          					});	
          	//增加完后调用查询方法
          	this.query();
          	}
          	else{
          	this.$message({
          	message: json.msg,
          	type: 'error'
          	});		
          	}	
          }).catch(); 
       });		
			},