NETCTOSS

　　　NETCTOSS - 中国电信运营支持系统-网络版_V-1.0　　

NETCTOSS:

• C:China
• T:Telecom 电信
• O:Operation 运营
• S:Support 支持
• S:System 系统
• 中国电信运营支持系统-网络版

导入jar包

• javaee:直接导入tomcat内置jar包
• jstl:使用maven搜jstl,结果中选择1.2
• jdbc:使用maven搜ojdbc,结果中选择10.2.0.4.0
• dbcp:使用meven搜commons-dbcp,结果中选择1.4　　

项目目录结构

代码：

dao

package dao;

import java.io.Serializable;
import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;

import entity.Admin;
import util.DBUtil;

public class AdminDao implements Serializable {

    public Admin findByCode(String code) {
        Connection conn = null;
        try {
            conn = DBUtil.getConnection();
            String sql = 
                "select * from admin_info_lhh "
                + "where admin_code=?";
            PreparedStatement ps = 
                conn.prepareStatement(sql);
            ps.setString(1, code);
            ResultSet rs = ps.executeQuery();
            if(rs.next()) {
                Admin a = new Admin();
                a.setAdminId(rs.getInt("admin_id"));
                a.setAdminCode(rs.getString("admin_code"));
                a.setPassword(rs.getString("password"));
                a.setName(rs.getString("name"));
                a.setTelephone(rs.getString("telephone"));
                a.setEmail(rs.getString("email"));
                a.setEnrolldate(rs.getTimestamp("enrolldate"));
                return a;
            }
        } catch (SQLException e) {
            e.printStackTrace();
            throw new RuntimeException(
                "查询管理员失败", e);
        } finally {
            DBUtil.close(conn);
        }
        return null;
    }
    
    public static void main(String[] args) {
        AdminDao dao = new AdminDao();
        Admin a = dao.findByCode("caocao");
        if(a != null) {
            System.out.println(a.getAdminId());
            System.out.println(a.getName());
        }
    }
    
}

package dao;

import java.io.Serializable;
import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.sql.Statement;
import java.util.ArrayList;
import java.util.List;

import entity.Cost;
import util.DBUtil;

public class CostDao implements Serializable {

    public List<Cost> findAll() {
        Connection conn = null;
        try {
            conn = DBUtil.getConnection();
            String sql = 
                "select * from cost_lhh "
                + "order by cost_id";
            Statement smt = conn.createStatement();
            ResultSet rs = smt.executeQuery(sql);
            List<Cost> list = new ArrayList<Cost>();
            while(rs.next()) {
                Cost c = new Cost();
                c.setCostId(rs.getInt("cost_id"));
                c.setName(rs.getString("name"));
                c.setBaseDuration(rs.getInt("base_duration"));
                c.setBaseCost(rs.getDouble("base_cost"));
                c.setUnitCost(rs.getDouble("unit_cost"));
                c.setStatus(rs.getString("status"));
                c.setDescr(rs.getString("descr"));
                c.setCreatime(rs.getTimestamp("creatime"));
                c.setStartime(rs.getTimestamp("startime"));
                c.setCostType(rs.getString("cost_type"));
                list.add(c);
            }
            return list;
        } catch (SQLException e) {
            e.printStackTrace();
            throw new RuntimeException(
                "查询资费失败",e);
        } finally {
            DBUtil.close(conn);
        }
    }
    
    public static void main(String[] args) {
        CostDao dao = new CostDao();
        Cost c = new Cost();
        c.setName("包月");
        //c.setBaseDuration(660);
        c.setBaseCost(1200.0);
        //c.setUnitCost(0.6);
        c.setDescr("包月很爽");
        c.setCostType("1");
        dao.save(c);
    }
    
    public void save(Cost c) {
        Connection conn = null;
        try {
            conn = DBUtil.getConnection();
            String sql = 
                "insert into cost_lhh "
                + "values(cost_seq_lhh.nextval,"
                + "?,?,?,?,'1',?,sysdate,null,?)";
            PreparedStatement ps = 
                conn.prepareStatement(sql);
            ps.setString(1, c.getName());
            //JDBC的方法setInt()/setDouble(),
            //不允许传入null,但当前业务该字段
            //确实可能为null,并且数据库中该字段
            //也允许是null.
            //解决办法:将这样的数据当做对象处理.
            ps.setObject(2, c.getBaseDuration());
            ps.setObject(3, c.getBaseCost());
            ps.setObject(4, c.getUnitCost());
            ps.setString(5, c.getDescr());
            ps.setString(6, c.getCostType());
            ps.executeUpdate();
        } catch (SQLException e) {
            e.printStackTrace();
            throw new RuntimeException(
                "增加资费失败", e);
        } finally {
            DBUtil.close(conn);
        }
    }
    
}

 entity

