JavaWeb项目开发(一):前端原型实现

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/NGUever15/article/details/66973819


需要使用的技术:DIV+CSS布局/HTML5+CSS3常用标签样式/Bootstrop样式架构/JQuery js框架

需要完成的内容:登录/首页/我的资料/用户管理页面

1、准备工作

安装Hbuilder并创建一个web项目。(Hbuilder下载链接: https://pan.baidu.com/s/1bpH1YQN 密码: tgs2)

确定开发项目内容,本次讲解以下面的框架为例。


2、实现登录页面(样例图如下)

在Hbuilder中 新建web项目,新建login.html文件,先在<body>中利用div布局界面框架。

<body>
		<div id = "login">
			<form id = "forml" name = "forml" method = "get" action="index.html">
				<dl>
					<dt>才优备团队</dt>  
					<dd><input type="" name="userName" class="input-size" placeholder="请输入账号" autofocus="autofocus"/></dd>
					<dd><input type = "password" name = "password" class=" input-size" placeholder="请输入密码"/></dd>
					<dd></dd>
					<dd><input type="submit" value="登录" class="btn-submit"/></dd>
				</dl>
			</form>
		</div>
	</body>

通过CSS内部样式表来设置页面样式

<!--内部文件样式表-->
		<style>
			body{
				font-family: "微软雅黑";
				font-size: 12px;
				/*background-color: lightblue;*/
				background:url(img/IMG_2387.png); /*背景图片 */

			}
			#login{
				position: relative;
				width: 300px;
				/*边框样式*/
				border: solid 3px #FFFFFF;
				border-radius: 10px;
				/*边界*/
				margin: 200px auto 0px;		
				background-color: rgba(255,255,255,0.5);	 /*半透明效果*/
			}
			#login dl dt{
				font-size: 14px;
				font-weight: bold;
				text-align: center;
				line-height: 50px;	
			}
			#login dl dd{
				margin: 5px 0px;
				text-align: center;
				
			}
			.input-size{
				width: 200px;
				height: 26px;
				padding-left: 5px;/*左部填充*/
				line-height: 26px;
			}
			.btn-submit{
				width: 200px;
				height: 35px;
				line-height: 28px;
				margin-top: 10px;
				background-color:#199099 ;
				border: 0px;
				color: #FFFFFF;
				cursor: pointer;
			}
			.btn-submit:hover{
				opacity: 0.6;
			}
		</style>

3、实现首页

在index.html中实现首页的布局

框架布局如下:

<body>
		<div id="header"></div>
		<div id="pageBody">
			<div id="sideBar"></div>
			<div id="main"></div>
		</div>
		<div id="footer"></div>
	</body>

pagaBody实现如下

<div id="pageBody">
			<div id="sideBar">
				<ul class="nav nav-pills nav-stacked">
					<li id="01" class="active" onclick="openOrClose(this)"><a href="javascript:void(0);">个人中心</a></li>
					<li parent="01"><a href="admin/myinf/myinfo.html" target="mainFrame">我的资料</a></li>
					<li id="02" class="active" onclick="openOrClose(this)"><a href="javascript:void(0);">成员信息</a></li>
					<li parent="02"><a href="admin/meninfo/P.html" target="mainFrame">行政部</a></li>
					<li parent="02"><a href="admin/meninfo/D.html" target="mainFrame">设计部</a></li>
					<li parent="02"><a href="admin/meninfo/T.html" target="mainFrame">技术部</a></li>
					<li id="03" class="active" onclick="openOrClose(this)"><a href="javascript:void(0);">产品信息</a></li>
					<li parent="03"><a href="admin/proinfo/function.html" target="mainFrame">功能介绍</a></li>
					<li parent="03"><a href="admin/proinfo/event.html" target="mainFrame">运营事件</a></li>
					<li parent="03"><a href="admin/proinfo/gain.html" target="mainFrame">成效收获</a></li>
					<li id="04" class="active" onclick="openOrClose(this)"><a href="javascript:void(0);">系统管理</a></li>
					<li parent="04"><a href="admin/system/Usermanage.html" target="mainFrame">用户管理</a></li>
					<li parent="04"><a href="admin/proinfo/event.html" target="mainFrame">部门管理</a></li>
					<li parent="04"><a href="admin/proinfo/gain.html" target="mainFrame">角色管理</a></li>
				</ul>
			</div>
			<div id="main">
				<!-- 内联框架,网页中嵌套另外一个网页 -->
				<iframe id="mainFrame" name="mainFrame" src="main.html" width="100%" height="100%" frameborder="0"></iframe>
			</div>
		</div>


