SPA项目开发之增删改功能+Dialog弹出框

SPA项目开发之增删改功能+Dialog弹出框

    • 一、后台数据接口准备(增删改接口)
      • 1.在BaseDao写入通用的增删改方法
      • 2.在BookDao写入增删改方法
      • 3.在BookAction中调用增删改方法
    • 二、Dialog弹出框
      • 2.1 基本结构
    • 三.表单
      • 3.1 基本结构
      • 3.2 表单验证
    • 四. CUD
      • 4.1 新增
      • 4.2 添加修改/删除按钮
      • 4.3 在``上使用特殊的slot-scope 特性,可以接收传递给插槽的prop
    • BookList总代码
    • 运行后结果
    • 删除效果
    • 修改效果
    • 新增效果
    • 模糊查询效果

一、后台数据接口准备(增删改接口)

1.在BaseDao写入通用的增删改方法

	/**
	 * 通用增删改
	 * @param sql
	 * @param obj
	 */
	public static void executeUpdate(String sql,Object[] obj) {
   
		Connection conn=null;
		PreparedStatement stmt=null;
		try {
   
			conn=DBHelper.getConnection();
			stmt=conn.prepareStatement(sql);
			ParameterMetaData params = stmt.getParameterMetaData();
			for (int i = 0; i < params.getParameterCount(); i++) {
   
				stmt.setObject(i+1, obj[i]);
			}
			stmt.executeUpdate();
		} catch (Exception e) {
   
			e.printStackTrace();
		}finally {
   
			DBHelper.close(conn, stmt, null);
		}
	}

2.在BookDao写入增删改方法

	/**
	 * 增加书籍
	 * @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 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()
		});
	}
/**
 * 删除书籍
 * @param book
 */
	public void delBook(Book book) {
   
		String sql="delete from t_book_vue where id=?";
		super.executeUpdate(sql, new Object[] {
   
				book.getId()
		});
	}

3.在BookAction中调用增删改方法

Map<String, Object> json = new HashMap<String, Object>();

	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

你可能感兴趣的:(笔记,vue)