package entity;

import java.io.Serializable;
import java.sql.Timestamp;

public class Admin implements Serializable {

    private Integer adminId;
    private String adminCode;
    private String password;
    private String name;
    private String telephone;
    private String email;
    private Timestamp enrolldate;
    
    public Integer getAdminId() {
        return adminId;
    }
    public void setAdminId(Integer adminId) {
        this.adminId = adminId;
    }
    public String getAdminCode() {
        return adminCode;
    }
    public void setAdminCode(String adminCode) {
        this.adminCode = adminCode;
    }
    public String getPassword() {
        return password;
    }
    public void setPassword(String password) {
        this.password = password;
    }
    public String getName() {
        return name;
    }
    public void setName(String name) {
        this.name = name;
    }
    public String getTelephone() {
        return telephone;
    }
    public void setTelephone(String telephone) {
        this.telephone = telephone;
    }
    public String getEmail() {
        return email;
    }
    public void setEmail(String email) {
        this.email = email;
    }
    public Timestamp getEnrolldate() {
        return enrolldate;
    }
    public void setEnrolldate(Timestamp enrolldate) {
        this.enrolldate = enrolldate;
    }
    
}

package entity;

import java.io.Serializable;
import java.sql.Timestamp;

public class Cost implements Serializable {
    
    private Integer costId;
    private String name;
    //基本时长
    private Integer baseDuration;
    //基本费用
    private Double baseCost;
    //单位费用
    private Double unitCost;
    //状态:0-开通;1-暂停;
    private String status;
    //描述
    private String descr;
    //创建时间
    private Timestamp creatime;
    //开通时间
    private Timestamp startime;
    //资费类型:1-包月;2-套餐;3-计时;
    private String costType;
    
    public Integer getCostId() {
        return costId;
    }
    public void setCostId(Integer costId) {
        this.costId = costId;
    }
    public String getName() {
        return name;
    }
    public void setName(String name) {
        this.name = name;
    }
    public Integer getBaseDuration() {
        return baseDuration;
    }
    public void setBaseDuration(Integer baseDuration) {
        this.baseDuration = baseDuration;
    }
    public Double getBaseCost() {
        return baseCost;
    }
    public void setBaseCost(Double baseCost) {
        this.baseCost = baseCost;
    }
    public Double getUnitCost() {
        return unitCost;
    }
    public void setUnitCost(Double unitCost) {
        this.unitCost = unitCost;
    }
    public String getStatus() {
        return status;
    }
    public void setStatus(String status) {
        this.status = status;
    }
    public String getDescr() {
        return descr;
    }
    public void setDescr(String descr) {
        this.descr = descr;
    }
    public Timestamp getCreatime() {
        return creatime;
    }
    public void setCreatime(Timestamp creatime) {
        this.creatime = creatime;
    }
    public Timestamp getStartime() {
        return startime;
    }
    public void setStartime(Timestamp startime) {
        this.startime = startime;
    }
    public String getCostType() {
        return costType;
    }
    public void setCostType(String costType) {
        this.costType = costType;
    }

}

util

package util;

import java.io.IOException;
import java.sql.Connection;
import java.sql.SQLException;
import java.util.Properties;

import org.apache.commons.dbcp.BasicDataSource;

/**
 *    1.DBUtil是DBTool的升级版
 *    2.采用了连接池来管理连接
 */
public class DBUtil {
    
    //DBCP连接池提供的实现类
    private static BasicDataSource ds;
    
    static {
        Properties p = new Properties();
        try {
            //1.读取参数
            p.load(DBUtil.class.getClassLoader()
                .getResourceAsStream("db.properties"));
            String driver = p.getProperty("driver");
            String url = p.getProperty("url");
            String user = p.getProperty("user");
            String pwd = p.getProperty("pwd");
            String initSize = p.getProperty("initSize");
            String maxSize = p.getProperty("maxSize");
            //2.创建连接池(1次)
            ds = new BasicDataSource();
            //3.向连接池设置参数
            ds.setDriverClassName(driver);
            ds.setUrl(url);
            ds.setUsername(user);
            ds.setPassword(pwd);
            ds.setInitialSize(new Integer(initSize));
            ds.setMaxActive(new Integer(maxSize));
        } catch (IOException e) {
            //异常的处理原则:
            //1.记录日志(Log4j)
            e.printStackTrace();
            //2.能解决就解决(看开发规范)
            //3.解决不了向上抛给调用者
            //具体抛出哪种类型的异常看开发规范
            throw new RuntimeException(
                "加载配置文件失败", e);
        }
    }
    
