版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/Coder_Boy_/article/details/82595448
项目名称：中国电信运营支持系统-网络版（三）
开发规范说明：
1. NETCTOSS
NET 网络
C China
T Telecom 电信
O Operation 运营
S Support 支持
S System 系统
中国电信运营支持系统-网络版
2.开发步骤
1)创建项目
2)导包
- javaee tomcat
- jstl jstl
- jdbc ojdbc
- dbcp commons-dbcp
3.Servlet路径规范
1)查询资费: /findCost.do
2)打开增加资费：/toAddCost.do
3)增加保存资费：/addCost.do
4.JSP命名规范
1)查询资费: /WEB-INF/cost/find.jsp
2)增加资费：/WEB-INF/cost/add.jsp
增加资费新增功能页面：
增加资费
案例演示：
工程案例目录结构
find.jsp：
修改部分：
<input type="button" value="增加" class="btn_add" onclick="location.href='toAddCost.do';" />
<%@page pageEncoding="utf-8"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<title>案例-NetCTOSS</title>
<!--
当前:/netctoss/findCost.do
目标：/netctoss/styles/global.css
-->
<link type="text/css" rel="stylesheet" media="all" href="styles/global.css"/>
<link type="text/css" rel="stylesheet" media="all" href="styles/global_color.css"/>
<script language="javascript" type="text/javascript">
//排序按钮的点击事件
function sort(btnObj){
if(btnObj.className=="sort_desc"){
btnObj.className="sort_asc";
}else{
btnObj.className="sort_desc";
}
}
//启用
function startFee(){
var r = window.confirm("确定要启用此资费吗？资费启用后将不能修改和删除。")
document.getElementById("operate_result_info").style.display="block";
}
//删除
function deleteFee(){
var r = window.confirm("确定要删除此资费吗？");
}
</script>
</head>
<body>
<!-- Logo区域开始 -->
<div id="header">
<img src="images/logo.png" alt="logo" class="left" />
<a href="#">[退出]</a>
</div>
<!-- Logo区域结束 -->
<!-- 导航区域开始 -->
<div id="navi">
<ul id="menu">
<li><a href="../index.html" class="index_off"></a></li>
<li><a href="../role/role_list.html" class="role_off"></a></li>
<li><a href="../admin/admin_list.html" class="admin_off"></a></li>
<li><a href="../fee/fee_list.html" class="fee_off"></a></li>
<li><a href="../account/account_list.html" class="account_off"></a></li>
<li><a href="../service/service_list.html" class="service_off"></a></li>
<li><a href="../bill/bill_list.html" class="bill_off"></a></li>
<li><a href="../report/report_list.html" class="report_off"></a></li>
<li><a href="../user/user_info.html" class="information_off"></a></li>
<li><a href="../user/user_modi_pwd.html" class="password_off"></a></li>
</ul>
</div>
<!-- 导航区域结束 -->
<!-- 主要区域开始 -->
<div id="main">
<form action="" method="">
<!-- 排序 -->
<div class="search_add">
<div>
<!-- <input type="button" value="月租" class="sort_asc" onclick="sort(this)"/>
<input type="button" value="基费" class="sort_asc" onclick="sort(this)"/>
<input type="button" value="时长" class="sort_asc" onclick="sort(this)"/> -->
</div>
<!--
当前：/netctoss/findCost.do
目标:/netctoss/toAddCost.do
-->
<input type="button" value="增加" class="btn_add" onclick="location.href='toAddCost.do';" />
</div>
<!-- 启用操作的操作提示 -->
<div id="operate_result_info" class="operate_success">
<img src="images/close.png" alt="" onclick="this.parentNode.style.display='none';"/>
删除成功！
</div>
<!-- 数据区域：用表格展示数据 -->
<div id="data">
<table id="datalist">
<tr>
<th>资费ID</th>
<th class="width100">资费名称</th>
<th>基本时长</th>
<th>基本费用</th>
<th>单位费用</th>
<th>创建时间</th>
<th>开通时间</th>
<th class="width50">状态</th>
<th class="width200"></th>
</tr>
<c:forEach items="${costs }" var="c">
<!-- <tr>
<td>1</td>
<td><a href="fee_detail.html">包 20 小时</a></td>
<td>20 小时</td>
<td>24.5 元</td>
<td>3.00 元</td>
<td>2013/01/01 00:00:00</td>
<td></td>
<td>暂停</td>
<td>
<input type="button" value="启用" class="btn_start" onclick="startFee();"/>
<input type="button" value="修改" class="btn_modify" onclick="location.href='fee_modi.html'"/>
<input type="button" value="删除" class="btn_delete" onclick="deleteFee();"/>
</td>
</tr>
<tr>
<td>2</td>
<td><a href="fee_detail.html">包 40 小时</a></td>
<td>40 小时</td>
<td>40.50 元</td>
<td>3.00 元/小时</td>
<td>2013/01/21 00:00:00</td>
<td>2013/01/23 00:00:00</td>
<td>开通</td>
<td></td>
</tr> -->
<tr>
<td>${c.costId }</td>
<td><a href="fee_detail.html">${c.name }</a></td>
<td>${c.baseDuration } 小时</td>
<td>${c.baseCost } 元</td>
<td>${c.unitCost } 元/小时</td>
<td><fmt:formatDate value="${c.creatime }" pattern="yyyy/MM/dd" /></td>
<td><fmt:formatDate value="${c.startime }" pattern="yyyy/MM/dd" /></td>
<td>
<c:if test="${c.status=='0' }">开通</c:if>
<c:if test="${c.status=='1' }">暂停</c:if>
</td>
<td>
<input type="button" value="启用" class="btn_start" onclick="startFee();"/>
<input type="button" value="修改" class="btn_modify" onclick="location.href='fee_modi.html';"/>
<input type="button" value="删除" class="btn_delete" onclick="deleteFee();"/>
</td>
</tr>
</c:forEach>
</table>
<p>业务说明:<br />
1、创建资费时,状态为暂停，记载创建时间;<br />
2、暂停暂停下，可修改，可删除<br />
3、开通后，记载开通时间，且开通后不能修改、不能再停用、也不能删除<br />
4、业务账号修改资费时，在下月底统一触发，修改其关联的资费ID（此触发动作由程序处理）<br />
</p>
</div>
<!-- 分页 -->
<div id="pages">
<a href="#">上一页</a>
<a href="#" class="current_page">1</a>
<a href="#">2</a>
<a href="#">3</a>
<a href="#">4</a>
<a href="#">5</a>
<a href="#">下一页</a>
</div>
</form>
</div>
<!-- 主要区域结束 -->
<div id="footer">
<p>[源自东北的技术，最牛逼的老师，最真实的企业环境，最实用的实战项目]</p>
<p>版权所有(C)牛逼学院IT培训集团公司</p>
</div>
</body>
</html>MainServlet.java
package web;
import java.io.IOException;
import java.util.List;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import dao.CostDao;
import entity.Cost;
public class MainServlet extends HttpServlet{
@Override
protected void service(HttpServletRequest req,
HttpServletResponse res) throws ServletException, IOException {
String path = req.getServletPath();
if("/findCost.do".equals(path)){
//查询资费
System.out.println(path);
findCost(req,res);
}else if("/toAddCost.do".equals(path)){
//打开增加资费页
toAddCost(req,res);
}else if("/addCost.do".equals(path)){
//增加保存资费
addCost(req,res);
}else{
//错误的路径
throw new RuntimeException("没有这个页面");
}
}
protected void addCost(HttpServletRequest req,
HttpServletResponse res) throws ServletException, IOException {
req.setCharacterEncoding("utf-8");
//1.接收表单数据
String name = req.getParameter("name");
String costType = req.getParameter("costType");
String descr = req.getParameter("descr");
String baseDuration = req.getParameter("baseDuration");
String baseCost = req.getParameter("baseCost");
String unitCost = req.getParameter("unitCost");
//2.保存这些数据
Cost c = new Cost();
c.setName(name);
c.setCostType(costType);
c.setDescr(descr);
if(baseDuration !=null && !baseDuration.equals("")){//
c.setBaseDuration(new Integer(baseDuration));
}
if(baseCost !=null && !baseCost.equals("")){
c.setBaseCost(new Double(baseCost));
}
if(unitCost !=null && !unitCost.equals("")){
c.setUnitCost(new Double(unitCost));
}
CostDao dao = new CostDao();
dao.save(c);
//3.重定向到查询
//当前:/netctoss/addCost.do
//目标：/netctoss/findCost.do
res.sendRedirect("findCost.do");
}
protected void toAddCost(HttpServletRequest req,
HttpServletResponse res) throws ServletException, IOException {
//当前：/netctoss/toAddCost.do
//目标：/netctoss/WEB-INF/cost/add.jsp
req.getRequestDispatcher("WEB-INF/cost/add.jsp").forward(req, res);
}
protected void findCost(HttpServletRequest req,
HttpServletResponse res) throws ServletException, IOException {
//查询资费
CostDao dao = new CostDao();
List<Cost> list = dao.findAll();
//转发到查询页面
req.setAttribute("costs", list);
//当前：/netctoss/findCost.dao
//目标：/netctoss/WEB-INF/cost/find.jsp
System.out.println("into--findCost");
req.getRequestDispatcher("WEB-INF/cost/find.jsp").forward(req, res);
}
}
add.jsp
<%@page pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>案例-NetCTOSS</title>
<link type="text/css" rel="stylesheet" media="all" href="styles/global.css" />
<link type="text/css" rel="stylesheet" media="all" href="styles/global_color.css" />
<script language="javascript" type="text/javascript">
//保存结果的提示
function showResult(){
showResultDiv(true);
window.setTimeout("showResultDiv(false)",3000);
}
function showResultDiv(flag){
var divResult = document.getElementById("save_result_info");
if(flag){
divResult.style.display = "block";
}else{
divResult.style.display = "none";
}
}
//切换资费类型
function feeTypeChange(type){
var inputArray = document.getElementById("main").getElementsByTagName("input");
if(type == 1){
inputArray[4].readOnly = true;
inputArray[4].value = "";
inputArray[4].className += " readonly";
inputArray[5].readOnly = false;
inputArray[5].className = "width100";
inputArray[6].readOnly = false;
inputArray[6].className += " readonly";
inputArray[6].value = "";
}else if(type == 2){
inputArray[4].readOnly = false;
inputArray[4].className = "width100";
inputArray[5].readOnly = false;
inputArray[5].className = "width100";
inputArray[6].readOnly = false;
inputArray[6].className = "width100";
}else if(type == 3){
inputArray[4].readOnly = true;
inputArray[4].value = "";
inputArray[4].className += " readonly";
inputArray[5].readOnly = true;
inputArray[5].className += " readonly";
inputArray[6].readOnly = false;
inputArray[6].className = "width100";
}
}
</script>
</head>
<body>
<!-- Logo区域开始 -->
<div id="header">
<img src="images/logo.png" alt="logo" class="left" />
<a href="#">[退出]</a>
</div>
<!-- Logo区域结束 -->
<!-- 导航区域开始 -->
<div id="navi">
<ul id="menu">
<li><a href="../index.html" class="index_off"></a></li>
<li><a href="../role/role_list.html" class="role_off"></a></li>
<li><a href="../admin/admin_list.html" class="admin_off"></a></li>
<li><a href="../fee/fee_list.html" class="fee_off"></a></li>
<li><a href="../account/account_list.html" class="account_off"></a></li>
<li><a href="../service/service_list.html" class="service_off"></a></li>
<li><a href="../bill/bill_list.html" class="bill_off"></a></li>
<li><a href="../report/report_list.html" class="report_off"></a></li>
<li><a href="../user/user_info.html" class="information_off"></a></li>
<li><a href="../user/user_modi_pwd.html" class="password_off"></a></li>
</ul>
</div>
<!-- 导航区域结束 -->
<!-- 主要区域开始 -->
<div id="main">
<div id="save_result_info" class="save_fail">保存失败，资费名称重复！</div>
<form action="addCost.do" method="post" class="main_form">
<div class="text_info clearfix"><span>资费名称：</span></div>
<div class="input_info">
<input type="text" class="width300" name="name" />
<span class="required">*</span>
<div class="validate_msg_short">50长度的字母、数字、汉字和下划线的组合</div>
</div>
<div class="text_info clearfix"><span>资费类型：</span></div>
<div class="input_info fee_type">
<input type="radio" name="costType" value="1" id="monthly" onclick="feeTypeChange(1);" />
<label for="monthly">包月</label>
<input type="radio" name="costType" value="2" checked="checked" id="package" onclick="feeTypeChange(2);"/>
<label for="package">套餐</label>
<input type="radio" name="costType" value="3" id="timeBased" onclick="feeTypeChange(3);"/>
<label for="timeBased">计时</label>
</div>
<div class="text_info clearfix"><span>基本时长：</span></div>
<div class="input_info">
<input type="text" name="baseDuration" value="" class="width100" />
<span class="info">小时</span>
<span class="required">*</span>
<div class="validate_msg_long">1-600之间的整数</div>
</div>
<div class="text_info clearfix"><span>基本费用：</span></div>
<div class="input_info">
<input type="text" name="baseCost" value="" class="width100"/>
<span class="info">元</span>
<span class="required">*</span>
<div class="validate_msg_long">0-99999.99之间的数值</div>
</div>
<div class="text_info clearfix"><span>单位费用：</span></div>
<div class="input_info">
<input type="text" name="unitCost" value="" class="width100" />
<span class="info">元/小时</span>
<span class="required">*</span>
<div class="validate_msg_long">0-99999.99之间的数值</div>
</div>
<div class="text_info clearfix"><span>资费说明：</span></div>
<div class="input_info_high">
<textarea name="descr" class="width300 height70"></textarea>
<div class="validate_msg_short">100长度的字母、数字、汉字和下划线的组合</div>
</div>
<div class="button_info clearfix">
<input type="submit" value="保存" class="btn_save" />
<input type="button" value="取消" class="btn_save" />
</div>
</form>
</div>
<!-- 主要区域结束 -->
<div id="footer">
<span>[源自东北的技术，最牛逼的老师，最真实的企业环境，最实用的实战项目]</span>
<br />
<span>版权所有(C)牛逼学院IT培训集团公司</span>
</div>
</body>
</html>将netctoss工程部署到Tomcat上，运行Tomcat启动案例工程，
浏览器录入http://localhost:8080/netctoss/findCost.do 即可：如果没有错误，最终页面显示效果应如下图：
