1、管理中心框架页
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>后台管理</title>
<link rel="stylesheet" href="css/bootstrap.min.css" />
<link rel="stylesheet" href="css/bootstrap-theme.min.css" />
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</head>
<body>
<header class="row" style="padding: 20px 30px;background-color:#245580;">
<div class="col-xs-7">
<h1 style="color: #FFFFFF;">XXX网
<small>后台管理</small>
</h1>
</div>
<div class="col-xs-3">
<div class="text-right" style="margin-top: 40px;color: #FFFFFF;">
<p>管理员</p>
</div>
</div>
<div class="col-xs-2">
<div style="margin-top: 40px;">
<a>退出</a>
</div>
</div>
</header>
<div style="background-color: #999999; 100%;height: 1px;margin: 10px 0px;"></div>
<div class="row">
<aside class="col-xs-3" >
<ul class="list-group">
<li class="list-group-item" >
<button type="button" class="btn btn-primary btn-block btn-lg" data-toggle="collapse" data-target="#shangpin">
商品管理
</button>
<div id="shangpin" class="collapse" >
<div class="btn-group-vertical btn-block" >
<button type="button" onclick="$('#content').load('toAnniu01');" class="btn btn-primary btn-block" style="margin-top: 6px;border-bottom:#5BC0DE 2px solid;">按钮 1</button>
<button type="button" onclick="$('#content').load('toAnniu02');" class="btn btn-primary btn-block" style="margin-top: 6px;border-bottom:#5BC0DE 2px solid;">按钮 2</button>
</div>
</div>
</li>
<li class="list-group-item" >
<button type="button" class="btn btn-primary btn-block btn-lg" data-toggle="collapse" data-target="#leibie">
类别管理
</button>
<div id="leibie" class="collapse" >
<div class="btn-group-vertical btn-block" >
<button type="button" onclick="$('#content').load('toAddCategory');" class="btn btn-primary btn-block" style="margin-top: 6px;border-bottom:#5BC0DE 2px solid;">新增分类</button>
<button type="button" onclick="$('#content').load('toListCategory');" class="btn btn-primary btn-block" style="margin-top: 6px;border-bottom:#5BC0DE 2px solid;">分类列表</button>
</div>
</div>
</li>
<li class="list-group-item" >
<button type="button" class="btn btn-primary btn-block btn-lg" data-toggle="collapse" data-target="#cangku">
仓库管理
</button>
<div id="cangku" class="collapse" >
<div class="btn-group-vertical btn-block" >
<button type="button" class="btn btn-primary btn-block" style="margin-top: 6px;border-bottom:#5BC0DE 2px solid;">按钮 1</button>
<button type="button" class="btn btn-primary btn-block" style="margin-top: 6px;border-bottom:#5BC0DE 2px solid;">按钮 2</button>
</div>
</div>
</li>
<li class="list-group-item" >
<button type="button" class="btn btn-primary btn-block btn-lg" data-toggle="collapse" data-target="#tongji">
查询统计
</button>
<div id="tongji" class="collapse" >
<div class="btn-group-vertical btn-block" >
<button type="button" class="btn btn-primary btn-block" style="margin-top: 6px;border-bottom:#5BC0DE 2px solid;">按钮 1</button>
<button type="button" class="btn btn-primary btn-block" style="margin-top: 6px;border-bottom:#5BC0DE 2px solid;">按钮 2</button>
</div>
</div>
</li>
<li class="list-group-item" >
<button type="button" class="btn btn-primary btn-block btn-lg" data-toggle="collapse" data-target="#xitong">
系统管理
</button>
<div id="xitong" class="collapse" >
<div class="btn-group-vertical btn-block" >
<button type="button" class="btn btn-primary btn-block" style="margin-top: 6px;border-bottom:#5BC0DE 2px solid;">按钮 1</button>
<button type="button" class="btn btn-primary btn-block" style="margin-top: 6px;border-bottom:#5BC0DE 2px solid;">按钮 2</button>
</div>
</div>
</li>
</ul>
<img src="images/logo.png" class="img-responsive" alt="Cinque Terre">
</aside>
<article class="col-xs-8 panel panel-default">
<div id="content" class="panel-body">
</div>
</article>
</div>
<div style="background-color: #999999; 100%;height: 1px;"></div>
<footer class="container">
<div class="row">
<div class="col-md-12" style="padding: 20px;">
<h4 class="text-muted">Copyright © XXXX有限公司</h4>
</div>
</div>
</footer>
</body>
</html>
2、框架内页
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <h3>新增分类</h3> <form id="listForm" class="form-horizontal" action="javascript:addCategory()" method="post" role="form"> <div class="form-group"> <div class="input-group "> <span class="input-group-addon">分类名称</span> <input type="text" class="form-control" id="XX" name="cat_name" value="${category.cat_name}" placeholder="输入类别名称" required> </div> </div> <div class="form-group"> <div class="input-group"> <span class="input-group-addon">分类描述</span> <textarea class="form-control" rows="3" name="cat_desc" required>${category.cat_desc}</textarea> </div> </div> <button type="submit" class="btn btn-default">提交</button> <font size="4" color="red" style="margin-right: 30px">${message}</font> </form> <script> function addCategory() { $.ajax({ url : "addCategory", type : "post", data : $('#listForm').serialize(), success : function(result) { $("#content").empty(); $("#content").html(result); } }); } </script>
3、后台java代码SpringMVC
/** * 商品分类控制器 */ @Controller public class CategoryController { // 注入categoryMapper接口 @Autowired private CategoryMapper categoryMapper; // 跳转到 新增分类 页面 @RequestMapping("toAddCategory") public String toAddCategory() { return "admin/add_cat"; } @RequestMapping("addCategory") public String addCategory(Category category, Model model) { categoryMapper.addCategory(category); model.addAttribute("category", category); model.addAttribute("message", "新增成功！"); return "admin/add_cat"; } }