前后台交互——用户列表

在上一次的学习中，我们配置了相关数据库部分的内容，但是，我们不可能每次进行相关操作都要带条件查看数据库，所以，我们应该让前端和后台可以进行一下交互，那么今天我们就使用——用户列表进行交互。

---

主要任务：用户列表界面的创建与测试、相关样式的引用

---

用户列表图大体上这样来布置

（1）创建user.jsp
之前我们是在WEB-INF下建立的jsp文件夹，现在为了使更加方便的访问页面，我们将jsp文件夹移动到上层目录即WebContent下。

关于前台的界面我们需要使用相关的样式，所以，我们可以从Bootstrap中文网(http://www.bootcss.com/)下载。
具体目录布置如下图：

上图相关步骤完成后，我们来写代码啦

①在user.jsp引入jquery、bootstrap：可以在’head’标签内写。

②引入jstl的C标签（展示列表会用到c:foreach）

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>

 

③主界面html代码

	
	

		

			欢迎，赵琦【退出】
		
	
	
	
	

		

			

				

					
					用户管理
				
				

					
					修改密码
				
			
		
		
		

			新增
			
						

				

					

						
id
						
用户名
						
真实姓名
						
删除
						
编辑
					
				
				

					
					
					

							
${row.id }
							
${row.username }
							
${row.realname }
							
删除
							
编辑
						
					
				
			
		
	

基础代码已写好，那么接下来就是写我们的css文件

（2）配置css
在拷贝进来的css目录下新建一个名叫’public.css’的样式文件。
具体配置如下：

@CHARSET "UTF-8";
@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;/* 设置绝对位置 */
	color:#FFFFFF;
	font-weight:bolder;
	font-size:16px;
}

#main{
	background-color:#EFEFEF;
}
#left{
	width:12%;
	height:900px;
	background-color:#F2F2F2;
	float:left;/* 为了让div左右排列 */
	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、top、margin这些样式管用，例如span也不是盒子模型 */
}
#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;
}

（3）测试前后台能否交互

测试是在controller层进行的
在UserController.java中写测试方法：

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

（4）实验结果
上述部分配置完成后，打开数据库，我们运行shop项目，在浏览器的地址栏中输入
http://localhost:8080/shop/user/list.do
运行结果如图：

我们在上次实验中还配置了log4j.properties，所以会在Console中打印如下消息，证明你成功了

OK，基本上可以了，下节课我们会对代码进行优化和补充，下次见~