    public static Connection getConnection() 
        throws SQLException {
        return ds.getConnection();
    }
    
    /**
     * 1.目前我们使用连接都是连接池创建的
     * 2.连接池重写了连接对象内部的close()
     * 3.目前close()内部的逻辑是归还:
     *      - 清除连接对象内部包含的所有数据
     *      - 将连接对象状态设置为空闲态
     */
    public static void close(Connection conn) {
        if(conn != null) {
            try {
                conn.close();
            } catch (SQLException e) {
                e.printStackTrace();
                throw new RuntimeException(
                    "关闭连接失败", e);
            }
        }
    }

    public static void main(String[] args) 
        throws SQLException {
        Connection conn = 
            DBUtil.getConnection();
        System.out.println(conn);
        DBUtil.close(conn);
    }
    
}

web

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.AdminDao;
import dao.CostDao;
import entity.Admin;
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)) {
            //查询资费
            findCost(req,res);
        } else if("/toAddCost.do".equals(path)) {
            //打开增加资费页面
            toAddCost(req,res);
        } else if("/addCost.do".equals(path)) {
            //增加资费
            addCost(req,res);
        } else if("/toLogin.do".equals(path)) {
            //打开登录页面
            toLogin(req,res);
        } else if("/toIndex.do".equals(path)) {
            //打开主页
            toIndex(req,res);
        } else if("/login.do".equals(path)) {
            //登录检查
            login(req,res);
        } else {
            throw new RuntimeException("查无此页");
        }
    }
    
    protected void login(
        HttpServletRequest req, 
        HttpServletResponse res) 
        throws ServletException, IOException {
        //接收表单数据
        String adminCode = 
            req.getParameter("adminCode");
        String password = 
            req.getParameter("password");
        //检查账号密码
        AdminDao dao = new AdminDao();
        Admin a = dao.findByCode(adminCode);
        if(a == null) {
            //账号错误
            req.setAttribute("error", "账号错误");
            req.getRequestDispatcher(
                "WEB-INF/main/login.jsp")
                .forward(req, res);
        } else if(!a.getPassword().equals(password)) {
            //密码错误
            req.setAttribute("error", "密码错误");
            req.getRequestDispatcher(
                "WEB-INF/main/login.jsp")
                .forward(req, res);
        } else {
            //检查通过
            //重定向到主页
            res.sendRedirect("toIndex.do");
        }
    }
    
    protected void toLogin(
        HttpServletRequest req, 
        HttpServletResponse res) 
        throws ServletException, IOException {
        req.getRequestDispatcher(
            "WEB-INF/main/login.jsp")
            .forward(req, res);
    }
    
    protected void toIndex(
        HttpServletRequest req, 
        HttpServletResponse res) 
        throws ServletException, IOException {
        req.getRequestDispatcher(
            "WEB-INF/main/index.jsp")
            .forward(req, res);
    }    
    
    protected void addCost(
        HttpServletRequest req, 
        HttpServletResponse res) 
        throws ServletException, IOException {
        req.setCharacterEncoding("utf-8");
        //接收表单数据
        String name = req.getParameter("name");
        String baseDuration = 
            req.getParameter("baseDuration");
        String baseCost = 
            req.getParameter("baseCost");
        String unitCost = 
            req.getParameter("unitCost");
        String descr = req.getParameter("descr");
        String costType= req.getParameter("costType");
        //保存这些数据
        Cost c = new Cost();
        c.setName(name);
        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));
        }
        c.setDescr(descr);
        c.setCostType(costType);
        new CostDao().save(c);
        //重定向到查询资费
        //当前:/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.do
        //目标:/netctoss/WEB-INF/cost/find.jsp
        req.getRequestDispatcher(
            "WEB-INF/cost/find.jsp")
            .forward(req, res);
    }
    
}

src/main/resource

# db connection parameters
# key=value
driver=oracle.jdbc.driver.OracleDriver
url=jdbc:oracle:thin:@192.168.201.227:1521:orcl
user=openlab
pwd=open123
# datasource parameters
initSize=1
maxSize=1

src/main/webapp/styles/

