JSP程序设计实训——通信资费管理系统

通信资费管理系统

目的是实现通信资费管理系统的静态页面设计，要求能够逐步掌握Java Web项目开发的流程和页面的设计。案例分为三部分实现，分为案例需求分析、案例架构分析和案例开发（编程实现）。

一. 案例需求分析

根据业务模型和通信行业的需要，该系统的功能模块需求分析设计如下：
登录和注册模块： 实现用户登录功能及新用户注册功能。
用户管理模块： 实现开通账号、用户账号查询、用户列表功能。其中账号查询可以方便用户的查询，用户可以通过账号查询来获取特定账户的信息。用户列表显示所有用户的基本信息。
资费管理模块： 实现资费的查看、添加、修改和删除等功能。
账单管理模块： 实现查看账单、查看明细、查询账单功能。可以实现查看账单信息（可参考移动、联通、电信的账单管理模块自行设计）、查看账单明细以及查询某个账单等功能。
财务管理模块： 实现月和年账务信息的查询功能以及资费详细清单功能。
管理员管理模块： 实现增加管理员、管理员列表和私人信息功能。增加管理员需要提供的信息有账号、登录密码、真实姓名、管理员邮箱、联系电话、登录权限等。其中登录权限包括用户管理、资费管理、账单管理、财务管理、管理员管理。管理员列表包括的信息有账号、姓名、电话、邮箱、开户日期、权限、修改和删除。私人信息包括登录密码、重复密码、真实姓名、管理员邮箱、开通日期、联系电话、登录权限，其中登录权限有包括资费管理、财务管理和管理员管理。
用户自服务管理模块： 实现用户自助查询个人账单信息的功能，并允许用户修改自己的个人账户信息以及变更相关业务。

二. 案例总体结构与构成

案例使用HTML来完成静态页面设计，经需求分析，本项目的总体功能模块架构设计如下图所示：

三. 案例的开发过程

开始前，讲解下标签对<div></div>的使用方式，转链接：【HTML】什么是 HTML 中的 div 标签

1. 案例的模块划分及其结构

案例命名为CCMS，系统的登录页面（login.html）和注册页面（register.html）在Web文件夹的根目录中。用户管理功能相关的页面在 userManage 文件夹中，该文件夹中的文件用于实现用户管理功能页面的设计。资费管理功能相关的页面在 pricingManage 文件夹中。账单管理功能相关的页面在 reckonManage 文件夹中。财务管理功能相关的页面在 accountManage 文件夹中。管理员管理功能相关的页面在 adminManage 文件夹中。用户自服务功能相关的页面在 userSelf 文件夹中。

配套代码，免费下载

2. 案例的登录和注册功能设计实现

登录页面：
代码如下：

<html><head><title>通信资费管理系统</title><meta http-equiv = "Content-Type" content = "text/html;charset = UTF-8"></head><body background = "picture/login.jpg"><br><br><br><br><br><br><br><br><form action = "frame/main.html" method = "post"><table border = "2" align = "center" valign = "middle" width = "300"><tr><td width = "34%" height = "50">用户账号：</td><td width = "64%" height = "50"><input type = "text" name = "userName" value = "请输入账号"></td></tr><tr><td width = "34%" height = "50">用户密码：</td><td width = "64%" height = "50"><input type = "password" name = "userPassword" value = "********"></td></tr><tr><td align = "center" width = "34%" height = "50"><input type = "submit" value = "登录"></td><td align = "center" width = "34%" height = "50"><input type = "reset" value = "清除"></td></tr><tr><td colspan = "2" align = "center" bgcolor = "#95BDFF" height = "50">通信改变生活！</td></tr><tr><td colspan = "2" align = "center" bgcolor = "#95BDFF" height = "50"><a href = "register.html">注册</a></td></tr></table></form></body>
</html>

网页页面如下：

注册页面：
代码如下：

