后台管理中心跳转问题解决

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;width: 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;width: 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";
    }        
}

 

posted @ 2018-12-07 03:06  moonsoft  阅读(421)  评论(0)    收藏  举报