/* 全局样式 */
body
{
    background-image: url(../images/body_bg.png);
    background-color: #0063a0;
}

/* 页头部分：header */
#header
{
    background: url(../images/top_bg.png) no-repeat;
}
#header a
{
    color: #fff;
    text-decoration: none;
}

/* 导航部分：navi */
#navi
{
    background: url(../images/navigation.png) repeat-x;
}
.index_on
{
    background: url(../images/index_on.png) no-repeat;
}
.index_off
{
    background: url(../images/index_out.png) no-repeat;
}
.role_on
{
    background: url(../images/role_on.png) no-repeat;
}
.role_off
{
    background: url(../images/role_out.png) no-repeat;
}
.admin_on
{
    background: url(../images/admin_on.png) no-repeat;
}
.admin_off
{
    background: url(../images/admin_out.png) no-repeat;
}
.fee_on
{
    background: url(../images/fee_on.png) no-repeat;
}
.fee_off
{
    background: url(../images/fee_out.png) no-repeat;
}
.account_on
{
    background: url(../images/account_on.png) no-repeat;
}
.account_off
{
    background: url(../images/account_out.png) no-repeat;
}
.service_on
{
    background: url(../images/service_on.png) no-repeat;
}
.service_off
{
    background: url(../images/service_out.png) no-repeat;
}
.bill_on
{
    background: url(../images/bill_on.png) no-repeat;
}
.bill_off
{
    background: url(../images/bill_out.png) no-repeat;
}
.report_on
{
    background: url(../images/report_on.png) no-repeat;
}
.report_off
{
    background: url(../images/report_out.png) no-repeat;
}
.information_on
{
    background: url(../images/information_on.png) no-repeat;
}
.information_off
{
    background: url(../images/information_out.png) no-repeat;
}
.password_on
{
    background: url(../images/password_on.png) no-repeat;
}
.password_off
{
    background: url(../images/password_out.png) no-repeat;
}

/* 正文区域：main */
#main
{
    background: #e8f3f8;
    border:5px solid #8ac1db;
}


/* 正文：表格部分 */
#datalist
{
    background-color:#fff;
}
#datalist td
{
    border: #CCC solid 1px;
}
#datalist tr:hover
{
    background-color:#f7f9fd;
}
#datalist th
{
    background: #fbedce;
    border: #CCC solid 1px;
}

/* 表格中显示详细消息 */
div.detail_info
{
    background-color: #fbf0db;
    border: 1px solid #ff9000;
    color: #000;
}

/* 正文：表单部分（div实现方式） */
span.required
{
    color:Red;
    /*border:1px solid red;*/
}
/*div.validate_msg_long,div.validate_msg_medium,div.validate_msg_short,div.validate_msg_tiny*/
div.error_msg
{
    color:Red;
    background-image:url("../images/wrong.gif") ;
    background-repeat:no-repeat;
    background-position:left center;
    border:1px solid red;
}
p.hide
{
    border-bottom:1px solid red;
}
#divPwds
{
    border-top:1px dotted #a1c7d9;
    border-bottom:1px dotted #a1c7d9;
    background-color:#fafeff;
}
#optionalInfo
{
   background-color:#f4f4f4;
   border:1px solid #b4b4b4;
}

/* 保存操作后的提示消息 */
div.save_success
{
    background-color: #fbf0db;
    border: 1px solid #ff9000;
    color: #af6606;
    background-image: url(../images/ok.png);
    background-repeat: no-repeat;
    background-position:10px center;
}
div.save_fail
{
    background-color: #fbf0db;
    border: 1px solid #ff9000;
    color: #F00;
    background-image: url(../images/fail.png);
    background-repeat: no-repeat;
    background-position:10px center;
}

/* 删除操作后的提示消息 */
div.operate_success
{
    background-color: #fdecec;
    border: 1px solid #f57676;
    color: #af6606;    
    background-image: url(../images/ok.png);
    background-repeat: no-repeat;
    background-position:10px center;
}
div.operate_fail
{
    background-color: #fdecec;
    border: 1px solid #f57676;
    color: #f00;    
    background-image: url(../images/warning.png);
    background-repeat: no-repeat;
    background-position:10px center;
}

/* 正文：分页功能区 */
#pages a
{
    color: #000;
}
#pages a:hover
{
    background: #cddde4;
    border: #97b9c9 solid 1px;
    color: #067db5;
}
#pages a.current_page
{
    background: #FFF;
    border: #89bdd8 solid 1px;
    color: #067db5;
}