<pageBody>的页面样式采取了引入外部CSS样式文件和内部样式表相互结合的形式,引入的样式文件为bootstrap.min.css,具体实现如下:

<!-- 引入外部的CSS样式文件 -->
		<link rel="stylesheet" href="css/dist/css/bootstrap.min.css"/>
		<style>
		    body {
		    	font-family: "微软雅黑";
		    	font-size: 12px;
		    }
			#header {
				position: fixed;
				width: 100%;
				height: 50px;
				top: 0px;
				left: 0px;
				z-index: 5;
				background:url(img/IMG_2387.png);
				
			}
			#pageBody {
				position: fixed; /* 固定定位,相对于浏览器窗口定位 */
				top: 0px;
				right: 0%;
				bottom: 0px;
				left: 0%;
				background-color:#FFFFFF;
				
			}
			#pageBody #sideBar {
				position: absolute; /* 绝对定位,相对于父级容器定位 */
				width: 16%;
				height: 100%;
				top: 0px;
				left: 0px;
				padding-top: 50px;
				background-color:floralwhite;
			}
			#sideBar ul {
				position: relative;
				margin: 5px 0px 0px 10px; /*上右下左*/
				width: 180px;
				background-color: #FFF;
			}
			#sideBar ul li {
				text-align: center;
			}
			#pageBody #main {
				position: absolute;
				width: 84%;
				height: 100%;
				top: 0px;
				right: 0px;
				background-color:#A6E1EC;
				padding-top: 50px;
			}
			#footer {
				position: fixed;
				width: 100%;
				height: 20px;
				bottom: 0px;
				left: 0px;
				z-index: 5;
				background-color: lightskyblue
			}
			.close {
				position: absolute;
				width: 40px;
				height: 40px;
				top: 6px;
				right: 16px;
				border-radius: 40px;
				background-color: aliceblue;
				text-align: center;
				line-height: 40px;
				cursor: pointer;
				color: lightcoral;
				font-size: 10px;
			}
			.userInfo {
				position: absolute;
				width: 200px;
				bottom: 16px;
				right: 60px;
				text-align: right;
				color: white;
			}
			.img{
				position: absolute;
				margin:5px 15px ;
				border-radius: 5px;	
			}
			#mainpage{
				position: absolute;
				bottom: 10px;
				margin-left: 80px;
				font-size: 20px;
				color:white;	
			}
		</style>

<pageBody>的实现灵活应用了CQDX-OA办公管理系统的基本技术,并在其基础上,结合才优备团队的特点进行了编码实现,内容包括“个人资料”、“产品信息”、“成员信息”、“系统管理”及其下拉栏中的衍生内容,因为时间的限制问题,此后会主要针对“系统管理”这一块来进行进一步的实现。

在<main>这块布局中,我使用了內联框架,在网页的<main>板块中嵌套进另一个网页,接下来会对这个嵌入的网页main.html的实现进行介绍。

<main>版块的html布局相当简单,这里就不作说明,下面是<main>版块CSS样式的具体实现。

<style type="text/css">
			body{
				background:url(img/QQ20170324-180734.png);
			}
			#title{
				border-radius: 40px;
				color:cornflowerblue;
				font: "微软雅黑";
				text-align: center;
				margin: 10px;
				padding: 5px;
				
			}
			.intr{
				margin: 5px 15px;
				width: 80%;
				border: solid 2px #87CEFA;
				border-radius: 20px;
				padding: 5px 20px;
				color:#245269;
				
			}
			#bank{
				margin: 10px;
				border:5px;
				padding: 10px;
				background-color:rgba(255,255,255,0.3);
			}
		</style>

