Vue --- CUD+表单验证

目录

1.后台数据接口准备

2.Dialog弹出框

  2.1 基本结构

3.表单 

  3.1 基本结构

  3.2 表单验证

4. CUD

  4.1 新增

  4.2 添加修改/删除按钮

---

1.后台数据接口准备

   增删改接口：

package dao;

import java.sql.Connection;
import java.sql.ParameterMetaData;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.util.List;

import com.zking.vue.util.DBHelper;
import com.zking.vue.util.PageBean;

public class BaseDao<T> {
	
	/**
	 * 增删改通用
	 * @param sql
	 * @param params
	 */
	public static void executeUpdate(String sql,Object[] params) {
		Connection conn=null;
		PreparedStatement stmt=null;
		try {
			//获取连接
			conn=DBHelper.getConnection();
			//创建执行对象
			stmt=conn.prepareStatement(sql);
			//获取增删改语句的执行参数
			ParameterMetaData metaData = stmt.getParameterMetaData();
			//循环赋值
			for (int i = 0; i < metaData.getParameterCount(); i++) {
				stmt.setObject(i+1, params[i]);
			}
			//执行SQL
			int i=stmt.executeUpdate();
			if(i<1)
				 throw new RuntimeException("执行失败，影响行数为0！");
		} catch (Exception e) {
			e.printStackTrace();
		}finally {
			DBHelper.close(conn, stmt, null);
		}
	}
	
	public static interface CallBack<E>{
		public List<E> forEach(ResultSet rs) throws SQLException;
	}
	
	public List<T> executeQuery(String sql,PageBean pageBean,CallBack<T> callBack){
		//1.第一次查询返回总记录数
		//2.第二次查询返回指定页码数并满足条件的记录集
		
		Connection conn=null;
		PreparedStatement stmt=null;
		ResultSet rs=null;
		try {
			conn=DBHelper.getConnection();
			//判断是否分页
			if(null!=pageBean&&pageBean.isPagination()) {
				//第一次查询返回总记录数
				String countSql=this.getCountSql(sql);
				stmt=conn.prepareStatement(countSql);
				rs=stmt.executeQuery();
				if(rs.next()) {
					Object obj=rs.getObject(1);
					pageBean.setTotal(Integer.parseInt(obj.toString()));
				}
				//第二次查询返回指定页码数并满足条件的分页结果集
				sql=this.getPagerSql(sql, pageBean);
			}
			stmt=conn.prepareStatement(sql);
			rs=stmt.executeQuery();
			//遍历结果集
			return callBack.forEach(rs);
		} catch (Exception e) {
			e.printStackTrace();
		}finally {
			DBHelper.close(conn, stmt, rs);
		}
		return null;
	}
	
	/**
	 * 将普通SQL语句转换成查询总记录数的SQL语句
	 * @param sql
	 * @return
	 */
	private String getCountSql(String sql) {
		return "select count(1) from ("+sql+") t1";
	}
	
	/**
	 * 将普通SQL语句转换成查询分页记录集的SQL语句
	 * @param sql
	 * @param pageBean
	 * @return
	 */
	private String getPagerSql(String sql,PageBean pageBean) {
		return sql+" Limit "+pageBean.getStartIndex()+","+pageBean.getRows();
	}
}



package dao;

import java.sql.ResultSet;
import java.sql.SQLException;
import java.util.List;


import com.zking.vue.entity.Book;
import com.zking.vue.util.CommonUtils;
import com.zking.vue.util.PageBean;
import com.zking.vue.util.StringUtils;

public class BookDao extends BaseDao<Book> {
	
	/**
	 * 1.书本新增
	 * @param book
	 */
	public void addBook(Book book) {
		String sql="insert into t_book_vue(bookname,price,booktype) values(?,?,?) ";
		System.out.println(sql);
		super.executeUpdate(sql, new Object[] {
			book.getBookname(),
			book.getPrice(),
			book.getBooktype()
		});
	}
	
	/**
	 * 2.书本删除
	 * @param book
	 */
	public void delBook(Book book) {
		String sql="delete from t_book_vue where id=?";
		System.out.println(sql);
		super.executeUpdate(sql, new Object[] {
			book.getId()
		});
	}
	 
	/**
	 * 3.书本编辑
	 * @param book
	 */
	public void editBook(Book book) {
		String sql="update  t_book_vue set bookname=?,price=?,booktype=? where id=? ";
		System.out.println(sql);
		super.executeUpdate(sql, new Object[] {
			book.getBookname(),
			book.getPrice(),
			book.getBooktype(),
			book.getId()
		});
	}

	public List<Book> queryBookPager(Book book,PageBean pageBean){
		String sql="select id,bookname,price,booktype from t_book_vue where 1=1";
		if(StringUtils.isNotBlank(book.getBookname()))
			sql+=" and bookname like '%"+book.getBookname()+"%'";
		sql+=" order by id desc";
		
		return super.executeQuery(sql, pageBean, new CallBack<Book>() {
			@Override
			public List<Book> forEach(ResultSet rs) throws SQLException {
				return CommonUtils.toList(rs, Book.class);
			}
		});
	} 
}



package action;

import java.io.IOException;
import java.util.HashMap;
import java.util.List;
import java.util.Map;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import com.fasterxml.jackson.databind.ObjectMapper;
import com.zking.mvc.framework.DispatcherAction;
import com.zking.mvc.framework.ModelDriver;
import com.zking.vue.dao.BookDao;
import com.zking.vue.entity.Book;
import com.zking.vue.util.PageBean;

public class BookAction extends DispatcherAction implements ModelDriver<Book> {
	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,IOExcepti