/* 页脚部分：footer */
#footer
{
    color: #FFF;
}

/* 表单上的元素：控件 */
input,select
{
    border:1px solid silver;
}
input.readonly,textarea.readonly,span.readonly
{
    background-color:#f6f6f6;
}
input:focus,select:focus
{
    border-left:1px solid gray;
    border-top:1px solid gray;
}
input.btn_search,input.btn_search:hover,input.btn_search:active
{
    background: url(../images/search.png) no-repeat;
    color: #0a97c9;
    border:0;
}
input.btn_search_large,input.btn_search_large:hover,input.btn_search_large:active
{
    background: url(../images/search_large.png) no-repeat;
    color: #0a97c9;
    border:0;
}
input.btn_search:hover,input.btn_search_large:hover
{
    color: #0a97ff;
}
input.btn_add,input.btn_add:hover
{
    background: url(../images/btn_bg.png) no-repeat left top;
    color: #fff;
    border:0;
}
input.btn_modify,input.btn_modify:hover
{
    background: url(../images/modification.png) no-repeat left center;
    color: #000;
    border:0;
}
input.btn_delete,input.btn_delete:hover
{
    background: url(../images/delete.png) no-repeat left center;
    color: #000;
    border:0;
}
input.btn_start,input.btn_start:hover
{
    background: url(../images/start.png) no-repeat left center;
    color: #000;
    border:0;
}
input.btn_pause,input.btn_pause:hover
{
    background: url(../images/pause.png) no-repeat left center;
    color: #000;
    border:0;
}
input.btn_save
{
    background: url(../images/form_btn.png) no-repeat;
    color: #FFF;
    border:0;
}
input.btn_save:hover
{
    background: url(../images/form_btn_on.png) no-repeat;
}
input.sort_asc
{
    background: url(../images/up.png) no-repeat;
    color: #FFF;
}
input.sort_desc
{
    background: url(../images/down.png) no-repeat;
    color: #FFF;
}
input.sort_asc,input.sort_desc,input.sort_asc:hover,input.sort_desc:hover
{
    border:0;
}

/* 主页 */
body.index
{
    background-color: #00629f;
    background-image: url(../images/index_bg.jpg);
    background-position: center top;
    background-repeat: no-repeat;
}

#index_navi
{
    background: url(../images/index_navi_bg.png) repeat-x;
}
/* 登录页面 */
body.login
{
    background-color: #00629f;
    background-image: url(../images/login_bg.jpg);
    background-position: center top;
    background-repeat: no-repeat;
}
div.login_box
{
    background: url(../images/login_box.png) no-repeat;
}
div.login_box table tr td
{
    color: #FFF;
}
/* 错误页面 */
body.error_page
{
    background-color: #00629f;
    background-image: url(../images/error.png);
    background-position: center top;
    background-repeat: no-repeat;
}
body.error_power_page
{
    background-color: #00629f;
    background-image: url(../images/error_power.png);
    background-position: center 40%;
    background-repeat: no-repeat;
}
#error
{
    color: #FFF;
}
#error span,#error a
{
    color:Yellow;
}
#error a:hover
{
    color:#FFF;
}
/* 报表页面 */
#report_main
{
    background-color:#8ac1db; 
}
a.tab_on{
    background:url(../images/tab_on.png) no-repeat;
    color:#006e98;    
}
a.tab_out{
    background:url(../images/tab_out.png) no-repeat;
    color:#fff;    
}

/* 全局样式 */
body, p, div, ul, ol, li, dl, dd, dt, h1, h2, h3, h4, h5, h6, form, input, select, label, table, tr, td, th, thead, tbody, tfoot
{
    margin: 0px auto;
    padding: 0px;
    border: 0;
}
ul, ol
{
    list-style: none;
}
body
{
    font-size: 12px;
    font-family: Tahoma,Geneva,sans-serif;
    background-position: top;
    background-repeat: repeat-x;
}
table
{
    border-collapse: collapse;
    border-spacing: 0px;
    width: 910px;
    border: 0px;
    text-align: left;
}
a
{
    text-decoration: none;
}
input, select
{
    height: 30px;
    line-height: 27px;
    padding-left: 3px;
}
textarea
{
    font-size: 12px;
    font-family: Tahoma,Geneva,sans-serif;
}
.width50
{
    width: 50px;
}
.width70
{
    width: 70px;
}
.width80
{
    width: 90px;
}
.width100
{
    width: 100px;
}
.width110
{
    width:110px;
}
.width150
{
    width: 150px;
}
.width180
{
    width: 180px;
}
.width200
{
    width: 200px;
}
.width300
{
    width: 300px;
}
.width350
{
    width: 350px;
}
.width400
{
    width: 400px;
}
.width600
{
    width: 600px;
}
.height70
{
    height: 70px;
}
.hide
{
    display: none;
}
.show
{
    display: block;
}

