windows环境下如何将html部署在Nginx

转载

码海探险先锋 2024-10-30 07:48:49

文章标签 bootstrap css html 文章分类 运维

上一章节，我们将数据库与我们的框架进行了连接，但是这样子的程序会让用户很难去使用，所以本章将介绍html页面的搭建并将其与后台相连接。

1.新建user.jsp、在WebContent中放入bootstrap的文件
2.在user.jsp引入jquery、bootstrap
jquery能够实现动态的html页面，而bootstrap能够使我们的html页面更加的美观。
jQuery可在英文官网上下载，Bootstrap可在中文网下载。其对应的菜鸟教程也有相应的代码写法。
jQuery英文官网下载 jQuery菜鸟教程 Bootstrap中文网 Bootstrap菜鸟教程

<link href="${pageContext.request.contextPath }/css/bootstrap.min.css" type="text/css" rel="stylesheet" />
<link href="${pageContext.request.contextPath }/css/bootstrap-theme.min.css" type="text/css" rel="stylesheet" />
<script src="${pageContext.request.contextPath }/js/jquery.min.js" type="text/javascript"></script>
<script src="${pageContext.request.contextPath }/js/bootstrap.min.js" type="text/javascript"></script>

只有进行引入jQuery和bootstrap我们才能进行相关代码的编写。
3.引入jstl的C标签（展示列表会用到c:foreach）

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<c:set var="ctx" value="${pageContext.request.contextPath}" />

4.完成html代码

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>用户列表</title>
<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>
</head>
<body>
	<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="icon1" src="${ctx }/img/icon01.png">
					<a href="#">用户管理</a>
				</li>
  				<li>
  					<img class="icon1" 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">
						<tr>
							<td>${row.id }</td>
							<td>${row.username }</td>
							<td>${row.realname }</td>
							<td><a href="#" class="btn btn-primary" "deleteUser(${row.id})">删除</a></td>
							<td><a href="#" class="btn btn-primary" "edit(${row.id})">编辑</a></td>
						</tr>
					</c:forEach>
				</tbody>
			</table>
		</div>
	</div>
</body>
</html>

这样我们的html代码就基本上完成了，其中，按钮和表格样式直接引用了bootstrap，剩下的部分，我们自己写一些css样式，当然不想写也可以完全引用bootstrap的样式，bootstrap中文网上提供了几乎我们能用到的所有样式。
5.写css样式

*{
	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;
}

这样我们的html页就都完成了，下面我们进行配置UserController。
6.配置UserController
将之前写过的list.do更改至以下代码。

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

下面我们来测试一下。

/user/list.do

windows环境下如何将html部署在Nginx_html