JavaWeb项目开发（一）：前端原型实现

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

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

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

个人中心我的资料成员信息行政部设计部技术部产品信息功能介绍运营事件成效收获系统管理用户管理部门管理角色管理

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

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

这块布局中，我使用了內联框架，在网页的

板块中嵌套进另一个网页，接下来会对这个嵌入的网页main.html的实现进行介绍。

版块的html布局相当简单，这里就不作说明，下面是

版块CSS样式的具体实现。

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

该页面通过

我的资料

来实现跳转到myinfo.html页面，页面，展示了用户的用户名、密码、性别、所在部门以及联系电话等信息，可供用户修改和查看。myinfo.html页面具体实现如下：


		
			
				我的资料
			
		
		
			
				
					用户详细资料
					用户名:
					密  码:
					确认密码:
					性  别:
						男
						女
					
					部  门:
						
					
					联系电话：

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

这里input.css里面的内容需要自己编写哟！

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

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

该页面布局框如下：


		
			
				用户管理

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

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

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

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

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


			
				
					添加用户信息
					用户名：
					密  码：
					确认密码：
					性  别：
						男
						女
					
					部门：
						
					
					联系电话：

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

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

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

JavaWeb项目开发（一）：前端原型实现

你可能感兴趣的:(JavaWeb)