本文是《轻量级 Java Web 框架架构设计》的系列博文。
目前,Smart Framework 的核心代码已基本完成,感谢大家的关注!为了答谢大家,我想倾情奉献一份 CRUD 示例给大家,收到后一定要给我评论哦!
现在就出发,我要做一个产品管理系统!当然只是玩具级别的了,只是为了体验一下要开发一个 CRUD 到底要写多少代码?
第一步,写一个 Entity 类:
public class Product extends BaseEntity {
private long productTypeId;
private String productName;
private String productCode;
private int price;
private String description;
... 省略 getter/setter 方法
}
第二步,写一个 Service 接口:
public interface ProductService {
List<Product> getProductList();
Product getProduct(long productId);
boolean createProduct(Map<String, Object> productFieldMap);
boolean updateProduct(long productId, Map<String, Object> productFieldMap);
boolean deleteProduct(long productId);
}
第三步,为 Service 接口写一个实现类:
@Bean
public class ProductServiceImpl extends BaseService implements ProductService {
@Override
public List<Product> getProductList() {
return DataSet.selectList(Product.class, "");
}
@Override
public Product getProduct(long productId) {
return DataSet.select(Product.class, "id = ?", productId);
}
@Override
@Transaction
public boolean createProduct(Map<String, Object> productFieldMap) {
return DataSet.insert(Product.class, productFieldMap);
}
@Override
@Transaction
public boolean updateProduct(long productId, Map<String, Object> productFieldMap) {
return DataSet.update(Product.class, productFieldMap, "id = ?", productId);
}
@Override
@Transaction
public boolean deleteProduct(long productId) {
return DataSet.delete(Product.class, "id = ?", productId);
}
}
第四步,写一个 Action 类:
@Bean
public class ProductAction extends BaseAction {
@Inject
private ProductService productService;
@Request("get:/products")
public Result getProducts() {
List<Product> productList = productService.getProductList();
return new Result(OK, productList);
}
@Request("get:/product/{id}")
public Result getProductById(long productId) {
if (productId == 0) {
return new Result(ERROR_PARAM);
}
Product product = productService.getProduct(productId);
if (product != null) {
return new Result(OK, product);
} else {
return new Result(ERROR_DATA);
}
}
@Request("post:/product")
public Result createProduct(Map<String, Object> productFieldMap) {
boolean success = productService.createProduct(productFieldMap);
return new Result(OK, success);
}
@Request("put:/product/{id}")
public Result updateProduct(long productId, Map<String, Object> productFieldMap) {
if (productId == 0) {
return new Result(ERROR_PARAM);
}
boolean success = productService.updateProduct(productId, productFieldMap);
return new Result(OK, success);
}
@Request("delete:/product/{id}")
public Result deleteProductById(long productId) {
if (productId == 0) {
return new Result(ERROR_PARAM);
}
boolean success = productService.deleteProduct(productId);
return new Result(OK, success);
}
}
第五步,写一个主页面(HTML 格式),用于显示所有的产品:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Product</title>
<link rel="stylesheet" href="../style/global.css"/>
<script type="text/javascript" src="../lib/jquery/jquery.min.js"></script>
<script type="text/javascript" src="../lib/jquery-form/jquery.form.min.js"></script>
</head>
<body>
<div class="css-panel">
<div class="css-panel-header">
<div class="css-left">
<h3>Product List</h3>
</div>
<div class="css-right">
<a href="product_create.html">New</a>
</div>
</div>
<div class="css-panel-content">
<table id="product_table" class="css-table">
<thead>
<tr>
<td>Product Type</td>
<td>Product Name</td>
<td>Product Code</td>
<td>Price</td>
<td>Description</td>
<td>Action</td>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</div>
<script type="text/javascript">
$(function() {
$.ajax({
url: '/products',
success: function(result) {
if (result.error == 0) {
var html = '';
$.each(result.data, function(i, product) {
html += '<tr data-id="' + product.id + '" data-name="' + product.productName + '">';
html += ' <td>' + product.productTypeId + '</td>';
html += ' <td>' + product.productName + '</td>';
html += ' <td>' + product.productCode + '</td>';
html += ' <td>' + product.price + '</td>';
html += ' <td>' + product.description + '</td>';
html += ' <td>';
html += ' <a href="#" class="ext-product-edit">Edit</a>';
html += ' <a href="#" class="ext-product-delete">Delete</a>';
html += ' </td>';
html += '</tr>'
});
$('#product_table tbody').html(html);
}
}
});
$(document).on('click', '.ext-product-edit', function() {
var $tr = $(this).closest('tr');
var productId = $tr.data('id');
window.sessionStorage.setItem('product.id', productId);
location.href = 'product_edit.html';
});
$(document).on('click', '.ext-product-delete', function() {
var $tr = $(this).closest('tr');
var productId = $tr.data('id');
var productName = $tr.data('name');
if (confirm('Do you want to delete product [' + productName + ']?')) {
$.ajax({
url: '/product/' + productId,
type: 'delete',
success: function(result) {
if (result.error == 0) {
$tr.remove();
}
}
});
window.sessionStorage.removeItem('product.id');
}
return false;
});
window.sessionStorage.removeItem('product.id');
});
</script>
</body>
</html>
代码全部完成,现在启动您的 Tomcat,看看效果吧!
进入产品主页面(product.html):
用类似的方式,完成产品创建页面(product_create.html):
最后完成产品编辑页面(product_edit.html):
仅需以上五个步骤就可以完成一个简单的 CRUD 示例。
还能再 Smart 一点呢?请大家给点建议吧!