1.vm文件夹下添加 jsp.vm
<%@ page language="java" contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%><!-- 引入jstl自定义的c标签 -->
<!-- 自定义标签的一个用法,设置一个变量 格式:c:setc:if c:foreach -->
<c:set var="ctx" value="#literal()${#end pageContext.request.contextPath}" />
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>用户列表</title>
<link href="#literal()${#end ctx }/css/bootstrap.min.css" type="text/css" rel="stylesheet" />
<link href="#literal()${#end ctx }/css/bootstrap-theme.min.css" type="text/css" rel="stylesheet" />
<script src="#literal()${#end ctx }/js/jquery.min.js" type="text/javascript"></script>
<script src="#literal()${#end ctx }/js/bootstrap.min.js" type="text/javascript"></script>
<script src="#literal()${#end ctx }/js/bootstrap-paginator.min.js"></script>
<%-- <script th:src="#literal()${#end ctx }/js/jquery.pagination.js}"></script> --%>
<!-- 引入自己的css -->
<link href="#literal()${#end ctx }/css/public.css" type="text/css" rel="stylesheet" />
<script type="text/javascript">
function showAddDiv(){
$(".box").show();//显示div
//document.getElementById("divId").style.display="block";
}
function edit(id){
$.ajax({
type:"get",
url:"#literal()${#end ctx}/${modelName}/findById.do",
data:{"id":id},
success:function(data){
#foreach(${e} in ${columnList})
$("#${e,attrName}").val(data.${e,attrName});
#end
$(".box").show();
}
});
}
function deleteUser(id){
if(confirm("您确定要删除吗?")){
$.post("#literal()${#end ctx}/${modelName}/delete.do",{"id":id},
function(data){
if(data){
alert("删除成功");
window.location.reload();
}else{
alert("删除失敗");
}
})
}
}
//保存
function create(){
alert("新增提交的数据:"+$("#saveForm").serialize());
$.post("#literal()${#end ctx}/${modelName}/create.do",
$("#saveForm").serialize(),function(data){//form表单参数可以直接通过这种提交
if(data){
alert("保存成功");
window.location.reload();
}else{
alert("失敗");
}
});
}
</script>
</head>
<body>
<!-- 划分区域 div -->
<div class="banner"><!-- 上面那个图片部分 -->
<div class="title">
欢迎,<span id="user">赵琦</span><a href="#">退出</a>
</div>
</div>
<!-- 下面主体部分 -->
<div id="main">
<div id="left">
<ul>
<c:forEach items="#literal()${#end menuList }" var="row">
<li>
<img class="icon1" src="#literal()${#end ctx }/#literal()${#end row.icon}" />
<a href="#literal()${#end ctx }#literal()${#end row.url}">#literal()${#end row.name }</a>
</li>
</c:forEach>
<%-- <li>
<img class="icon1" src="#literal()${#end ctx }/img/icon02.png" />
<a href="#">修改密码</a>
</li> --%>
</ul>
</div>
<!-- 列表 -->
<div id="right">
<button type="button" class="btn btn-primary" onclick="showAddDiv()">新增</button>
<table class="table table-bordered">
<thead>
<tr>
#foreach(${e} in ${columnList})
<th>${e.columnComment}</th>
#end
<th>删除</th>
<th>编辑</th>
</tr>
</thead>
<tbody>
<!-- EL表达式-翻课本 -->
<!-- List<User> row.id 这个id就是后台传来的User里面的属性名 -->
<c:forEach items="#literal()${#end pageInfo.list }" var="row">
<tr>
#foreach(${e} in ${columnList})
<td>#literal()${#end row.${attrName} }</td>
#end
<td><a href="#" class="btn btn-primary" onclick="deleteUser(#literal()${#end row.id})">删除</a></td>
<td><a href="#" class="btn btn-primary" onclick="edit(#literal()${#end row.id})">编辑</a></td>
</tr>
</c:forEach>
</tbody>
</table>
<div style="text-align:right;">
<ul id="pageLimit"></ul>
</div>
<script>
$('#pageLimit').bootstrapPaginator({
currentPage: "#literal()${#end pageInfo.pageNum }",//当前的请求页面。
totalPages: "#literal()${#end pageInfo.pages }",//一共多少页。
size:"normal",//应该是页码的大小:默认正常normal small larger
bootstrapMajorVersion: 3,//bootstrap的版本要求。
numberOfPages:"#literal()${#end pageInfo.pageSize }",//一页列出多少数据。
itemTexts: function (type, page, current) {//如下的代码是将页眉显示的中文显示我们自定义的中文。
switch (type) {
case "first": return "首页";
case "prev": return "上一页";
case "next": return "下一页";
case "last": return "末页";
case "page": return page;
}
},
onPageClicked:function(event,originalEvent,type,page){//分页按钮点击事件
// var zhanghao = $("#searchrole").val(); //这是搜索时的参数,根据实际情况加或者不要
var url = '#literal()${#end ctx}/${modelName}/list.do?pageNum=' + page;
//如果查询条件不为空,
//url = url + '&username=' + 'zq';
window.location.href = encodeURI(url);
}
});
</script>
</div>
</div>
<div class="box">
<div id="loginDiv">
<p class="logTitle">新增</p>
<div>
<form id="saveForm">
<input type="hidden" name="id" id="id" value="0" />
#foreach(${e} in ${columnList})
<div class="formInput">
<span>${e.columnComment}:</span>
<input type="text" name="${e.attrName}" id="${e.attrName}" />
</div>
#end
<input class="formButton" type="button" value="保存" onClick="create()" />
</form>
</div>
</div>
</div>
</body>
</html>
2.category.jsp
<%@ page language="java" contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%><!-- 引入jstl自定义的c标签 -->
<!-- 自定义标签的一个用法,设置一个变量 格式:c:setc:if c:foreach -->
<c:set var="ctx" value="${ pageContext.request.contextPath}" />
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>用户列表</title>
<link href="${ ctx }/css/bootstrap.min.css" type="text/css" rel="stylesheet" />
<link href="${ ctx }/css/bootstrap-theme.min.css" type="text/css" rel="stylesheet" />
<script src="${ ctx }/js/jquery.min.js" type="text/javascript"></script>
<script src="${ ctx }/js/bootstrap.min.js" type="text/javascript"></script>
<script src="${ ctx }/js/bootstrap-paginator.min.js"></script>
<!-- 引入自己的css -->
<link href="${ ctx }/css/public.css" type="text/css" rel="stylesheet" />
<script type="text/javascript">
function showAddDiv(){
$(".box").show();//显示div
//document.getElementById("divId").style.display="block";
}
function edit(id){
$.ajax({
type:"get",
url:"${ ctx}/category/findById.do",
data:{"id":id},
success:function(data){
$("#id").val(data.id);
$("#parentId").val(data.parentId);
$("#catName").val(data.catName);
$("#catStatus").val(data.catStatus);
$("#sort").val(data.sort);
$(".box").show();
}
});
}
function deleteUser(id){
if(confirm("您确定要删除吗?")){
$.post("${ ctx}/category/delete.do",{"id":id},
function(data){
if(data){
alert("删除成功");
window.location.reload();
}else{
alert("删除失敗");
}
})
}
}
//保存
function create(){
alert("新增提交的数据:"+$("#saveForm").serialize());
$.post("${ ctx}/category/create.do",
$("#saveForm").serialize(),function(data){//form表单参数可以直接通过这种提交
if(data){
alert("保存成功");
window.location.reload();
}else{
alert("失敗");
}
});
}
</script>
</head>
<body>
<!-- 划分区域 div -->
<div class="banner"><!-- 上面那个图片部分 -->
<div class="title">
欢迎,<span id="user">赵琦</span><a href="#">退出</a>
</div>
</div>
<!-- 下面主体部分 -->
<div id="main">
<div id="left">
<ul>
<c:forEach items="${ menuList }" var="row">
<li>
<img class="icon1" src="${ ctx }/${ row.icon}" />
<a href="${ ctx }${ row.url}">${ row.name }</a>
</li>
</c:forEach>
<%-- <li>
<img class="icon1" src="${ ctx }/img/icon02.png" />
<a href="#">修改密码</a>
</li> --%>
</ul>
</div>
<!-- 列表 -->
<div id="right">
<button type="button" class="btn btn-primary" onclick="showAddDiv()">新增</button>
<table class="table table-bordered">
<thead>
<tr>
<th>ID</th>
<th>所属父类</th>
<th>类别名称</th>
<th>分类状态</th>
<th>排序</th>
<th>删除</th>
<th>编辑</th>
</tr>
</thead>
<tbody>
<!-- EL表达式-翻课本 -->
<!-- List<User> row.id 这个id就是后台传来的User里面的属性名 -->
<c:forEach items="${ pageInfo.list }" var="row">
<tr>
<td>${ row.id }</td>
<td>${ row.parentId }</td>
<td>${ row.catName }</td>
<td>${ row.catStatus }</td>
<td>${ row.sort }</td>
<td><a href="#" class="btn btn-primary" onclick="deleteUser(${ row.id})">删除</a></td>
<td><a href="#" class="btn btn-primary" onclick="edit(${ row.id})">编辑</a></td>
</tr>
</c:forEach>
</tbody>
</table>
<div style="text-align:right;">
<ul id="pageLimit"></ul>
</div>
<script>
$('#pageLimit').bootstrapPaginator({
currentPage: "${ pageInfo.pageNum }",//当前的请求页面。
totalPages: "${ pageInfo.pages }",//一共多少页。
size:"normal",//应该是页码打下 :默认正常noramal small larger
bootstrapMajorVersion: 3,//bootstrap的版本要求。
numberOfPages:"${ pageInfo.pageSize }",//一页列出多少数据。
itemTexts: function (type, page, current) {//如下的代码是将页眉显示的中文显示我们自定义的中文。
switch (type) {
case "first": return "首页";
case "prev": return "上一页";
case "next": return "下一页";
case "last": return "末页";
case "page": return page;
}
},
onPageClicked:function(event,originalEvent,type,page){//分页按钮点击事件
// var zhanghao = $("#searchrole").val(); //这是搜索时的参数,根据实际情况加或者不要
var url = '${ ctx}/category/list.do?pageNum=' + page;
//如果查询条件不为空,
//url = url + '&username=' + 'zq';
window.location.href = encodeURI(url);
}
});
</script>
</div>
</div>
<div class="box">
<div id="loginDiv">
<p class="logTitle">新增</p>
<div>
<form id="saveForm">
<input type="hidden" name="id" id="id" value="0" />
<div class="formInput">
<span>所属父类:</span>
<select name="parentId" id="parentId">
<option value="0">顶级分类</option>
<c:forEach items="${catList}" var="row">
<option value="${row.id}">${row.catName}</option>
</c:forEach>
</select>
<!-- <input type="text" name="parentId" id="parentId" /> -->
</div>
<div class="formInput">
<span>类别名称:</span>
<input type="text" name="catName" id="catName" />
</div>
<div class="formInput">
<span>分类状态:</span>
<select name="catStatus" id="catStatus">
<option value="1">正常</option>
<option value="2">废弃</option>
</select>
</div>
<div class="formInput">
<span>排序:</span>
<input type="text" name="sort" id="sort" />
</div>
<input class="btn2 formButton" type="button" value="保存" onClick="create()" />
<input class="btn2 formButton" type="button" value="关闭" onClick="closeDiv()" />
<script type="text/javascript">
function closeDiv(){
$(".box").hide();
}
</script>
<style type="text/css">
.btn2{
width:40% !important;
margin-left: 10px;
}
</style>
</form>
</div>
</div>
</div>
</body>
</html>
3.更改 codebuilder.java 相应代码
//定义占位符变量,给个值
String modelClass = "CategoryCondition";
String model = "Category";//Menu Controller Menu Service
String modelName = "category";
//生成的代码放置的目录==项目目录
String rootPath = "C:/Users/Administrator/Desktop/shop/";
//变量放到上下文对象里
VelocityContext ctx = new VelocityContext();
ctx.put("modelClass", modelClass);
ctx.put("modelName", modelName);
ctx.put("model", model);
4.数据库 新建category表
5.运行 codebuilder.java 自动生成category相关代码