<html><head><title>通信资费管理系统注册页面</title><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"></head><body bgcolor = "CCCFFF"><form action = "login.html" method = "post"><br><br><br><br><br><br><table border = "2" align = "center" valign = "middle" width = "350"><tr><td colspan = "2"><h3 align = "center">请注册</h3></td></tr><tr><td width = "29%" align = "right">用户名：</td><td width = "69%"><input type = "text" name = "userName"></td></tr><tr><td width = "29%" align = "right">密码：</td><td width = "69%"><input type = "password" name = "userPassword" size = "22"/></td></tr><tr><td width = "29%" align = "right">确认密码：</td><td width = "69%"><input type = "password" name = "userPassword1"></td></tr><tr><td width = "29%" align = "right">个人爱好：</td><td width = "69%"><input type = "checkbox" name = "checkbox1"/>篮球<input type = "checkbox" name = "checkbox2"/>足球<input type = "checkbox" name = "checkbox3"/>排球</td></tr><tr><td width = "29%" align = "right">职业：</td><td width = "69%"><select name = "select" size = "1"><option value = "Java">Java工程师</option><option value = "公务员">公务员</option><option value = "学生">学生</option><option value = "其他">其他</option></select></td></tr><tr><td width = "29%" align = "right">性别：</td><td width = "69%"><input type = "radio" name = "radiobutton"/>男<input type = "radio" name = "radiobutton"/>女</td></tr><tr><td width = "29%" align = "right">电子邮箱：</td><td width = "69%"><input type = "text" name = "email"/></td></tr><tr><td width = "29%" align = "right">出生年月：</td><td width = "69%"><select name = "select1" size = "1"><option value = "1970">1970</option><option value = "1971">1971</option><option value = "1972">1972</option><option value = "1973">1973</option><option value = "1974">1974</option><option value = "1975">1975</option><option value = "1976">1976</option><option value = "1977">1977</option><option value = "1978">1978</option><option value = "1979">1979</option><option value = "1980">1980</option><option value = "1981">1981</option><option value = "1982">1982</option><option value = "1983">1983</option><option value = "1984">1984</option><option value = "1985">1985</option><option value = "1986">1986</option><option value = "1987">1987</option><option value = "1988">1988</option><option value = "1989">1989</option><option value = "1990">1990</option><option value = "1991">1991</option><option value = "1992">1992</option><option value = "1993">1993</option><option value = "1994">1994</option><option value = "1995">1995</option><option value = "1996">1996</option><option value = "1997">1997</option><option value = "1998">1998</option><option value = "1999">1999</option><option value = "2000">2000</option><option value = "2001">2001</option><option value = "2002">2002</option><option value = "2003">2003</option><option value = "2004">2004</option><option value = "2005">2005</option><option value = "2006">2006</option><option value = "2007">2007</option><option value = "2008">2008</option></select>年<select name = "select2" size = "1"><option value = "1">1</option><option value = "2">2</option><option value = "3">3</option><option value = "4">4</option><option value = "5">5</option><option value = "6">6</option><option value = "7">7</option><option value = "8">8</option><option value = "9">9</option><option value = "10">10</option><option value = "11">11</option><option value = "12">12</option></select>月<select value = "select3" size = "1"><option value = "1">1</option><option value = "2">2</option><option value = "3">3</option><option value = "4">4</option><option value = "5">5</option><option value = "6">6</option><option value = "7">7</option><option value = "8">8</option><option value = "9">9</option><option value = "10">10</option><option value = "11">11</option><option value = "12">12</option><option value = "13">13</option><option value = "14">14</option><option value = "15">15</option><option value = "16">16</option><option value = "17">17</option><option value = "18">18</option><option value = "19">19</option><option value = "20">20</option><option value = "21">21</option><option value = "22">22</option><option value = "23">23</option><option value = "24">24</option><option value = "25">25</option><option value = "26">26</option><option value = "27">27</option><option value = "28">28</option><option value = "29">29</option><option value = "30">30</option><option value = "31">31</option></select>日</td></tr><tr><td width = "29%" align = "right">所在地：</td><td width = "69%"><select name = "select4" size = "1"><option value = "1" selected>北京</option><option value = "2">天津</option><option value = "3">河北</option><option value = "4">上海</option><option value = "5">河南</option><option value = "6">吉林</option><option value = "7">黑龙江</option><option value = "8">内蒙古</option><option value = "9">山东</option><option value = "10">山西</option><option value = "11">陕西</option><option value = "12">甘肃</option><option value = "13">宁夏</option><option value = "14">青海</option><option value = "15">新疆</option><option value = "16">辽宁</option><option value = "17">江苏</option><option value = "18">浙江</option><option value = "19">安徽</option><option value = "20">广东</option><option value = "21">海南</option><option value = "22">广西</option><option value = "23">云南</option><option value = "24">贵州</option><option value = "25">四川</option><option value = "26">重庆</option><option value = "27">西藏</option><option value = "28">香港</option><option value = "29">澳门</option><option value = "30">福建</option><option value = "31">江西</option><option value = "32">湖南</option><option value = "33">湖北</option><option value = "34">台湾</option><option value = "35">其他</option></select>省</td></tr><tr><td width = "50%" align = "center"><input type = "submit" value = "提交"></td><td width = "50%" align = "center"><input type = "reset" value = "重置"></td></tr></table></form></body>
</html>

