目录

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 {
	
	
	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;
	}
	
	
	private String getCountSql(String sql) {
		return "select count(1) from ("+sql+") t1";
	}
	
	
	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 {
	
	
	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()
		});
	}
	
	
	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()
		});
	}
	 
	
	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 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() {
			@Override
			public List 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 {
	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 books = bookDao.queryBookPager(book, pageBean);
		Map map=new HashMap();
		Map data=new HashMap();
		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;
	}
	
	
	public String addBook(HttpServletRequest req,HttpServletResponse resp)
			throws ServletException,IOException{
		bookDao.addBook(book);
		Map map=new HashMap();
		map.put("success", true);
		map.put("msg", "操作成功！");
		mapper.writeValue(resp.getOutputStream(),map);
		return null;
	}
	
	
	public String editBook(HttpServletRequest req,HttpServletResponse resp)
			throws ServletException,IOException{
		bookDao.editBook(book);
		Map map=new HashMap();
		map.put("success", true);
		map.put("msg", "操作成功！");
		mapper.writeValue(resp.getOutputStream(),map);
		return null;
	}
	
	
	public String delBook(HttpServletRequest req,HttpServletResponse resp)
			throws ServletException,IOException{
		bookDao.delBook(book);
		Map map=new HashMap();
		map.put("success", true);
		map.put("msg", "操作成功！");
		mapper.writeValue(resp.getOutputStream(),map);
		return null;
	}
}

2.Dialog弹出框

  2.1 基本结构

 
   
   
    ...
   
 

  注1：隐藏显示设置，通过Vue实例对象中的dialogFormVisible="true|false"来控制dialog显示隐藏
       :visible.sync="dialogFormVisible"
    
  注2：通过close或closed事件，在关闭dialog弹出框时清空form表单数据和验证信息；
       @close="dialogClose"

3.表单 

  3.1 基本结构

 
     
    
     
     
       
     
     ... 
 

  注1：:label-position设置表单对齐方式
  注2：设置表单元素属性双向绑定的对象属性名称
  
       data: function() {
           return {
               bookForm: {
                   id: null,
                   bookname: null,
                   price: '',
                   booktype: null
               }
           };
       }

  3.2 表单验证

 
     ...
 

  注1：:rules="rules" 表单验证定义，只需要通过 rules 属性传入约定的验证规则
       
       //将el-form-item的prop属性设置为需校验的字段名即可,如下：
       
         
       

       //在Vue实例的data属性中定义表单验证规则，如下：
       rules: {
           bookname: [
                 {required: true,message: '请输入书本名称！',trigger: 'blur'},
                 {min: 3,max: 6,message: '长度必须在3-6个字符之间',trigger: 'blur'}
           ],
           ...
       }

  注2：有多个表单，怎么在提交进行区分？

       我们在rules这里写了对表单的验证规则，但是我们如何在methods里进行指定的表单进行认证，
       所以我们一开始就在el-form里写了 ref="ruleForm"，我们在methods里就可以用

  注3：清空表单验证信息
  
       this.$refs[formName].resetFields();

       补充说明：formName是指中定义的ref属性名

  注4：表单重置时必须先清空表单验证信息，再清空表单数据信息
  
       //通过form表单的ref属性来清空表单验证信息
       this.$refs['bookForm'].resetFields();
       //清空上一次表单的数据信息
       this.bookForm.id = null;
       this.bookForm.bookname = null;
       this.bookForm.price = null;
       this.bookForm.booktype = null;

4. CUD

  4.1 新增

  在事件中设置dialogFormVisible="true"即可打开dialog弹出框

  4.2 添加修改/删除按钮

  在