/*清除浮动*/
.clearfix
{
    clear: both;
}

/*浮动对象*/
.left
{
    float: left;
    display: inline;
}
.right
{
    float: right;
    display: inline;
}
/*布局*/
#header, #menu, #footer
{
    width: 960px;
    margin: 0px auto;
}

/*页头部分：header*/
#header
{
    text-align: right;
    height: 61px;
}
#header a
{
    margin-right: 50px;
    line-height: 61px;
    font-weight: bold;
}

/*导航部分：navi*/
#navi
{
    width: 100%;
    height: 91px;
    overflow: hidden;
}
#menu
{
    overflow: hidden;
    margin-top: 3px;
}
#navi li
{
    float: left;
    padding: 0 14px;
}
#navi a
{
    display: block;
    width: 68px;
    height: 77px;
    overflow: hidden;
    float: left;
}

/*正文区域：main*/
#main
{
    min-height: 410px;
    width: 950px;
    padding: 5px;
    margin-top: 5px;
    max-height: 450px;
    overflow-x: hidden;
    overflow-y: auto;
    position: relative;
}
form.main_form
{
    width: 800px;
    margin: 15px auto;
}


/*正文：查询条件部分*/
div.search_add
{
    width: 910px;
    height: 30px;
    text-align: right;
    margin-top: 3px;
}
div.search_add div
{
    float: left;
    margin-right: 18px;
    line-height: 23px;
}
div.search_add span
{
    margin-left: 5px;
}

/*正文：数据表格部分*/
#data
{
    min-height: 330px;
}
#datalist
{
    margin-top: 5px;
    text-align: center;
    width:100%;
}
#datalist td
{
    height: 32px;
    line-height: 32px;
}
#datalist th
{
    font-weight: bold;
    text-align: center;
    height: 35px;
    line-height: 35px;
}
td.td_modi,th.td_modi
{
    width: 130px;
    text-align: center;
}
th.th_select_all
{
    width: 70px;
}
#datalist th input
{
    height: 35px;
    line-height: 35px;
    float: left;
    margin-left: 8px;
    border-width: 0px;
}
#datalist th span
{
    display: block;
    height: 35px;
    line-height: 35px;
    float: left;
    margin-left: 5px;
}
#datalist tr input
{
    border-width: 0px;
}

/* 表格中的显示详细 */
a.summary
{
    cursor: default;
    color: gray;
    font-weight: bold;
    display: block;
    width: 100%;
    line-height: 100%;
}
div.detail_info
{
    position: absolute;
    z-index: 1000;
    min-width: 150px;
    min-height: 40px;
    display: none;
    padding: 3px;
    overflow: visible;
    text-align: left;
}

/* 正文：表单部分（div实现方式） */
div.text_info
{
    width: 200px;
    text-align: right;
    float: left;
    height: 40px;
    margin-top: 5px;/*5*/
    /*border:1px solid black;*/
    margin-bottom:5px;
}
div.text_info span
{
    display: block;
}
div.input_info
{
    width: 580px;
    text-align: left;
    margin-left: 10px;
    float: left;
    height: 40px;
}
div.input_info span.info
{
    display:inline-block;
    width:50px;
}
div.fee_type input, div.fee_type label
{
    border-width: 0px;
    display: block;
    height: 30px;
    line-height: 27px;
    float: left;
    margin-left: 5px;
}
div.fee_type label
{
    margin-left: 3px;
    margin-right: 5px;
}
div.change_pwd
{
    clear: both;
    width: 410px;
    float: right;
}
div.change_pwd input, div.change_pwd label
{
    display: block;
    height: 30px;
    line-height: 27px;
    float: left;
    margin-left: 5px;
    border-width: 0px;
}
#optionalInfo
{
    clear: both;
    height: 390px;
    padding-top: 10px;
}
#divPwds
{
    display: none;
    clear: both;
    height: 130px;
    padding-top: 10px;
}