注册页面如下：

3. 案例的主页面设计与实现

单击登录按钮后进入系统的主页面（main.html）。实现主页面的HTML文件在文件夹frame中，该文件夹中有四个页面文件：main.html、top.html、center.html、bottom.html。其中，main.html 是使用框架设计的，另外3个页面是组成该窗口的子窗口页面，页面所需图片在文件夹picture中。
main.html 代码如下：

<html><head><title>通信资费管理系统</title><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"></head><frameset rows = "110,*"><frame src = "../frame/top.html" name = "top" scrolling = "no"><frameset rows = "50,*"><frame src = "../frame/center.html" name = "center" scrolling = "no"><frame src = "../frame/bottom.html" name = "bottom"></frameset></frameset>
</html>

top.html 代码如下：

<html><head><title></title><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"></head><body style="background-image:url(../picture/top.jpg);background-repeat: repeat-x" ><br><h1 align = "center">欢迎使用通信资费管理系统</h1></body>
</html>

center.html 代码如下：

<html><head><title></title><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"></head><body bgcolor = "#95BDFF"><div align = "center"><table border = "1" width = "95%"><tr><th><a href = "../userManage.html/listUser.html" target = "bottom">用户管理</a></th><th><a href = "../pricingManage.html/listPricing.html" target = "bottom">资费管理</a></th><th><a href = "../reckonManage.html/listerBilling.html" target = "bottom">账单管理</a></th><th><a href = "../accountManage.html/listerAccount.html" target = "bottom">财务管理</a></th><th><a href = "../adminManage.html/listManager.html" target = "bottom">管理员管理</a></th><th><a href = "../userSelf.html/userServer.html" target = "bottom">用户自服务</a></th><th><a href = "../login.html" target = "_parent">退出系统</a></th></tr></table></div></body>
</html>

bottom.html 代码如下：

<html><head><title></title><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"></head><body bgcolor = "CCCFFF"><center><br><br><br><br><br><br><img src = "../picture/bottom.jpg" height = "300" width = "500"><br><br><br><br><br><br><p></p></center></body>
</html>

主页面如下：

4. 案例的用户管理模块设计与实现

实现用户管理页面的文件在文件夹 userManage 中，该文件夹中有两个页面文件：listUser.html 和 open.html，单击主页面的用户管理会跳转到 listUser.html 页面，并在下方的 bottom 子窗口显示。
用户列表 listUser.html 代码如下：

<html><head><title>用户管理</title><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"></head><body bgcolor = "#CCDDEE"><div align = "center"><form action = "" name = "form1" mehod = "post"><table border = "0" width = "91%" align = "center"><tr bgcolor = "#CCDDEE"><td width = "23%" height = "10" align = "center"><a href = "open.html" target = "bottom" >开通账户</a></td><td width = "23%" align = "center">用户列表</td><td width = "54%"><div align = "center"><font color = "#000000">财务账号</font><input type = "text" name = "textfield2" size = "16"><input type  = "submit" value = "查询"></div></td></tr></table></form><form action = "listUser.html" method = "post" name = "userform"><div align = "center"><br><table width = "91%" border = "1" align = "center" cellpadding = "0" cellspacing = "0" bgcolor = "CCDDEE"><tr align = "center"><td width = "55" height = "30"><div align = "center">状态</div></td><td width = "67"><div align = "center">财务账号</div></td><td width = "73"><div align = "center">姓名</div></td><td width = "101"><div align = "center">电话</div></td><td width = "138"><div align = "center">邮箱</div></td><td width = "96"><div align = "center">开户日期</div></td></tr><tr align = "center"><td height = "15">正常</td><td>201300100</td><td>张三</td><td>010-66551100</td><td>zhangsan@163.com</td><td>2013年1月2日</td></tr><tr align = "center"><td height = "15">正常</td><td>202300100</td><td>李四</td><td>010-66591170</td><td>lisi@163.com</td><td>2013年11月22日</td></tr></table></div></form></div></body>
</html>

