企业实训第十五节-CSDN博客

package com.zq.model;

public class User { private Integer id;//主键 private String username;//用户名 private String pwd;//密码

public User() {
	super();
}
public User(Integer id, String username, String pwd) {
	super();
	this.id = id;
	this.username = username;
	this.pwd = pwd;
}

public Integer getId() {
	return id;
}
public void setId(Integer id) {
	this.id = id;
}
public String getUsername() {
	return username;
}
public void setUsername(String username) {
	this.username = username;
}
public String getPwd() {
	return pwd;
}
public void setPwd(String pwd) {
	this.pwd = pwd;
}

}

@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;/ 为了让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{

width:300px;
background-color:#FFFFFF;
padding:30px;
position:fixed;
right: 20%; 
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; }

<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%> <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

<!DOCTYPE html>

<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>用户列表</title> <link href="css/bootstrap.min.css" type="text/css" rel="stylesheet" /> <script src="js/jquery.min.js" type="text/javascript"></script> <script src="js/bootstrap.min.js" type="text/javascript"></script>  <link href="public.css" type="text/css" rel="stylesheet" /> <script type="text/javascript"> function showAddDiv(){ $(".box").show();//显示div //document.getElementById("divId").style.display="block"; }

//保存 function create(){ //alert("新增提交的数据："+$("#saveForm").serialize()); $.post("user", $("#saveForm").serialize(),function(data){//form表单参数可以直接通过这种提交 if(data){ alert("保存成功"); window.location.reload(); }else{ alert("失敗"); } }); }

</script> </head> <body>  <div class="banner"> <div class="title"> 欢迎，<span id="user">赵琦</span><a href="#">退出</a> </div> </div>

<!-- 下面主体部分 -->
<div id="main">
	<div id="left">
		<ul><!-- http://localhost:8088/shop/menu/list.do -->
			<li>
				<img class="icon1" src="img/icon01.png" />
				<a href="user?action=list">用户管理</a>
			</li>
			<li>
				<img class="icon1" src="img/icon04.png" />
				<a href="grade?action=list">年级管理</a>
			</li>
			<li>
				<img class="icon1" src="img/icon03.png" />
				<a href="class?action=list">班级管理</a>
			</li>
			<li>
				<img class="icon1" src="img/icon02.png" />
				<a href="user?action=toLogin">退出系统</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>
				</tr>
			</thead>
			<tbody>
				<!-- EL表达式-翻课本 -->
				<!-- List<User> row.id 这个id就是后台传来的User里面的属性名  -->
				<c:forEach items="${list }" var="row">
					<tr>
						<td>${row.id }</td>
						<td>${row.username }</td>
						<td>${row.pwd }</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>
</div>

<div class="box">
	<div id="loginDiv" style="right:50% !important;">
		<p class="logTitle">新增</p>
		<div>
			<form id="saveForm">
				<input type="hidden" name="id" id="id" value="0" />
				<input type="hidden" name="action" id="action" value="save" />
				<div class="formInput">
					<img src="img/icon01.png" />
					<input type="text" name="username" id="username"
						placeholder="" />
				</div>
				<div class="formInput">
					<span>密码：</span> <input type="password" name="pwd" id="pwd"
						placeholder="" />
				</div>
				<input class="formButton" style="width:40% !important;" type="button" value="保存"
					onClick="create()" />
				<input class="formButton" style="width:40% !important;" type="button" value="关闭"
					onClick="closeDiv()" />
				<script>
					function closeDiv(){
						$(".box").hide();
					}
				</script>
			</form>
		</div>
	</div>
</div>

</body> </html>

转载于:https://my.oschina.net/u/4090474/blog/3060890