前后台交互搭建

1.把WEB-INF里的jsp拿出到上一级目录   修改springmvc

2.新建user.jsp 写入

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%><!-- 引入jstl自定义的c标签 -->
<!-- 自定义标签的一个用法 设置一个变量格式:<c:set/><c:if/><c:foreach/> -->
 <c:set var="ctx" value="${pageContext.request.contextPath}" /> 
    
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>用户列表</title>
<link href="${ctx }/public.css" type="text/css" rel="stylesheet" />
<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> 

3.在user.jsp下写div样式

<div class="banner"><!-- 上面的那张图片 -->
  <div class="title">
  欢迎，<span id="user">赵**</span><a href="#">退出</a>
  </div>
</div>
<!-- 下面的主体 -->
<div id="main">
 <div id="left">
   <ul>
     <li>
         <img class="icon01" src="${ctx}/img/icon01.png }"/>
         <a href="">用户管理</a>
         </li>
          <img class="icon01" src="${ctx}/img/icon09.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 table-striped">
    <thead>
       <tr><th>id</th><th>用户名</th><th>真实姓名</th><th>删除</th><th>编辑</th></tr>
    </thead>
    <tbody>

<!-- List<User>row.id 这个id是后台传来的User里面的属性名 -->
      <c:forEach items="${users}" var="row"><!--引用标签  EL表达式-->
        <tr>
         <td>${ row.id}</td>
          <td>${row.username}</td>
          <td>${row.realname}</td>
          <td><a href="#" class="btn btn-primary" οnclick="deleteUser(${row.id})">删除</a></td>
          <td><a href="#" class="btn btn-primary" οnclick="edit(${row.id})">编辑</a></td>
          </tr>
          </c:forEach>
    </tbody>
 </table>
 </div>
</div>

4.css下新建public.css文件写样式

@charset "utf-8";
/* CSS Document */
/*基础选择器 id选择器 class选择器 标签选择器*/
/* 适配器选择器 就是应用在html所有标签 所有空白都清空 */
*{
    padding:0px;
    margin:0px;
}

.banner{
    width:100%;
    height:100px;
    background-image:url(../img/bgTitle.png);
    /*background-color:#FF6633;*/
}
.title{
    position: absolute;/*绝对位置 针对标签的位置  fixed 相对浏览器的*/
    top: 60px;
    right: 30px;/*设置绝对位置 可以设置上边top right left bottom*/
    color:#FFFFFF;
    font-weight:bolder;
    font-size:16px;
}

#main{
    background-color:#EFEFEF;
}
#left{
    width:12%;
    height:900px;
    background-color:#F2F2F2;
    float:left;
    border-right: 1px solid #dedede;
    padding-bottom:100px;
}
#left ul{
    list-style:none;
    width:100%;    
}
#left ul li{
    height:70px;
    line-height:70px;
    background-color:#F9F9F9;
    border-bottom: 1px solid #dedede;
    text-align:center;
    position:relative;
}
#left ul li:hover{
    background-color:#FFFFFF;
}
.icon1{
    position: absolute;
    left: 30px;
    top:25px;
    display:block;
}
#left ul li a{
    text-decoration:none;
    color:#666666;
}
#left ul li a:hover{
    color:#FF6633;
}

#right{
    float:left;
    width:86%;
    /*height:1300px;*/
    background-color:#fff;
    padding:10px;
}

#loginDiv{
    height:540px;
    width:300px;
    background-color:#FFFFFF;
    padding:30px;
    position:fixed;
    left: 40%; 
    top: 25%;
    border: 1px solid #CCC;
}

.box{
    position: fixed;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.2);
    display: none;
}

.logTitle{
    height:40px;
    border-bottom:#ffb447 solid 1px;
    font-size:28px;
    margin-bottom:40px;
}
.formInput{
    margin-bottom:20px;
    height:40px;
    width:100%;
}
.formInput img{
    position: absolute;
    padding-top: 12px;
    padding-left: 8px;
}
.formInput input,select{
    font-size:16px;
    width:100%;
    text-indent:5em;
    height:40px;
}

.formInput span{
    color:#999999;
    position: absolute;
    padding-top: 12px;
    padding-left: 8px;
}
.formButton {
    margin-top: 20px;
    border: 0px;
    font-size: 18px;
    width: 100%;
    height: 40px;
    background-color:#ffb447;
    color:#FFFFFF;
}

5.修改UserController.java

    @RequestMapping("/list.do")
    public String list(User user,Model model){
        //跳转user.jsp页面
        List<User> users = userService.list(user);
        //也可以用返回值类型是ModelAndView这个里面可带返回的页面 返回的数据
        model.addAttribute("users",user);
        return "user";
    }

 

 

转载于:https://my.oschina.net/u/4092026/blog/3028149