用户列表界面如下：

开通账户 open.html 代码如下：

<html><head><title>用户管理</title><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"></head><form action = "" name = "form1" method = "post"><table border = "0" width = "91%" align = "center"><tr bgcolor = "#CCDDEE"><td width = "23%" align = "center">开通账户</td><td width = "23%" height = "10" align = "center"><a href = "listUser.html" target = "bottom" >用户列表</a></td><td width = "54%"><div align = "center"><font color = "#000000">财务账号</font><input type = "text" name = "textfield2" size = "16"><input type  = "submit" value = "查询"></div></td></tr></table></form><p align = "left">&nbsp;</p><center><h1>请输入用户的基本信息（带*的必须填写）</h1></center><form action = "listUser.html" method = "post"><table width = "91%" border = "1" bgcolor = "#CCDDEE" align = "center"><tr><td align = "right" width = "20%">财务账号*</td><td align = "left" width = "79%"><input type = "text" name = "loginName">请输入用户的财务账号名称（只允许用英文、数字、下划线、区分大小写）</td></tr><tr><td align = "right" width = "20%">财务密码*</td><td align = "left" width = "79%"><input type = "password" name = "loginPassword">请输入用户的财务账号密码（长度为6~8位）</td></tr><tr><td align = "right" width = "20%">重复密码*</td><td align = "left" width = "79%"><input type = "password" name = "loginPassword2">请重新输入以上密码</td></tr><tr><td align = "right" width = "20%">用户名称*</td><td align = "left" width = "79%"><input type = "text" name = "userName">请输入用户真实姓名</td></tr><tr><td align = "right" width = "20%">性别选项*</td><td align = "left" width = "79%"><input type = "radio" name = "sex" value = "男" checked>男<input type = "radio" name = "sex" value = "女">女</td></tr><tr><td align = "right" width = "20%">付款方式*</td><td><select name = "moneyStyle"><option value = "0">现金支付</option><option value = "1">银行转账</option><option value = "2">邮局付款</option><option value = "3">其他</option></select></td></tr><tr><td align = "right" width = "20%">用户状态*</td><td><input type = "radio" name = "userStatus" value = "1">开通<input type = "radio" name = "userStatus" value = "2">暂停</td></tr><tr><td align = "right">电子邮箱*</td><td><input type = "text" name = "userEmail">请输入正确的电子邮箱信息，以便我们能及时联系你</td></tr><tr><td><p align = "center">以下是选填信息（请尽量填写）</p></td></tr><tr><td align = "right">省份 &nbsp;&nbsp </td><td><select name = "nationality"><option value = "1" selected>北京</option><option value = "2">天津</option><option value = "3">河北</option><option value = "4">上海</option><option value = "5">河南</option><option value = "6">吉林</option><option value = "7">黑龙江</option><option value = "8">内蒙古</option><option value = "9">山东</option><option value = "10">山西</option><option value = "11">陕西</option><option value = "12">甘肃</option><option value = "13">宁夏</option><option value = "14">青海</option><option value = "15">新疆</option><option value = "16">辽宁</option><option value = "17">江苏</option><option value = "18">浙江</option><option value = "19">安徽</option><option value = "20">广东</option><option value = "21">海南</option><option value = "22">广西</option><option value = "23">云南</option><option value = "24">贵州</option><option value = "25">四川</option><option value = "26">重庆</option><option value = "27">西藏</option><option value = "28">香港</option><option value = "29">澳门</option><option value = "30">福建</option><option value = "31">江西</option><option value = "32">湖南</option><option value = "33">湖北</option><option value = "34">台湾</option><option value = "35">其他</option></select></td></tr><tr><td align = "right">职业</td><td><select name = "zy"><option value = "1" checked>Java工程师</option><option value = "2">公务员</option><option value = "3">学生</option><option value = "4">其他</option></select></td></tr><tr><td align = "right">职业</td><td><select name = "zy"><option value = "1" checked>Java工程师</option><option value = "2">公务员</option><option value = "3">学生</option><option value = "4">其他</option></select></td></tr><tr><td align = "right">联系电话</td><td><input type = "text" name = "userPhone">请连续输入用户电话</td></tr><tr><td align = "right">公司</td><td><input type = "text" name = "company">请输入用户所在单位信息</td></tr><tr><td align = "right">公司邮箱</td><td><input type = "text" name = "mailAddress">请输入用户所在单位邮箱号码</td></tr><tr><td align = "right">邮政编码</td><td><input type = "text" name = "postCode">请输入用户邮政编码</td></tr><tr><td></td><td align = "right">&nbsp;&nbsp;&nbsp;&nbsp;</td></tr></table><p align = "center"><input type = "submit" value = "提交">&nbsp;&nbsp;<input type = "reset" value = "重设"></p></form>
</html>