4、实现“我的资料”页面


该页面通过<li parent="01"><ahref="admin/myinf/myinfo.html" target="mainFrame">我的资料</a></li>来实现跳转到myinfo.html页面,页面,展示了用户的用户名、密码、性别、所在部门以及联系电话等信息,可供用户修改和查看。myinfo.html页面具体实现如下:

<body>
		<div id="header">
			<ul class="nav nav-tabs">
				<li class="active"><a href="#">我的资料</a></li>
			</ul>
		</div>
		<div id="content">
			<form id="form1" name="form1" method="post" action="">
				<dl>
					<dt>用户详细资料</dt>
					<dd><span>用户名:</span><input type="text" id="userName" name="userName" class="input" value="admin" /></dd>
					<dd><span>密  码:</span><input type="password" id="passwordA" name="passwordA" class="input" value="123456" /></dd>
					<dd><span>确认密码:</span><input type="password" id="passwordB" name="passwordB" class="input" value="123456" /></dd>
					<dd><span>性  别:</span>
						<input type="radio" name="gender" value="男" checked="checked" />男
						<input type="radio" name="gender" value="女" class="input-radio" />女
					</dd>
					<dd><span>部  门:</span>
						<select id="role" name="role" class="input">
							<option value="1">行政部</option>
							<option value="2">设计部</option>
							<option value="3" selected="selected">技术部</option>
						</select>
					</dd>
					<dd><span>联系电话:</span><input type="text" id="telphone" name="telphone" class="input" value="15670564125" /></dd>
					<dd class="btn-groups">
						<input type="submit" value="确 定" class="btn btn-primary btn-sm" />
						<input type="reset" value="取 消" class="btn btn-danger btn-sm" />
					</dd>
				</dl>
			</form>
		</div>
	</body>

页面依旧是采取了引入外部CSS样式文件和内部样式表相互结合的形式,引入的样式文件为bootstrap.min.css和input.css,具体实现如下:

<link rel="stylesheet" href="../../css/dist/css/bootstrap.min.css" />
		<link rel="stylesheet" href="../../css/my/input.css" />
		<style>
			#header {
				position: relative;
				width: 100%;
			}
			#header ul {
				margin-top: 1px;
			}
			#header ul li {
			    margin-left: 10px;
			}
		</style>
这里input.css里面的内容需要自己编写哟!

5、实现“用户管理/列表”页面

在“用户管理”栏目下,显示的第一个页面就是所有用户的例表界面,在该界面中,我们为用户提用该系统所有用户的例表详细信息,包括用户名、性别、所在部门、联系电话等。同时我们允许系统管理员对例表中的用户信息进行修改、删除以及添加用户等操作,同时提供搜索功能方便系统管理员有针对性的查看用户信息。由此以达到系统用户管理的目的。

该页面布局框如下:

<body>
		<div id="header">
			<ul class="nav nav-tabs">
				<li class="active"><a href="#">用户管理</a></li>
			</ul>
		</div>
		<div id="content">
			<div id="search">
				<form id="form1" name="form1" method="post" action="#">
					<input type="text" name="susername" placeholder="请输入用户名" class="input-search" />
					<input type="submit" value="搜 索" class="btn btn-warning btn-sm" />	
				</form>
			</div>
			<div id="datalist">
				<form id="form2" name="form2" method="get" action="">
					<table class="table table-bordered table-hover">
					</table>
				</form>
			</div>
			<div id="btns">
				<input type="button" value="添 加" class="btn btn-primary btn-sm" onclick="add()"  />
				<input type="button" value="修 改" class="btn btn-success btn-sm" onclick="update()" />
				<input type="button" value="删 除" class="btn btn-danger btn-sm" onclick="deleting()" />
				
			</div>
		</div>
	</body>

  在完善页面HTML框架的同时,还通过引入外部CSS文件和JSP文件优化页面样式和实现页面动态效果,具体引入文件如下:

<link rel="stylesheet" href="../../css/dist/css/bootstrap.min.css" />
		<link rel="stylesheet" href="../../css/my/list.css" />
		<script type="text/javascript" src="../../js/jquery-1.8.3.min.js" ></script>

在“用户列表”页面中我们为系统管理员提供了增删查改的功能,除了引入外部文件实现动效以外,我们还做以下内部script描述以更好的响应用户的操作。

<script>
			function checkAll(thisz) {
				//修改复选框的选中状态
				$("input[name=ids]").prop("checked", thisz.checked);
			}
			function add() {
				location.href = "useradd.html";
			}
			function update() {
				//获得选中记录的数量
				var count = $("input[name=ids]:checked").size();
				//判断是否选中一行记录,修改操作只能选中一行记录
				if (count != 1) {
					alert("请选中一条要修改的记录!");
					return;
				}
				//获得表单对象
				var form = $("#form2").get(0);
				//设置提交路径
				form.action = "userview.html";
				//提交表单
				form.submit();
			}
			function deleting() {
				//获得选中记录的数量
				var count = $("input[name=ids]:checked").size();
				//判断是否选中记录,修改操作可以同时选中多行记录
				if (count < 1) {
					alert("请选中要删除的记录!");
					return;
				}
				//选择确定是否要执行删除操作
				if (confirm("您是否要删除选中的记录?")) {
					//获得表单对象
					var form = $("#form2").get(0);
					//设置提交路径
					form.action = "userlist.html";
					//提交表单
					form.submit();
				}
			}
		</script>

在修改和删除中,系统和用户将会涉及到更多的交互以确定系统数据的安全性,提示用户按要求进行界面操作,并在需要的时候弹出提示框向用户确认操作信息。




6、实现“用户管理/添加”页面


系统管理员在用户列表界面点击了“添加”按钮之后,系统将会响应用户操作跳转到添加用户界面,其跳转机制已在列表界面的实现中说明,这里不再做介绍。在添加用户界面中,我们对系统中用户的几个基本属性提示系统管理员输入相应的信息以完成用户的添加。页面的具体实现如下:

<div id="content">
			<form id="form1" name="form1" method="get" action="Usermanage.html">
				<dl>
					<dt>添加用户信息</dt>
					<dd><span>用户名:</span><input type="text" id="userName" name="userName" class="input"/></dd>
					<dd><span>密  码:</span><input type="password" id="passwordA" name="passwordA" class="input" /></dd>
					<dd><span>确认密码:</span><input type="password" id="passwordB" name="passwordB" class="input" /></dd>
					<dd><span>性  别:</span>
						<input type="radio" name="gender" value="男" checked="checked" />男
						<input type="radio" name="gender" value="女" class="input-radio" />女
					</dd>
					<dd><span>部门:</span>
						<select id="role" name="role" class="input">
							<option value="1">行政部</option>
							<option value="2">技术部</option>
							<option value="3">设计部</option>
						</select>
					</dd>
					<dd><span>联系电话:</span><input type="text" id="telphone" name="telphone" class="input" /></dd>
					<dd class="btn-groups">
						<input type="submit" value="确 定" class="btn btn-primary btn-sm" />
						<input type="reset" value="取 消" class="btn btn-danger btn-sm" />
					</dd>
				</dl>
			</form>
		</div>


7、实现“用户管理/修改”页面

和用户添加页面相似,在例表页面选中需要修改的用户对象,如下图:



点击“修改”按键,便可跳转到如图3-7-1所示的用户修改页面。在修改用户信息界面中,我们对系统中用户的几个基本属性提示系统管理员输入相应的信息以完成用户信息的修改。由于用户修改页面和用户添加页面的实现非常相似,这里也就不再做具体的说明了。



没有更多推荐了,返回首页