通信资费管理系统
- 目的是实现通信资费管理系统的静态页面设计，要求能够逐步掌握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"> </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">省份   </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"> </td>
</tr>
</table>
<p align = "center">
<input type = "submit" value = "提交">
<input type = "reset" value = "重设">
</p>
</form>
</html>
- 开通账户页面如下：
看完觉得有帮助就顺手点个赞呗 ^_^！！！
出于一些原因，后面代码没有继续实现
参考数据：马军霞、张志峰等编著的《JSP程序设计实训与案例教程》
334
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