div.validate_msg_long, div.validate_msg_medium, div.validate_msg_short, div.validate_msg_tiny
{
    /*height: 28px;*/
    line-height: 28px;
    float: right;
    overflow: hidden;
    text-align: left;
    padding-left:5px;
}
div.error_msg
{
    padding-left:17px;
}
div.validate_msg_long
{
    width: 390px;
}
div.validate_msg_medium
{
    width: 340px;
}
div.validate_msg_short
{
    width: 240px;
    line-height: 28px;
}
div.validate_msg_tiny
{
    width: 190px;
    line-height: 28px;
}
div.input_info_scroll
{
    width: 360px;
    text-align: left;
    float: left;
    height: 87px;
    overflow-y: scroll;
    overflow-x: auto;
    border: 1px solid silver;
}
div.input_info_scroll li
{
    float: left;
    line-height: 22px;
    height: 22px;
    margin: 2px 2px 5px 5px;
    width: 106px;
}
div.input_info_scroll li span
{
    display: block;
    float: left;
    line-height: 22px;
    height: 22px;
}
div.input_info_scroll li input
{
    height: 22px;
    line-height: 22px;
    margin-right: 3px;
    float: left;
    border-width: 0px;
}
div.input_info_high
{
    width: 580px;
    text-align: left;
    margin-left: 10px;
    float: left;
    height: 90px;
    margin-bottom: 10px;
}
div.button_info
{
    text-align: left;
    width: 380px;
    /*border:1px solid blue;*/
}
span.required
{
    font-size:10pt;
}

/* 保存操作后的提示消息 */
#save_result_info
{
    width: 600px;
    line-height: 50px;
    padding-left: 40px;
    font-size: 14px;
    display: none;
    font-weight:bold;
}

/* 删除操作后的提示消息 */
#operate_result_info
{
    width: 400px;
    line-height: 70px;
    padding-left: 40px;
    font-size: 16px;
    display: none;
    position: absolute;
    z-index: 100;
    top: 90px;
    left: 30%;
}
#operate_result_info img
{
    float: right;
    margin-right: 10px;
    margin-top: 10px;
    cursor: pointer;
}

/* 正文：分页功能区 */
#pages
{
    width: 940px;
    text-align: center;
    height: 28px;
    line-height: 28px;
    margin-top: 5px;
}
#pages a, #pages a.current_page:hover
{
    padding: 5px 10px;
}
#pages a:hover
{
    padding: 5px 9px;
}

/*页脚部分：footer*/
#footer
{
    width: 960px;
    height: 50px;
    padding: 5px 0;
    line-height: 25px;
    text-align: center;
}

/* 表单上的元素：控件 */
span.readonly
{
    line-height: 28px;
    display: inline-block;
    text-align: left;
    padding-left: 3px;
}
input.text_search, select.select_search
{
    height: 23px;
    line-height: 23px;
    margin-left: 0px;
}
input.btn_search
{
    height: 26px;
    line-height: 26px;
    width: 74px;
    padding-left: 13px;
    margin-left: 3px;
}
input.btn_search_large
{
    height: 26px;
    line-height: 26px;
    width: 110px;
    padding-left: 18px;
    margin-left: 3px;
}
input.btn_search:hover,input.btn_search_large:hover
{
    font-weight: bold;
}
input.btn_add
{
    height: 26px;
    line-height: 26px;
    width: 71px;
    text-align: center;
    overflow: hidden;
    padding-left: 0px;
}
input.btn_modify, input.btn_delete, input.btn_start, input.btn_pause
{
    margin-left: 3px;
    width: 55px;
    cursor: pointer;
}
input.btn_save
{
    width: 100px;
    height: 36px;
    line-height: 26px;
    font-size: 20px;
    font-family: "黑体";
    text-align: center;
    margin-right: 5px;
}
input.sort_asc, input.sort_desc
{
    width: 71px;
    height: 26px;
    line-height: 26px;
    font-family: "黑体";
    text-align: center;
    padding-right: 10px;
}

/* 主页 */
#index_navi
{
    width: 100%;
    height: 91px;
    position: absolute;
    bottom: 0;
}
#index_navi li
{
    margin-top: 10px;
    float: left;
    padding: 0 14px;
}
#index_navi a
{
    display: block;
    width: 68px;
    height: 77px;
    overflow: hidden;
    float: left;
}

/* 登录页面 */
div.login_box
{
    width: 450px;
    height: 200px;
    padding-top: 70px;
    margin-top: 150px;
    font-size: 12pt;
    font-weight: bold;
}
div.login_box table
{
    width:98%;
}
div.login_box table tr td
{
    padding-left: 5px;
    height: 44px;
}
td.login_info
{
    text-align: right;
    width: 150px;
    padding-right: 5px;
}
td.login_error_info
{
    width:130px;
}
td.login_button
{
    text-align: left;
    padding-top: 5px;
}
td.login_button img
{
    border-width: 0px;
}

