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 {
	
	/**
	 * 增删改通用
	 * @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{
		public List forEach(ResultSet rs) throws SQLException;
	}
	
	public List executeQuery(String sql,PageBean pageBean,CallBack 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 {
	
	/**
	 * 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