开通账户页面如下：

看完觉得有帮助就顺手点个赞呗 ^_^！！！

出于一些原因，后面代码没有继续实现

参考数据：马军霞、张志峰等编著的《JSP程序设计实训与案例教程》

JSP程序设计实训——通信资费管理系统相关推荐

JSP程序设计实训（一）—— JSP概述
下一篇:JSP程序设计实训--JSP开发平台与Tomcat服务器 JSP概述一.学习目的了解JSP技术的基础理论知识,要求了解JSP的工作原理以及使用JSP开发Web项目的主要方式. 二.Web技 ...
JSP程序设计实训（十一）——JSP与Servlet技术（一）
JSP与Servlet技术一.Servlet 基础知识 Servlet 是 Java Web 应用程序中的组件技术,是运行在服务器端的 Java 应用程序,实现与 JSP 类似的功能.Servlet ...
JSP程序设计实训（十二）——MVC设计模式
MVC 设计模式 MVC(Model-View-Controller)把一个应用的输入.处理.输出流程按照 Model.View.Controller 的方式进行分离,这样一个应用被分成三层:模型层. ...
JSP实习实训管理系统myeclipse开发mysql数据库WEB结构java编程
一.源码特点 JSP 实习实训管理系统是一套完善的web设计系统,对理解JSP java编程开发语言有帮助,系统具有完整的源代码和数据库,系统主要采用B/S模式开发. JSP实习实训管理系统my ...
c语言程序设计教程王建feng,C语言程序设计实训指导与习题
本书由"C语言程序设计"上机步骤及运行环境搭建,"C语言程序设计"实训,"C语言程序设计"习题三部分组成.通过实训.习题等内容,着力解决工程 ...
[JSP暑假实训] 四.MyEclipse+Servlet+JSP实现火车票网站查询、修改、删除操作
本系列文章是作者暑假给学生进行实训分享的笔记,主要介绍MyEclipse环境下JSP网站开发,包括JAVA基础.网页布局.数据库基础.Servlet.前端后台数据库交互.DAO等知识. 前一篇文章讲解 ...
c语言程序设计中北大学,《中北大学软件学院2013届C语言程序设计实训题目.doc...
<中北大学软件学院2013届C语言程序设计实训题目 C语言程序课程设计题目 (孟龙)题目1:年历显示功能要求: 输入一个年份,输出是在屏幕上显示该年的日历.假定输入的年份在1940-2040年 ...
中北c语言程序设计,中北大学软件学2013届C语言程序设计实训题目.doc
中北大学软件学2013届C语言程序设计实训题目 C语言程序课程设计题目 (孟龙)题目1:年历显示功能要求: 输入一个年份,输出是在屏幕上显示该年的日历.假定输入的年份在1940-2040年之间. 输 ...
转专业考试c语言试题,C语言程序设计实训题目.doc
C语言程序设计实训题目 C语言程序课程设计题目题目1:年历显示功能要求: 输入一个年份,输出是在屏幕上显示该年的日历.假定输入的年份在1940-2040年之间. 输入年月,输出该月的日历. 输入年 ...

JSP程序设计实训——通信资费管理系统

通信资费管理系统

一. 案例需求分析

二. 案例总体结构与构成

三. 案例的开发过程

JSP程序设计实训——通信资费管理系统相关推荐

最新文章

热门文章