/* 错误页面 */
#error
{
    width: 960px;
    text-align: center;
    margin-top: 400px;
}
#error a:hover
{
    text-decoration: underline;
    cursor: pointer;
}
/* 报表页面 */
#report_main
{  
    min-height: 420px;
    width: 960px;
    padding: 5px;
    margin-top: 5px;
    max-height: 450px;
    overflow-x: hidden;
    overflow-y: auto;
}
div.report_box
{ 
    width:950px; 
    min-height:365px; 
    background-color:#e8f3f8; 
    padding:5px;
    max-height: 395px;
}
div.tabs
{
    width:940px;
    height:35px;
    overflow:hidden;
    padding-left:10px;
    margin-top:10px;
}
div.tabs ul li
{
    float:left;
    padding:0 5px;
}
div.tabs ul li a
{
    display:block;
    width:101px;
    height:36px;
    overflow:hidden;
    line-height:36px;
    text-align:center;
}
#report_data
{
    min-height: 320px;
}

src/main/webapp/WEB-INF/cost/

<%@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 = true;
                    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].value = "";
                    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>
            <!-- 
                当前:/netctoss/toAddCost.do
                目标:/netctoss/addCost.do
             -->
            <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" 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" 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" 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 class="width300 height70" name="descr"></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" onclick="history.back();"/>
                </div>
            </form>  
        </div>
        <!--主要区域结束-->
        <div id="footer">
            <span>[源自北美的技术，最优秀的师资，最真实的企业环境，最适用的实战项目]</span>
            <br />
            <span>版权所有(C)加拿大达内IT培训集团公司 </span>
        </div>
    </body>
</html>

<%@page pageEncoding="utf-8"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!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 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" 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>${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>${c.creatime }</td>
                            <td>${c.startime }</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（此触发动作由程序处理）
                    </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>

src/main/webapp/WEB-INF/main/

<%@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" /> 
    </head>
    <body class="index">
        <!--导航区域开始-->
        <div id="index_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>
    </body>
</html>

<%@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" /> 
    </head>
    <body class="index">
        <div class="login_box">
          <form action="login.do" method="post">
            <table>
                <tr>
                    <td class="login_info">账号：</td>
                    <td colspan="2"><input name="adminCode" type="text" class="width150" /></td>
                    <td class="login_error_info"><span class="required">30长度的字母、数字和下划线</span></td>
                </tr>
                <tr>
                    <td class="login_info">密码：</td>
                    <td colspan="2"><input name="password" type="password" class="width150" /></td>
                    <td><span class="required">30长度的字母、数字和下划线</span></td>
                </tr>
                <tr>
                    <td class="login_info">验证码：</td>
                    <td class="width70"><input name="" type="text" class="width70" /></td>
                    <td><img src="images/valicode.jpg" alt="验证码" title="点击更换" /></td>  
                    <td><span class="required"></span></td>              
                </tr>            
                <tr>
                    <td></td>
                    <td class="login_button" colspan="2">
                            <!-- 
                                1.表单有onsubmit事件,点击submit按钮时触发
                                2.表单还有submit(),通过js可以调用,调用时
                                   会提交数据,其效果和触发onsubmit事件一样
                             -->
                        <a href="javascript:document.forms[0].submit();"><img src="images/login_btn.png" /></a>
                    </td>    
                    <td><span class="required">${error }</span></td>
                </tr>
            </table>
          </form>
        </div>
    </body>
</html>

src/main/webapp/WEB-INF/

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://java.sun.com/xml/ns/javaee" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd" version="2.5">
  <display-name>netctoss</display-name>
  <welcome-file-list>
    <welcome-file>index.html</welcome-file>
    <welcome-file>index.htm</welcome-file>
    <welcome-file>index.jsp</welcome-file>
    <welcome-file>default.html</welcome-file>
    <welcome-file>default.htm</welcome-file>
    <welcome-file>default.jsp</welcome-file>
  </welcome-file-list>
  
  <servlet>
      <servlet-name>main</servlet-name>
      <servlet-class>web.MainServlet</servlet-class>
  </servlet>
  <servlet-mapping>
      <servlet-name>main</servlet-name>
      <url-pattern>*.do</url-pattern>
  </servlet-mapping>
  
</web-app>