准备工作:项目搭建,库的准备
1.查所有
实体类创建,
表创建,
dao,service → getAll getOne add update delete
getAll→dao:queryRunner运行sql语句查询数据库
service:调用dao层
servlet:接受前端请求,调用service拿到数据并返回前端
写前端页面,首先写tableDiv(展示数据)→ajax异步请求getAll,解析回传数据填入tbody
2.删除
删除按钮绑定删除方法,ajax异步请求后端删除后异步刷新页面
3.新增
新增按钮绑定模态框显示方法 保存后请求后端进行新增
修改
实体类
package entity;
public class Book {
private Integer id;
private String name;
private String money;
public Book() {
}
public Book(Integer id, String name, String money) {
this.id = id;
this.name = name;
this.money = money;
}
public Integer getId() {
return id;
}
public void setId(Integer id) {
this.id = id;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public String getMoney() {
return money;
}
public void setMoney(String money) {
this.money = money;
}
@Override
public String toString() {
return "Book{" +
"id=" + id +
", name='" + name + '\'' +
", money='" + money + '\'' +
'}';
}
}
Dao层
接口
package dao;
import entity.Book;
import java.util.List;
public interface BookDao {
List<Book> getAll();
Book getOne(Integer id);
Integer add(Book book);
Integer delete(Integer id);
Integer update(Book book);
}
实现类
package dao;
import entity.Book;
import org.apache.commons.dbutils.QueryRunner;
import org.apache.commons.dbutils.handlers.BeanListHandler;
import util.DBUtil;
import java.sql.SQLException;
import java.util.List;
public class BookDaoImpl implements BookDao {
QueryRunner runner=new QueryRunner(DBUtil.getDataSource());
@Override
public List<Book> getAll() {
try {
return runner.query("select * from books ",new BeanListHandler<Book>(Book.class));
} catch (SQLException throwables) {
throwables.printStackTrace();
}
return null;
}
@Override
public Integer add(Book book) {
try {
return runner.update("insert into books(id,name,money) values (?,?,?)",book.getId(),
book.getName(),book.getMoney());
} catch (SQLException throwables) {
throwables.printStackTrace();
}
return null;
}
@Override
public Integer delete(Integer id) {
try {
return runner.update("delete from books where id=?",id);
} catch (SQLException throwables) {
throwables.printStackTrace();
}
return null;
}
@Override
public Integer update(Book book) {
try {
return runner.update("update books set name=?,money=? where id=?",
book.getName(),book.getMoney(),book.getId());
} catch (SQLException throwables) {
throwables.printStackTrace();
}
return null;
}
}
service层
接口
package service;
import entity.Book;
import java.util.List;
public interface BookService {
List<Book> getAll();
Integer add(Book book);
Integer delete(Integer id);
Integer update(Book book);
}
实现类
package service;
import dao.BookDao;
import dao.BookDaoImpl;
import entity.Book;
import java.util.List;
public class BookServiceImpl implements BookService {
BookDao bookDao = new BookDaoImpl();
@Override
public List<Book> getAll() {
return bookDao.getAll();
}
@Override
public Integer add(Book book) {
return bookDao.add(book);
}
@Override
public Integer delete(Integer id) {
return bookDao.delete(id);
}
@Override
public Integer update(Book book) {
return bookDao.update(book);
}
}
Controller层
package servlet;
import entity.Book;
import service.BookServiceImpl;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
@WebServlet("/book/add")
public class addServlet extends HttpServlet {
@Override
protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
String name=req.getParameter("name");
String money=req.getParameter("money");
BookServiceImpl bookService=new BookServiceImpl();
Book book=new Book();
book.setName(name);
book.setMoney(money);
Integer Book = bookService.add(book);
resp.getWriter().println(Book);
}
}
package servlet;
import service.BookServiceImpl;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
@WebServlet("/book/delete")
public class deleteServlet extends HttpServlet {
@Override
protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
BookServiceImpl bookService=new BookServiceImpl();
String x=req.getParameter("id");
Integer xx= bookService.delete(Integer.parseInt(x));
resp.getWriter().println(xx);
}
}
package servlet;
import com.alibaba.fastjson.JSON;
import entity.Book;
import service.BookServiceImpl;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.util.List;
@WebServlet("/book/getAll")
public class getAllServlet extends HttpServlet {
@Override
protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
BookServiceImpl bookService=new BookServiceImpl();
List<Book> bookList = bookService.getAll();
String s= JSON.toJSONString(bookList);
resp.getWriter().println(s);
}
}
package servlet;
import entity.Book;
import service.BookServiceImpl;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
@WebServlet("/book/update")
public class updateServlet extends HttpServlet {
@Override
protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
String id = req.getParameter("id");
String name = req.getParameter("name");
String money = req.getParameter("money");
System.out.println(id);
System.out.println(name);
System.out.println(money);
Book book = new Book();
book.setId(Integer.parseInt(id));
book.setName(name);
book.setMoney(money);
BookServiceImpl bookService = new BookServiceImpl();
bookService.update(book);
}
}
工具类
package util;
import com.alibaba.druid.pool.DruidDataSource;
import com.alibaba.druid.pool.DruidDataSourceFactory;
import javax.sql.DataSource;
import java.io.InputStream;
import java.sql.Connection;
import java.sql.SQLException;
import java.util.Properties;
public class DBUtil {//工具类
private static DruidDataSource dataSource;
private static Properties properties = new Properties();
static {
InputStream is = DBUtil.class.getResourceAsStream("/db.properties");
try {
properties.load(is);
dataSource = (DruidDataSource) DruidDataSourceFactory.createDataSource(properties);
} catch (Exception e) {
e.printStackTrace();
}
}
public static Connection getConnection(){
try {
return dataSource.getConnection();
} catch (SQLException throwables) {
throwables.printStackTrace();
}
return null;
}
public static DataSource getDataSource(){
return dataSource;
}
}
模态框 前端页面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="css/bootstrap.min.css" >
<script src="js/jquery-3.4.1.min.js"></script>
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="js/bootstrap.min.js"></script>
<script>
$(function () {
showAll();
})
function del(id) {
$.post("book/delete",{id:id},function (res) {
showAll();
})
}
function showAll() {
$.post("book/getAll",function (res) {
var ss= JSON.parse(res);
var html="";
for (var i=0;i<ss.length;i++) {
html+="<tr>" +
"<td>"+ss[i].id+"</td>"+
"<td>"+ss[i].name+"</td>"+
"<td>"+ss[i].money+"</td>"+
"<td><button onclick='del("+ss[i].id+")'>删除</button><button onclick='update(this)'>修改</button></td>"
"</tr>";
}
$("tbody").html(html);
})
}
function showAdd() {
$("#myModal").modal("show");
}
function add() {
var ad=$("#fm").serialize();
$.ajax({
url:"book/add",
type:"post",
data:ad,
success:function (res) {
$("#myModal").modal("hide");
showAll();
}
});
}
function update(i) {
// $("#myUpdate").modal("show");
// var up=$("#upfm").serialize();
var up=$(i).parent().parent().children();
var id= up.eq(0).text();
var name= up.eq(1).text();
var money= up.eq(2).text();
$("#a1").val(id);
$("#a2").val(name);
$("#a3").val(money);
// $.ajax({
// url:"book/update",
// type:"post",
// data:up,
// success:function (res) {
// $("#myUpdate").modal("hide");
// showAll();
// }
// })
$('#myUpdate').modal('show');
}
function save(){
var data=$("#upfm").serialize();
$.ajax({
url:"book/update",
type:"post",
data:data,
success:function(res){
window.location.reload();
}
})
}
</script>
</head>
<body>
<div>
<table>
<thead>
<tr>
<th>id</th>
<th>书名</th>
<th>价格</th>
<th>操作</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">新增书</h4>
</div>
<div class="modal-body">
<form id="fm">
<div class="form-group">
<label for="idl"></label>
<input type="hidden" class="form-control" id="idl" name="id" placeholder="请输入员工编号">
</div>
<div class="form-group">
<label for="namel">书名</label>
<input type="text" class="form-control" id="namel" name="name" placeholder="请输入书名">
</div>
<div class="form-group">
<label for="agel">价格</label>
<input type="text" class="form-control" id="agel" name="money" placeholder="请输入价格">
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
<button type="button" class="btn btn-primary" onclick="add()">新增</button>
</div>
</div>
</div>
</div>
<!--修改的模态框-->
<div class="modal fade" id="myUpdate" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" >修改书信息</h4>
</div>
<div class="modal-body">
<form id="upfm">
<div class="form-group">
<label for="a1">书号</label>
<input type="text" class="form-control" id="a1" name="id" readonly >
</div>
<div class="form-group">
<label for="a2">书名</label>
<input type="text" class="form-control" id="a2" name="name" >
</div>
<div class="form-group">
<label for="a3">价格</label>
<input type="text" class="form-control" id="a3" name="money" >
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
<button type="button" class="btn btn-primary" onclick="save()">修改</button>
</div>
</div>
</div>
</div>
<button onclick="showAdd()">添加</button>
</body>
</html>