5.1 jsp+servlet

原创于 2020-09-07 19:53:36 发布 · 1.4k 阅读

CC 4.0 BY-SA版权

文章标签：

用jsp+servlet+tomcat技术写一个简易交易平台页面

首先通过效果展示你可以看到这个页面比较简陋，当然这个小练习前端如何华丽不是我们的重点，重点是利用这几个技术点实现一个类似通信运营商网上营业厅的页面，主要能实现功能，1.根据不同的选择跳转到不同的页面上，2.登录认证，3注册校验(用户在注册账号时只能使用随机给定的九个号码进行注册，模拟的是选号功能)，两次输入的账号密码还必须一直，4.模拟的是用户消费的功能，用户点击加号表示消费增加，减号消费减少，但是最低消费步少于单位1，5.当用户点击确定后扣除用户的总话费，表示消费完毕了。
这篇文章出现的意义是啥：首先从整体上了解下这部分技术在代码上的形式是什么，其次通过整体描述，可以找到某部分实现功能是怎么实现的，可以往类似的方向上迁移。

1、功能介绍

1、注册账号

1、选择卡号（通过代码实现提供以“139”开头的9个随机卡号,每行3个，模拟选择卡号进行注册）
2、选择套餐（话唠套餐、网虫套餐、超人套餐）
3、输入用户名、密码信息
4、输入预存话费金额
注册成功后，重新登陆，登陆后显示：卡号、用户名、密码、当前余额、套餐信息
（注册的信息需要存入到数据库中）

2、登陆账号

登陆时使用注册的卡号进行登陆

3、套餐情况

类型	话唠套餐	网虫套餐	超人套餐
通话时长	500分钟	0	200分钟
上网流量	0	3G	1G
短息条数	30条	0	50条
资费	58元/月	68元/月	78元/月

超出部分：流量0.1元/M：；通话0.2/分钟；短信0.1/条；

4、如果超出使用部分，开始扣除话费余额，注册时话费起始额度50元

5、登陆后可在另一页面查看自己的消费记录，流量用了多少、短信用了多少、通话>时长用了多少、剩了多少，并带有时间

6、效果预览

选择界面mennue.jsp

登陆页面login.jsp

在这里插入图片描述

注册页面register.jsp

在这里插入图片描述

登陆后显示的信信息、以及模拟操作userInformation.jsp

在这里插入图片描述

查看用户的消费记录testsousou.jsp

2、项目结构

运行环境：
IntelliJ IDEA 2019.3.3 x64；JDK1.8；apache-tomcat-8.5.57；Mysql5

项目逻辑图

在这里插入图片描述

3、依赖pom.xml、web.xml

<dependency>
  <groupId>junit</groupId>
  <artifactId>junit</artifactId>
  <version>4.11</version>
  <scope>test</scope>
</dependency>
<!-- jsp-->
<!-- https://mvnrepository.com/artifact/javax.servlet/jstl -->
<dependency>
  <groupId>javax.servlet.jsp</groupId>
  <artifactId>jsp-api</artifactId>
  <version>2.2</version>
  <scope>provided</scope>
</dependency>
<dependency>
  <groupId>javax.servlet</groupId>
  <artifactId>servlet-api</artifactId>
  <version>3.0-alpha-1</version>
  <scope>provided</scope>
</dependency>
<dependency>
  <groupId>javax.servlet.jsp.jstl</groupId>
  <artifactId>jstl-api</artifactId>
  <version>1.2</version>
</dependency>
<!-- 数据库驱动 -->
<dependency>
  <groupId>mysql</groupId>
  <artifactId>mysql-connector-java</artifactId>
  <version>5.1.35</version>
</dependency>
<!--jstl.jar-->
<!-- https://mvnrepository.com/artifact/javax.servlet/jstl -->
<dependency>
  <groupId>javax.servlet</groupId>
  <artifactId>jstl</artifactId>
  <version>1.2</version>
</dependency>

web.xml

<web-app>
  <display-name>Archetype Created Web Application</display-name>
  <!--顺序为：1功能选择，2产生随机号码，3用户注册, 4用户登陆,5嗖嗖传值-->
  <!--1-->
  <servlet>
    <servlet-name>chooseservlet</servlet-name>
    <servlet-class>servlet.ChooseServlet</servlet-class>
  </servlet>
<!--2-->
  <servlet>
    <servlet-name>gneraNum</servlet-name>
    <servlet-class>servlet.GenrCNServlet</servlet-class>
  </servlet>
<!--3-->
  <servlet>
    <servlet-name>addservlet</servlet-name>
    <servlet-class>servlet.addServlet</servlet-class>
  </servlet>
  <!--4-->
  <servlet>
    <servlet-name>loginservlet</servlet-name>
    <servlet-class>servlet.LoginServlet</servlet-class>
  </servlet>
  <!--5-->
  <servlet>
    <servlet-name>totalServletservlet</servlet-name>
    <servlet-class>servlet.TotalServlet</servlet-class>
  </servlet>
<!--mapping分割线-->
  <!--1-->
  <servlet-mapping>
    <servlet-name>chooseservlet</servlet-name>
    <url-pattern>/testchooseServlet</url-pattern>
  </servlet-mapping>
<!--2-->
  <servlet-mapping>
    <servlet-name>gneraNum</servlet-name>
    <url-pattern>/testgnercano</url-pattern>
  </servlet-mapping>
<!--3-->
  <servlet-mapping>
    <servlet-name>addservlet</servlet-name>
    <url-pattern>/testaddServlet</url-pattern>
  </servlet-mapping>
<!--4-->
  <servlet-mapping>
    <servlet-name>loginservlet</servlet-name>
    <url-pattern>/testloginServlet</url-pattern>
  </servlet-mapping>
  <!--5-->
  <servlet-mapping>
    <servlet-name>totalServletservlet</servlet-name>
    <url-pattern>/testtotalServlet</url-pattern>
  </servlet-mapping>
  <welcome-file-list>
    <welcome-file>mennue.jsp</welcome-file>
  </welcome-file-list>

</web-app>

4、mysql数据库代码

1、该表用于存储用户的注册信息
各字段属性依次为：卡号、套餐类型、话费、用户名、密码

create table `storage` (
	`cardNo` varchar (99),
	`type` varchar (90),
	`phoneFee` int (5),
	`userName` varchar (180),
	`userPwd` varchar (450)
); 
insert into `storage` (`cardNo`, `type`, `phoneFee`, `userName`, `userPwd`) values('13915150627','超人套餐','50','琪得龙','555555555555jj');
insert into `storage` (`cardNo`, `type`, `phoneFee`, `userName`, `userPwd`) values('13922790789','话唠套餐','45','张三丰','123456zhang');
insert into `storage` (`cardNo`, `type`, `phoneFee`, `userName`, `userPwd`) values('13928047071','超人套餐','50','琪','13928047071jj');
insert into `storage` (`cardNo`, `type`, `phoneFee`, `userName`, `userPwd`) values('13935738131','话唠套餐','50','小兔子165','123456liuYongan');
insert into `storage` (`cardNo`, `type`, `phoneFee`, `userName`, `userPwd`) values('13937237806','超人套餐','50','去','1111111111kk');
insert into `storage` (`cardNo`, `type`, `phoneFee`, `userName`, `userPwd`) values('1394122519','超人套餐','50','隔壁老刘','11111166677gg');
insert into `storage` (`cardNo`, `type`, `phoneFee`, `userName`, `userPwd`) values('13949869152','超人套餐','50','琪得龙东强','123456mmc');
insert into `storage` (`cardNo`, `type`, `phoneFee`, `userName`, `userPwd`) values('13961818555','话唠套餐','34','诸葛亮','123456zhu');
insert into `storage` (`cardNo`, `type`, `phoneFee`, `userName`, `userPwd`) values('13963542341','网虫套餐','50','起个名难','123456ggr');

2、该表用于记录用户的消费记录
依次为：卡号、剩余话费、剩余短信、剩余流量、超出话费、超出短信、超出流量、余额、总话费，使用时间；

create table `recordlog` (
	`cardNo` varchar (99),
	`phonetimeleft` int (11),
	`messageleft` int (11),
	`flowleft` int (11),
	`phonetimebeyond` int (11),
	`messagebeyond` int (11),
	`flowbyond` int (11),
	`moeneyleft` int (11),
	`totalmoney` int (11),
	`usetime` datetime 
); 
insert into `recordlog` (`cardNo`, `phonetimeleft`, `messageleft`, `flowleft`, `phonetimebeyond`, `messagebeyond`, `flowbyond`, `moeneyleft`, `totalmoney`, `usetime`) values('13949869152','111','222','333','444','555','666','50','60','2020-08-28 15:44:53');
insert into `recordlog` (`cardNo`, `phonetimeleft`, `messageleft`, `flowleft`, `phonetimebeyond`, `messagebeyond`, `flowbyond`, `moeneyleft`, `totalmoney`, `usetime`) values('13963542341','111','222','333','444','555','666','50','60','2020-08-28 15:44:53');
insert into `recordlog` (`cardNo`, `phonetimeleft`, `messageleft`, `flowleft`, `phonetimebeyond`, `messagebeyond`, `flowbyond`, `moeneyleft`, `totalmoney`, `usetime`) values('13935738131','111','222','333','444','555','666','50','60','2020-08-28 15:44:53');
insert into `recordlog` (`cardNo`, `phonetimeleft`, `messageleft`, `flowleft`, `phonetimebeyond`, `messagebeyond`, `flowbyond`, `moeneyleft`, `totalmoney`, `usetime`) values('13922790789','111','222','333','444','555','666','50','60','2020-08-28 15:44:53');
insert into `recordlog` (`cardNo`, `phonetimeleft`, `messageleft`, `flowleft`, `phonetimebeyond`, `messagebeyond`, `flowbyond`, `moeneyleft`, `totalmoney`, `usetime`) values('13961818555','111','222','333','444','555','666','50','60','2020-08-28 15:44:53');
insert into `recordlog` (`cardNo`, `phonetimeleft`, `messageleft`, `flowleft`, `phonetimebeyond`, `messagebeyond`, `flowbyond`, `moeneyleft`, `totalmoney`, `usetime`) values('13915150627','111','222','333','444','555','666','50','60','2020-08-28 15:44:53');
insert into `recordlog` (`cardNo`, `phonetimeleft`, `messageleft`, `flowleft`, `phonetimebeyond`, `messagebeyond`, `flowbyond`, `moeneyleft`, `totalmoney`, `usetime`) values('13928047071','111','222','333','444','555','666','50','60','2020-08-28 15:44:53');
insert into `recordlog` (`cardNo`, `phonetimeleft`, `messageleft`, `flowleft`, `phonetimebeyond`, `messagebeyond`, `flowbyond`, `moeneyleft`, `totalmoney`, `usetime`) values('13937237806','111','222','333','444','555','666','50','60','2020-08-28 15:44:53');
insert into `recordlog` (`cardNo`, `phonetimeleft`, `messageleft`, `flowleft`, `phonetimebeyond`, `messagebeyond`, `flowbyond`, `moeneyleft`, `totalmoney`, `usetime`) values('1394122519','111','222','333','444','222','666','50','60','2020-08-28 15:44:53');

5、Java代码部分

dao层

5.1.1从数据库查询数据用于 登陆时做验证，登陆成功后展示用户数据
TakeUserInfo 查看用户信息

package dao;

import entity.Card;

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

public class TakeUserInfo {

	public  static List<Card> getCardInformation(String cardno,String password) {
		List<Card> list = new ArrayList<>();
		try {
			Class.forName("com.mysql.jdbc.Driver");
		} catch (ClassNotFoundException e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		}
		Connection conn = null;
		PreparedStatement stmt = null;
		ResultSet rs =null;
		try {
			conn = DriverManager.getConnection(
					"jdbc:mysql://localhost:3306/userStorage?useUnicode=true&characterEncoding = utf-8", "admin", "admin");
			String sql="select * from storage where cardNo=? and userPwd =?";
			stmt = conn.prepareStatement(sql);
			stmt.setString(1, cardno);
			stmt.setString(2, password);
			 rs = stmt.executeQuery();
			Card ca =null;
			if(rs.next()) {
				ca = new Card();
				ca.setCardNumber(rs.getString("cardNo"));
				ca.setCostType(rs.getString("type"));
				ca.setTelephoneFee(rs.getDouble("phoneFee"));
				ca.setUserName(rs.getString("userName"));
				ca.setPassword(rs.getString("userPwd"));
				list.add(ca);
				System.out.println("登陆成功");
			}else {
				System.out.println("登陆失败");
			}
		} catch (SQLException e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		}finally {
			if(rs != null){
				try {
					rs.close();
				} catch (SQLException e) {
					// TODO Auto-generated catch block
					e.printStackTrace();
				}
			}
			if(stmt != null){
				try {
					stmt.close();
				} catch (SQLException e) {
					// TODO Auto-generated catch block
					e.printStackTrace();
				}
			}
			if(conn != null){
				try {
					conn.close();
				} catch (SQLException e) {
					// TODO Auto-generated catch block
					e.printStackTrace();
				}
			}
		}
		return list;
	}

}

5.1.2用于在用户注册时向数据库 插入数据
InsertUserInfo

package dao;

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

public class InsertUserInfo{
	public  void insertCardInformation(String cardNumber,String costType,double telephoneFee,String userName,String password) {
		try {
			Class.forName("com.mysql.jdbc.Driver");
		} catch (ClassNotFoundException e) {
			e.printStackTrace();
		}
		     Connection conn = null;
			 PreparedStatement p = null;
		  	 try {
				 conn = DriverManager.getConnection("jdbc:mysql://localhost:3306/userStorage?useUnicode=true&characterEncoding = utf-8", "admin", "admin");
				 InsertUserInfo in=new InsertUserInfo();
			
			 String sql = "insert into storage values(?,?,?,?,?)";
			 p=conn.prepareStatement(sql);

			 p.setString(1, cardNumber);
			 p.setString(2, costType);
			 p.setDouble(3, telephoneFee);
			 p.setString(4, userName);
			 p.setString(5, password);

			 p.executeUpdate();
			 } catch (SQLException e) {
			 System.out.println("PreparedStatement 对象创建失败");
			 e.printStackTrace();
		}finally {

			if(p != null){
				try {
					p.close();
				} catch (SQLException e) {
					e.printStackTrace();
				}
			}
			if(conn != null){
				try{
					conn.close();
				} catch (SQLException e) {
					// TODO Auto-generated catch block
					e.printStackTrace();
				}
			}
		}
		
	}
}

5.1.3 用于模拟用户消费后话费余额的变化
UpdateUserInfo

package dao;

import entity.Card;

import java.sql.*;
import java.util.ArrayList;
import java.util.List;

public class UpdateUserInfo {
    public  void updateCardInformation(String cardNo,double moneyleft) {
        try {
            Class.forName("com.mysql.jdbc.Driver");
        } catch (ClassNotFoundException e) {
            // TODO Auto-generated catch block
            e.printStackTrace();
        }
        Connection conn = null;
        PreparedStatement stmt = null;
        ResultSet rs =null;
        try {
            conn = DriverManager.getConnection(
                    "jdbc:mysql://localhost:3306/userStorage?useUnicode=true&characterEncoding = utf-8", "admin", "admin");
            String sql="update storage set phoneFee=? where cardNo=? ";
            stmt = conn.prepareStatement(sql);
            stmt.setDouble(1, moneyleft);
            stmt.setString(2, cardNo);
            stmt.executeUpdate();
            int result = stmt.executeUpdate();
            if (result>0){
                System.out.println("更新成功");
            }else {
                System.out.println("更新失败");
            }
        } catch (SQLException e) {
            // TODO Auto-generated catch block
            e.printStackTrace();
        }finally {
            if(rs != null){
                try {
                    rs.close();
                } catch (SQLException e) {
                    // TODO Auto-generated catch block
                    e.printStackTrace();
                }
            }
            if(stmt != null){
                try {
                    stmt.close();
                } catch (SQLException e) {
                    // TODO Auto-generated catch block
                    e.printStackTrace();
                }
            }
            if(conn != null){
                try {
                    conn.close();
                } catch (SQLException e) {
                    // TODO Auto-generated catch block
                    e.printStackTrace();
                }
            }
        }
    }
}

entity

5.2.1 该实体类用于接收从数据库查出来的数据，数据类型一致，属性名与字段名不同也可；
Card

package entity;

public class Card {
	private  String cardNumber;
	private  String costType;
	private  double telephoneFee;
	private  String userName;
	private  String password;
	public String getCardNumber() {
		return cardNumber;
	}
	public void setCardNumber(String cardNumber) {
		this.cardNumber = cardNumber;
	}
	public String getCostType() {
		return costType;
	}
	public void setCostType(String costType) {
		this.costType = costType;
	}
	public double getTelephoneFee() {
		return telephoneFee;
	}
	public void setTelephoneFee(double telephoneFee) {
		this.telephoneFee = telephoneFee;
	}
	public String getUserName() {
		return userName;
	}
	public void setUserName(String userName) {
		this.userName = userName;
	}
	public String getPassword() {
		return password;
	}
	public void setPassword(String password) {
		this.password = password;
	}
	public Card(String cardNumber, String costType, double telephoneFee, String userName, String password) {
		super();
		this.cardNumber = cardNumber;
		this.costType = costType;
		this.telephoneFee = telephoneFee;
		this.userName = userName;
		this.password = password;
	}
	@Override
	public String toString() {
		return "用户 [卡号" + cardNumber + ", 套餐" + costType + ", 话费" + telephoneFee
				+ ", 用户名" + userName + ", 密码" + password + "]";
	}
	public Card() {
		super();
	}
}

5.2.2 该实体类用于通过套餐类型得到不同的通话时长、上网流量、短信
CardType

package entity;

public class CardType {
    private int phoneTime;
    private int internetSize;
    private int messageNumber;

    public int getPhoneTime() {
        return phoneTime;
    }

    public void setPhoneTime(int phoneTime) {
        this.phoneTime = phoneTime;
    }

    public int getInternetSize() {
        return internetSize;
    }

    public void setInternetSize(int internetSize) {
        this.internetSize = internetSize;
    }

    public int getMessageNumber() {
        return messageNumber;
    }

    public void setMessageNumber(int messageNumber) {
        this.messageNumber = messageNumber;
    }

    @Override
    public String toString() {
        return "CardType{" +
                "phoneTime=" + phoneTime +
                ", internetSize=" + internetSize +
                ", messageNumber=" + messageNumber +
                '}';
    }

    public CardType(int phoneTime, int internetSize, int messageNumber) {
        this.phoneTime = phoneTime;
        this.internetSize = internetSize;
        this.messageNumber = messageNumber;
    }

    public CardType() {
    }
}

5.2.3 用于随机生成的号码
GenerateCardNumber

package entity;

public class GenerateCardNumber {
    private String array;

    public String getArray() {
        return array;
    }

    public void setArray(String array) {
        this.array = array;
    }

    public GenerateCardNumber(String array) {
        this.array = array;
    }

    public GenerateCardNumber() {
    }

    @Override
    public String toString() {
        return "GenerateCardNumber{" +
                "array='" + array + '\'' +
                '}';
    }
}

servlet

5.3.1 在初始页面用户进行不同功能选择，跳转不同的页面
ChooseServlet

package servlet;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;
import java.io.IOException;
import java.io.PrintWriter;

public class ChooseServlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        doPost(req,resp);
    }
    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        req.setCharacterEncoding("utf-8");
        resp.setCharacterEncoding("utf-8");
        resp.setContentType("text/html;charset=utf-8");
        HttpSession session = req.getSession();
        /*获得所选只贡功能*/
        String functionchoose= req.getParameter("functionchoose");
        PrintWriter out = resp.getWriter();
        out.println("测试sevlet");
      switch (functionchoose){
          case "用户注册":
              resp.sendRedirect("testgnercano");
              break;
          case "用户登陆":
              resp.sendRedirect("login.jsp");
              break;
          case "使用嗖嗖功能":
              resp.sendRedirect("testsousou.jsp");
              break;
          default:
              out.println("欢迎进入"+functionchoose+"界面");
              System.out.println("已经进入该功能");
      }

    }
}

5.3.2 用于登陆验证，登陆成功时向同一页面传递两组值
一组值显示用户的基本信息，卡号、话费、套餐、用户名
另一组显示不同套餐下对应短信、通话时长、流量的值
LoginServlet

package servlet;

import dao.TakeUserInfo;
import entity.Card;
import entity.CardType;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;
import java.io.IOException;
import java.io.PrintWriter;
import java.util.ArrayList;
import java.util.List;

public class LoginServlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        super.doGet(req, resp);
    }

    @Override
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        //设置编码设置
        request.setCharacterEncoding("utf-8");
        response.setCharacterEncoding("utf-8");
        //响应内容
        response.setContentType("text/html;charset=utf-8");
        //输出的out对象
        PrintWriter out = response.getWriter();
        HttpSession session = request.getSession();
       /*获得表单的账号密码*/
        String cardno= request.getParameter("cardNumber");
        String pwd= request.getParameter("password");

        TakeUserInfo take=new TakeUserInfo();
        List<Card> list = take.getCardInformation(cardno,pwd);
        int size = list.size();
        System.out.println("集合大小"+size);
        /*如果注册成功则跳转到新页面展示用户信息
        * 否则跳转到登陆页面
        * */
        if (size!=0){
            List<CardType> li=new ArrayList<>();
            CardType ct=new CardType();
            /*不同的套餐 话费、流量、短信数是不同的*/
            String costType = list.get(0).getCostType();
            if(costType.equals("话唠套餐")){
                ct.setPhoneTime(500);
                ct.setInternetSize(0);
                ct.setMessageNumber(30);
                li.add(ct);
                session.setAttribute("listtype",li);
            }else if (costType.equals("网虫套餐")){
                ct.setPhoneTime(0);
                ct.setInternetSize(3072);
                ct.setMessageNumber(0);
                li.add(ct);
                session.setAttribute("listtype",li);
            }else {
                ct.setPhoneTime(200);
                ct.setInternetSize(1024);
                ct.setMessageNumber(50);
                li.add(ct);
                session.setAttribute("listtype",li);
                for (CardType ccat:li) {
                    System.out.println(ccat);
                }
            }
            session.setAttribute("list", list);
            response.sendRedirect("userInformation.jsp");
        }else{
            out.println("未找到该用户信息请您重新输入");
            /*该出可做一个延时跳转*/
            response.sendRedirect("login.jsp");
        }
    }
}

5.3.3用于注册前产生九个长度11位的数字
GenrCNServlet

package servlet;

import entity.GenerateCardNumber;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;
import java.io.IOException;
import java.io.PrintWriter;
import java.util.ArrayList;
import java.util.List;

public class GenrCNServlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        doPost(req,resp);
    }

    @Override
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        //设置编码设置
        request.setCharacterEncoding("utf-8");
        response.setCharacterEncoding("utf-8");
        //响应内容
        response.setContentType("text/html;charset=utf-8");
        //输出的out对象
        PrintWriter out = response.getWriter();
        HttpSession session = request.getSession();

        int count = 0;
        String[] array1=new String[9];
        while (true) {
            int num = (int) (Math.random() * 100000000);
            String str = "139" + num;
            array1[count] = str;
            if (array1[count] != null) {
                count++;
            }
            /*确保生成的号码为11位，数量9个*/
            if(str.length()!=11){
                continue;
            }else if (count != 9){
                continue;
            }else {
                break;
            }
        }
        List<GenerateCardNumber> list=new ArrayList<>();
        GenerateCardNumber ge=null;
        for (int i=0;i<9;i++){
            ge=new GenerateCardNumber();
            ge.setArray(array1[i]);
            list.add(ge);
        }
        session.setAttribute("list",list);
        System.out.println("传的值"+list.get(0));
        response.sendRedirect("register.jsp");
    }
}

5.3.4 用于用户登陆时向数据库插入数据
addServlet

package servlet;
import dao.InsertUserInfo;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;
import java.io.IOException;
import java.io.PrintWriter;
import java.text.ParseException;
import java.text.SimpleDateFormat;
import java.util.Date;

public class addServlet extends HttpServlet {
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        //设置编码设置
        request.setCharacterEncoding("utf-8");
        response.setCharacterEncoding("utf-8");
        //响应内容
        response.setContentType("text/html;charset=utf-8");
        //输出的out对象
        PrintWriter out = response.getWriter();
        HttpSession session = request.getSession();

        String cardNumber = request.getParameter("cardNumber");
        String costType = request.getParameter("costType");
        /*getparameter得到的是String类型的值，如果需要double型则需要转换
        * */
        String telephoneFee = request.getParameter("telephoneFee");
       double tepf= Double.parseDouble(telephoneFee);
        String userName = request.getParameter("reuserName");
        String password = request.getParameter("repassword");

        InsertUserInfo insert=new InsertUserInfo();
        if (cardNumber!=null && costType!=null){
            insert.insertCardInformation(cardNumber,costType,tepf,userName,password);
            out.println(userName+"用户欢迎登陆");
            System.out.println("添加成功");
            response.sendRedirect("mennue.jsp");
        }else {
            System.out.println("添加失败");
        }
        out.flush();

        out.close();

    }

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        doPost(request,response);
    }
}

5.3.5 用于在用户登陆后用户基础消费情况
TotalServlet

package servlet;

import dao.InsertAnotherUserInfo;
import dao.UpdateUserInfo;
import entity.RecordLog;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;
import java.io.IOException;
import java.io.PrintWriter;

public class TotalServlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        doPost(req,resp);
    }

    @Override
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        //设置编码设置
        request.setCharacterEncoding("utf-8");
        response.setCharacterEncoding("utf-8");
        //响应内容
        response.setContentType("text/html;charset=utf-8");
        //输出的out对象
        PrintWriter out = response.getWriter();
        HttpSession session = request.getSession();
        /*需要获得电话时长、短信数量、流量、总数*/
        String cardNo= request.getParameter("cardNo");

        String phonetimeleft= request.getParameter("phonetimeleft");
        int parsephonetimeleft = Integer.parseInt(phonetimeleft);

        String messageleft= request.getParameter("messageleft");
        int parsemessageleft = Integer.parseInt(messageleft);

        String flowleft= request.getParameter("flowleft");
        int parseflowleft = Integer.parseInt(flowleft);

        String phonetimebeyond= request.getParameter("phonetimebeyond");
        int parsephonetimebeyond = Integer.parseInt(phonetimebeyond);

        String messagebeyond= request.getParameter("messagebeyond");
        int parsemessagebeyond = Integer.parseInt(messagebeyond);

        String flowbeyond= request.getParameter("flowbeyond");
        int parseflowbeyond = Integer.parseInt(flowbeyond);
        /*接收类型默认String需要别的类型就需要转换*/
        String moneyleft= request.getParameter("moeneyleft");
        float moneyleftT = Float.parseFloat(moneyleft);

        String totalmoney= request.getParameter("totalmoney");
        float parsetotalmoney = Float.parseFloat(totalmoney);

        String usetime= request.getParameter("usetime");
        /*经过使用后话费总值已然发生了改变，因此需要改数据*/
        UpdateUserInfo updateUserInfo=new UpdateUserInfo();
        updateUserInfo.updateCardInformation(cardNo,moneyleftT);

        InsertAnotherUserInfo insertAnotherUserInfo=new InsertAnotherUserInfo();
        insertAnotherUserInfo.insertCardInformation(cardNo,parsephonetimeleft,parsemessageleft,parseflowleft,parsephonetimebeyond,parsemessagebeyond,parseflowbeyond,moneyleftT,parsetotalmoney,usetime);
        out.flush();
        out.close();
    }
}

6、jsp部分

大厅界面

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>嗖嗖移动大厅</title>
</head>
<body>
<form method="post" action="testchooseServlet">
    <select name="functionchoose">
        <option>用户注册</option>
        <option>用户登陆</option>
        <option>使用嗖嗖功能</option>
    </select><br>
    <input type="submit" value="点击进入您选择的页面">
</form>
</body>
</html>

注册界面

<%@ page import="entity.GenerateCardNumber" %>
<%@ page import="java.io.PrintWriter" %>
<%@ page import="java.util.List" %>
<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2020/7/26 0026
  Time: 9:46
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ page isELIgnored="false" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="C" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <title>嗖嗖用户注册页面</title>
    <style>
        div {
            align-content: center;
            width:750px;
        }
        input:invalid{
            border:2px solid red;
        }
        input[id='cardNumberid']+span{
            border: 2px;
            display:none;
            color:red;
        }
        input[id='reuserNameid']+span{
            border: 2px;
            display:none;
            color:red;
        }
        input[id='repasswordid']+span{
            border: 2px;
            display:none;
            color:red;
        }
        input[id='passwordid']+span{
            border: 2px;
            display:none;
            color:red;
        }
        body{
            background-image: url("image/ditie.jpg");
            width:1000px;
            margin: 0 auto;
            align-content: center;
            background-repeat:no-repeat;
            background-size:1360px 720px;
            background-position-x:50%;
        }
    </style>
</head>
<body>
    <table width="1000" align="center" border=1 cellpadding="0" cellspacing="0" class="table1">
        <tr bgcolor="#228b22" align="center">
            <td colspan="3">请从以下号码中选择</td>
        </tr>
        <%--在传值过程中传的为一个数组一直报错找不到实体类中的属性，
        因此初步判断，for each方法只能接收集合，而且需有如下代码，即为属性赋值
         for (int i=0;i<9;i++){
            ge=new GenerateCardNumber();
            ge.setArray(array1[i]);
            list.add(ge);
        }
        --%>
        <%--此处的功能为内容呈现在三行三列的表格上--%>
        <c:forEach var="GenerateCardNumber" items="${list}" varStatus="status">
            <c:if test="${(status.index+1) % 3 == 1}">
                <tr>
            </c:if>
            <td align="center" hight="100" valign="middle" bgcolor="aqua" id="tdvalue">${GenerateCardNumber.array}</td>
            <c:if test="${(status.index+1) % 3 == 0}">
                </tr>
            </c:if>
        </c:forEach>
    </table>
<div>
<form method="post" action="<%--testaddServlet--%>" onsubmit="return check()" id="forms">
    卡号:<input type="text" name="cardNumber" id="cardNumberid" required placeholder="11位卡号">
    <span id="carrdnumValid">请从给出的号码中做出选择</span><br/>

    套餐:<select name="costType">
            <option>话唠套餐</option>
            <option>网虫套餐</option>
            <option selected>超人套餐</option>
         </select><br>
    话费充值:<input type="text" name="telephoneFee" id="telephoneFeeid" required placeholder="预存话费"><br>
    用户名:<input type="text" name="userName" id="userNameid" required><br>

    <%--表单验证给出了很多方法不要试图自己写浪费时间--%>
    密码:<input type="password" name="password" id="passwordid" required placeholder="必须包含字母与数字" minlength="6" <%--pattern="[A-z]{3}"--%>>
    <span id="passwordValid">密码安全性较低，请重新输入</span><br/>

    再次输入用户名:<input type="text" name="reuserName" id="reuserNameid" required >
    <span id="reuserNameValid">输入的用户名必须与上次输入保持一致</span><br/>

    请再次输入密码:<input type="password" name="repassword" id="repasswordid" required placeholder="与上面输入保持一致">
    <span id="repasswordValid">输入的密码必须与上次输入保持一致</span><br />
                 <input type="submit" value="提交">
</form>
</div>
</body>
<script type="text/javascript">
    /*为避免得到的不是要求的值，因此得通过该方法把好最后一道关，只有return true才能提交上去*/
    function check() {
        var cno = document.getElementById("cardNumberid").value;
        var usern = document.getElementById("userNameid").value;
        var pwd = document.getElementById("passwordid").value;
        var reuern = document.getElementById("reuserNameid").value;
        var repwd = document.getElementById("repasswordid").value;
        var index=0;
        var trufalse=0;
        var arr=new Array();
        <c:forEach items="${list}" var="GenerateCardNumber">
           arr[index]="${GenerateCardNumber.array}";
           if (cno==arr[index]){
               trufalse=1;
           }
        index++;
        </c:forEach>
        if (trufalse!=1){
            alert("请输入给出的号码");
            return false;
        }else if (usern!=reuern){
            alert("输入与上次同样的用户名");
            return false;
        }else if (pwd!=repwd) {
            alert("请输入与上次同样的密码");
            return false;
        }
        return true;
    }

    /*首先判断，注册的号码是随机生成的之一，再者密码中必须有字母与数字，
    最后第二次输入的密码、账号与第一次一致
    document.getElementById相当于Java中获得一个对象，与Java一样也有局部变量
    下面该方法目的是：实时反馈给用户信息
    */

    /*监听两次账号是否一致*/
    var reusername=document.getElementById('reuserNameid');
    var reuserNameValid=document.getElementById('reuserNameValid');
    reusername.addEventListener('input',function(){
            var usernamev = document.getElementById('userNameid').value;
            var inputValue=this.value;
            if(inputValue!=usernamev){
                reuserNameValid.style.display='inline-block';
            }else{
                reuserNameValid.style.display='none';
            }
        }
    )
    /*监听两次密码是否一致*/
    var repassword=document.getElementById('repasswordid');
    var repasswordValid=document.getElementById('repasswordValid');
    repassword.addEventListener('input',function(){
            var password = document.getElementById('passwordid').value;
            var inputValue=this.value;
            if(inputValue!=password){
                /*inline-block*/
                repasswordValid.style.display='inline-block';
            }else{
                repasswordValid.style.display='none';
            }
        }
    )

    /*监听输入的号码是否是给出的*/
    var cardNumber=document.getElementById('cardNumberid');
    var carrdnumValid=document.getElementById('carrdnumValid');
    cardNumber.addEventListener('input',function(){
            var inputValue=this.value;
            var arr=new Array();
            var tf=0;
            var index=0;
            <c:forEach items="${list}" var="GenerateCardNumber">
            arr[index]="${GenerateCardNumber.array}";
            /*如果输入的数字是给出的则比较后给出一个显示*/
            if (inputValue==arr[index]){
                tf=1;
            }
               index++;
            </c:forEach>
            if (tf!=1){
                carrdnumValid.style.display='inline-block';
            }else {
                carrdnumValid.style.display='none';
            }
        }
    )
</script>
</html>

登陆界面

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>嗖嗖用户登陆页面</title>
    <style>
        *{padding:0;margin:0;}
        a{text-decoration:none;color:#666;}
        a:hover{text-decoration:underline;color:#b61d1d;}
        body,html{font:12px/1.5 "微软雅黑",Arial;color:#666;}
        .wrap{
            width:1361px;margin:0 auto;
        }
        .left{float:left;}
        .right{float:right;}

        .logo-box{
            height:60px;
            width: 900px;
            padding-top:10px;
            margin-left: 100px;
        }
        .logo-r{
            font-size:24px;
            padding-left:20px;
            margin-top:10px;
        }
/*限制中部内容与上下左右关系，以及自身尺寸*/
        .content{
            height: 475px;
            width: 1361px;
            margin-top:15px;
        }
        /*控制具体背景图片情况*/
        .login-box{
            height:475px;
            background: url(image/b.jpg);
            background-size: 1361px 475px;
        }
        /*控制中部登陆框部分的位置情况*/
        .login-form{
            float:left;
            margin-top:80px;
            margin-left: 200px;
            width:306px;
            padding:20px;
            background:#fff;
        }
        /*控制登陆框内元素位置信息*/
        .login-form h2{
            font-weight:normal;
            font-size:20px;
            height:27px;
            margin-bottom:25px;
        }
        /*立即注册*/
        .login-form h2 a{
            font-size:14px;
            color:red;
            padding-left:21px;
            line-height:29px;
            float:right;
            background:url(image/icon5.jpg) 0 center no-repeat ;
        }
        .login-form .item{
            height:38px;
            margin-bottom:20px;
            border:1px #bdbdbd solid;
        }
        .item input{
            float:left;
            border:0 none;
            padding:10px 0 10px 10px;
            font-size:14px;
            line-height:18px;
            width:255px;
            color:#999;
        }
        .item label{
            border-right:1px #bdbdbd solid;
            width:38px;
            height:38px;
        }
        .nick left{
            background-image: url(image/icon1.jpg) n;
        }
        .psw left{
            background:url("image/icon2.jpg") no-repeat;
        }
        .item2{
            font-size:0;
            margin-bottom:15px;
        }
        /*自动登陆*/
        .item2 label{
            font-size:12px;
            vertical-align:middle;
        }
        /*自动登陆*/
        .item2 input{
            vertical-align:middle;
            margin-right:3px;
        }
        /*忘记密码超链接*/
        .item2 a{
            float:right;
            font-size:12px;
        }
        /*登陆框*/
        .login-btn{
            display:block;
            height:35px;
            line-height:35px;
            text-align:center;
            color:#fff;
            background:darkcyan;
            font-size:18px;
        }
        /*登陆超链接*/
        .login-btn:hover{
            color:#fff;
            text-decoration:none;
        }

        .footer{
            text-align:center;
            margin-top:20px;
            padding-bottom:30px;
        }
        .link a{
            margin:0 10px;
        }
        .copy{
            margin-top:8px;
        }
    </style>
</head>
<body>
<header class="wrap">
    <div class="logo-box">
        <h1 class="left">
            <a href="" ><img src="image/logo.jpg" width="150" height="60" alt="sousoulogo"/></a>
        </h1>
        <span class="left logo-r">嗖嗖----嗖的一下就好了</span>
    </div>
</header>

 <%--   <form method="post" action="testloginServlet">
        <input type="text" name="cardNumber" placeholder="输入13位手机号">
        <input type="text" name="password" placeholder="输入账号">
        <input type="submit" value="确认登陆">
    </form>--%>
    <article class="content">
        <!-- 居中 -->
        <div class="wrap">
            <!-- 背景 -->
            <div class="login-box">
                <!-- 登陆 -->
                <div class="login-form">
                    <h2>嗖嗖用户<a href="testgnercano">立即注册</a></h2>
                    <!-- 表单 -->
                    <form action="testloginServlet" method="post" id="loginForm">
                        <div class="item">
                            <label class="nick left"></label>
                            <input type="text" name="cardNumber" placeholder="已验证手机"/>
                        </div>
                        <div class="item">
                            <label class="psw left"></label>
                            <input type="password" name="password"/>
                        </div>
                        <div class="item2">
                            <input type="checkbox" name="auto" id="auto"/>
                            <label for="auto">自动登录</label>
                            <a href="forgetPwd.jsp">忘记密码?</a>
                        </div>
                        <input type="submit" value="登陆" class="login-btn">
                    </form>
                </div>
            </div>
        </div>
    </article>
<footer class="wrap footer">
    <div class="link">
        <a href="show.jsp">关于我们</a>|
        <a href="show.jsp">联系我们</a>|
        <a href="show.jsp">人才招聘</a>|
        <a href="show.jsp">商家入驻</a>|
        <a href="show.jsp">广告服务</a>|
        <a href="show.jsp">手机嗖嗖</a>|
        <a href="show.jsp">友情链接</a>|
        <a href="show.jsp">销售联盟</a>|
        <a href="show.jsp">嗖嗖社区</a>|
        <a href="show.jsp">嗖嗖公益</a>|
        <a href="show.jsp">English Site</a>
    </div>
    <div class="copy">Copyright©2004-2017 嗖嗖ss.com 版权所有</div>
</footer>
</body>
</html>

用户个人信息展示

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ page isELIgnored="false" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

<html>
<head>
    <title>用户个人信息展示界面</title>
    <style>
        .table1{
            width: 100%;
            margin: 0 auto;
            font-size: larger;
        }
        .content{width: 1360px; margin: 0 auto;  font-family: "微软雅黑";}
        .logo{
            margin-left: 100px
        }
        .logo span{
            display: inline-block;
            float: right;
            width: 60px;
            height: 30px;
            line-height: 30px;
            font-size: 14px;
            background: #ff0000;
            color: #ffffff;
            text-align: center;
            border-radius: 10px;
            margin-top: 5px;
            margin-right: 10px;
            cursor: pointer;
            font-weight: bold;
        }
        /*背景图片大小*/
        .cartList{
            background: url("image/ditie.jpg") no-repeat;
            height: 414px;
            background-size: 100% ;
            overflow: hidden;
        }
        .table2{
            width: 80%;
            height:400px;
            margin-top: 10px;
        }
        .table2 tr td{
            height: 10%;
            align-content: center;
        }
    </style>
</head>
<body>
<%--头部信息--%>
<div class="logo">
    <img src="image/logo3.jpg" height="60" width="60"><span onclick="close_plan();">关闭</span>
</div>
<%--用户基本信息显示部分--%>
<table align="center" border="1" class="table1" cellspacing="0">
    <tr class="bookhead" align="center" bgcolor="aqua">
        <th>卡号</th>
        <th>套餐</th>
        <th>话费</th>
        <th>用户名</th>
        <th>密码</th>
    </tr>
    <c:forEach var="Card" items="${list}">
        <tr align="center">
            <td bgcolor="#228b22">${Card.cardNumber}</td>
            <td bgcolor="#daa520">${Card.costType}</td>

            <td bgcolor="#228b22" id="headetotalprice">${Card.telephoneFee}</td>
            <td bgcolor="#daa520">${Card.userName}</td>
            <td bgcolor="aqua">${Card.password}</td>
        </tr>
    </c:forEach>
</table>
<div class="content">
    <%--模拟使用嗖嗖部分--%>
    <div class="cartList">
        <table border="1" cellspacing="0" align="center" class="table2">
            <tr align="center">
                <td>
                    超出后的费用(单位：元)
                </td>
                <td>
                    使用情况
                </td>
                <td>
                    使用费用(单位：元)
                </td>
                <td>
                    套餐总量
                </td>
            </tr>
            <%--电话--%>
            <tr align="center">
                <td align="center" width="1">
                    <ol>每分钟 ¥<input type="text" name="price" value="0.1"></ol>
                </td>
                <td>
                    <ol><input type="button" name="minus" value="-" onclick="minus(0);"><input type="text" name="amount" value="0"><input type="button" name="plus" value="+" onclick="plus(0);"></ol>
                </td>
                <td>
                    <ol id="price0">¥0</ol>
                </td>
                <%--${CardType.phoneTime}为通话时长--%>
                <c:forEach items="${sessionScope.listtype}" var="CardType">
                    <td>
                        <ol id="function0">${CardType.phoneTime}</ol>
                    </td>
                </c:forEach>
            </tr>
            <%--短信--%>
            <tr align="center">
                <td>
                    <ol>每条 ¥<input type="text" name="price" value="0.1"></ol>
                </td>
                <td>
                    <ol><input type="button" name="minus" value="-" onclick="minus(1);"><input type="text" name="amount" value="0"><input type="button" name="plus" value="+" onclick="plus(1);"></ol>
                </td>
                <td>
                    <ol id="price1">¥0</ol>
                </td>
                <%--${CardType.messageNumber}为短信条数--%>
                <c:forEach items="${sessionScope.listtype}" var="CardType">
                    <td>
                        <ol id="function1">${CardType.messageNumber}</ol>
                    </td>
                </c:forEach>
            </tr>
            <%--上网--%>
            <tr align="center">
                <td>
                    <ol>每MB ¥<input type="text" name="price" value="0.2"></ol>
                </td>
                <td>
                    <ol><input type="button" name="minus" value="-" onclick="minus(2);"><input type="text" name="amount" value="0"><input type="button" name="plus" value="+" onclick="plus(2);"></ol>
                </td>
                <td>
                    <ol id="price2">¥0</ol>
                </td>
                <%--${CardType.internetSize}为上网流量--%>
                <c:forEach items="${sessionScope.listtype}" var="CardType">
                    <td>
                        <ol id="function2">${CardType.internetSize}</ol>
                    </td>
                </c:forEach>
            </tr>
            <tr>
                <td colspan="4" align="center">
                    超出套餐后使用的话费：<ol id="totalPrice">￥0</ol>
                    <form action="testtotalServlet" method="post">
                        <c:forEach var="Card" items="${list}">
                            <input type="text" name="cardNo" id="cardNo" <%--hidden--%> value="${Card.cardNumber}"/>
                        </c:forEach>
                        <input type="text" name="phonetimeleft" id="phonetimeleft" <%--hidden--%> value="0"/>
                        <input type="text" name="messageleft" id="messageleft" <%--hidden--%> value="0">
                        <input type="text" name="flowleft" id="flowleft" <%--hidden--%> value="0">
                        <input type="text" name="phonetimebeyond" id="phonetimebeyond" <%--hidden--%> value="0"/>
                        <input type="text" name="messagebeyond" id="messagebeyond" <%--hidden--%> value="0">
                        <input type="text" name="flowbeyond" id="flowbeyond" <%--hidden--%> value="0">
                        <input type="text" name="moeneyleft" id="moeneyleft" <%--hidden--%> value="0">
                        <c:forEach var="Card" items="${list}">
                        <input type="text" name="totalmoney" id="totalmoney" <%--hidden--%> value="${Card.telephoneFee}">
                        </c:forEach>
                        <input type="text" name="usetime" id="usetime" <%--hidden--%> value="0">
                        <ol><span onclick="accounts();"><input type="submit" value="结算"></span></ol>
                    </form>
                </td>
            </tr>
        </table>
    </div>
</div>
</body>
<%--功能阐述：
当点击打电话时加减号按钮才可以使用，
当点击结算时提交，消费的总金额
用户话费总量动态变化
当某个功能使用量小于套餐总量则不扣除话费，总量超出需要对用户提示
--%>
<%--
后台所需的值
三个套餐使用量，剩余量
话费总值
使用的时间

--%>
</html>


<script type="text/javascript">
    /*关闭窗口*/
    function close_plan(){
        alert("确认要关闭吗");
        window.close();
    }
    /*总钱数统计*/
    function accounts(){
        var prices=document.getElementsByName("price");
        var count=document.getElementsByName("amount");
        var sum=0;
        for(var i=0; i<prices.length;i++){
            sum+=prices[i].value*count[i].value;
        }
        alert(sum);
        /*采用拼接的方式得到我们所需要的格式*/
        var date = new Date();
        var year = date.getFullYear(),
            month = date.getMonth() + 1,//月份是从0开始的
            day = date.getDate(),
            hour = date.getHours(),
            min = date.getMinutes(),
            sec = date.getSeconds();
        var newTime = year + '-' +
            month + '-' +
            day + ' ' +
            hour + ':' +
            min + ':' +
            sec;
alert(newTime);
        /*用该方法获得当前时间所产生的格式并不是我们需要的*/
/*        var myDate = new Date();
        var s1 = myDate.toLocaleTimeString();*/
        document.getElementById("usetime").value=newTime;
    }
    /*减少使用时的情况*/
    function minus(num){
        var prices=document.getElementsByName("price")[num].value;
        var count=parseInt(document.getElementsByName("amount")[num].value)-1;
        if(count<0){
            alert("使用量不能小于0");
        }else{
            /*对数量进行改变 分别是：通话时长、短信条数、流量*/
            var pht;
            var msn;
            var ins;
            document.getElementsByName("amount")[num].value=count;
            var totals;
            if(num==0){
                <c:forEach items="${sessionScope.listtype}" var="CardType">
                pht=${CardType.phoneTime}
                </c:forEach>
                /*如果所用超出套餐，则扣除话费*/
                if(count>pht){
                    totals=parseFloat(prices*(count-pht));
                    /*此处显示超出部分的费用*/
                    document.getElementById("price"+num).innerHTML="¥" +totals;
                    document.getElementById("phonetimebeyond").value=count-pht;
                    total();
                }else {
                    var endnum=pht-count;
                    document.getElementById("function0").innerHTML=endnum+"分钟";
                    document.getElementById("phonetimeleft").value=endnum;
                }
            }else if (num==1){
                <c:forEach items="${sessionScope.listtype}" var="CardType">
                msn=${CardType.messageNumber}
                </c:forEach>
                if(count>msn){
                    totals=parseFloat(prices*(count-msn));
                    document.getElementById("price"+num).innerHTML="¥" +totals;
                    document.getElementById("messagebeyond").value=count-msn;
                    total();
                }else{
                    var endnum=msn-count;
                    document.getElementById("function1").innerHTML=endnum+"条";
                    document.getElementById("messageleft").value=endnum;
                }
            }else {
                <c:forEach items="${sessionScope.listtype}" var="CardType">
                ins=${CardType.internetSize}
                </c:forEach>
                if(count>ins){
                    totals=parseFloat(prices*(count-ins));
                    document.getElementById("price"+num).innerHTML="¥" +totals;
                    document.getElementById("flowbeyond").value=count-ins;
                    total();
                }else {
                    var endnum=ins-count;
                    document.getElementById("function2").innerHTML=endnum+"MB";
                    document.getElementById("flowleft").value=endnum;
                }
            }
        }
    }
    /*加数量时的情况*/
    function plus(num){
        var prices=document.getElementsByName("price")[num].value;
        var count=parseInt(document.getElementsByName("amount")[num].value)+1;
        /*对数量进行改变 分别是：通话时长、短信条数、流量*/
        var pht;
        var msn;
        var ins;
        document.getElementsByName("amount")[num].value=count;
        var totals;
        if(num==0){
            <c:forEach items="${sessionScope.listtype}" var="CardType">
            pht=${CardType.phoneTime}
            </c:forEach>
            /*如果所用超出套餐，则扣除话费*/
            if(count>pht){
                totals=parseFloat(prices*(count-pht));
                /*此处显示超出部分的费用*/
                document.getElementById("price"+num).innerHTML="¥" +totals;
                document.getElementById("phonetimebeyond").value=count-pht;
                total();
            }else {
                var endnum=pht-count;
                document.getElementById("function0").innerHTML="¥"+endnum;
                document.getElementById("phonetimeleft").value=endnum;
            }
        }else if (num==1){
            <c:forEach items="${sessionScope.listtype}" var="CardType">
            msn=${CardType.messageNumber}
            </c:forEach>
            if(count>msn){
                totals=parseFloat(prices*(count-msn));
                document.getElementById("price"+num).innerHTML="¥" +totals;
                document.getElementById("messagebeyond").value=count-msn;
                total();
            }else{
                var endnum=msn-count;
                document.getElementById("function1").innerHTML="¥"+endnum;
                document.getElementById("messageleft").value=endnum;
            }
        }else {
            <c:forEach items="${sessionScope.listtype}" var="CardType">
            ins=${CardType.internetSize}
            </c:forEach>
            if(count>ins){
                totals=parseFloat(prices*(count-ins));
                document.getElementById("price"+num).innerHTML="¥" +totals;
                document.getElementById("flowbeyond").value=count-ins;
                total();
            }else {
                var endnum=ins-count;
                document.getElementById("function2").innerHTML="¥"+endnum;
                document.getElementById("flowleft").value=endnum;
            }
        }
    }
    /*8月10日思路：分别获得ID等于function012处的值相加后并改变50元话费的值*/
    /*显示总钱数*/
    function total(){
        var prices=document.getElementsByName("price");
        var count=document.getElementsByName("amount");
        var sum=0;
        for(var i=0; i<prices.length;i++){
            sum+=prices[i].value*count[i].value;
        }
        document.getElementById("totalPrice").innerHTML="¥" +sum;
        var totalmoney = document.getElementById("totalmoney").value;
        document.getElementById("moeneyleft").value=totalmoney-sum;
        document.getElementById("headetotalprice").value=totalmoney-sum;
    }
</script>

测试查看用户基本消费情况

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ page isELIgnored="false" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>嗖嗖左侧菜单</title>
    <style>
        table{
            width: 800px;
            height: 50px;
            border: 1px;
            margin-left: 200px;
        }
        a:hover{
            background-color: aqua;
        }
        ol{
            border: 1px;
            height: 80px;
        }
    </style>
    <link href="css/style.css" rel="stylesheet"/>
</head>
<body>
<div class="nav-box">
    <div class="nav-top">点击使用嗖嗖功能</div>
    <ul>
        <ol>
            <a href="">
                查看本月账单
            </a>
            <div><table border="1" cellspacing="0">
                <tr class="bookhead" align="center" bgcolor="aqua">
                    <th>卡号</th>
                    <th>用户名</th>
                    <th>话费累计(单位：元)</th>
                    <th>流量使用(单位：MB)</th>
                    <th>短信使用(单位：条数)</th>
                    <th>通话时长(单位：分钟)</th>
                </tr>
                 </table>
            </div>
        </ol>
        <ol>
            <a href="">
                套餐余量查询
            </a>
            <div><table border="1" cellspacing="0">
                <tr class="bookhead" align="center" bgcolor="aqua">
                    <th>卡号</th>
                    <th>用户名</th>
                    <th>流量剩余(单位：元)</th>
                    <th>短信剩余(单位：条数)</th>
                    <th>通话时长(单位：分钟)</th>
                </tr>
            </table>
            </div>
        </ol>
        <ol>
            <a href="">
                打印消费清单
            </a>
            <div><table border="1" cellspacing="0">
                <tr class="bookhead" align="center" bgcolor="aqua">
                    <th>卡号</th>
                    <th>用户名</th>
                    <th>使用时间</th>
                    <th>使用类型</th>
                    <th>使用量</th>
                </tr>
            </table>
            </div>
        </ol>
        <ol>
            <a href="">
                套餐变更
            </a>
            <div><table border="1" cellspacing="0">
                <tr class="bookhead" align="center" bgcolor="aqua">
                    <th>卡号</th>
                    <th>用户名</th>
                    <th>初始套餐</th>
                    <th>要改变的套餐</th>
                    <th>生效时间</th>
                </tr>
            </table>
            </div>
        </ol>
        <ol>
            <a href="">
                办理退网
            </a>
            <div><table border="1" cellspacing="0">
                <tr class="bookhead" align="center" bgcolor="aqua">
                    <th>卡号</th>
                    <th>用户名</th>
                    <th>话费余量</th>
                </tr>
            </table>
            </div>
        </ol>
    </ul>
</div>
<script src="js/jquery-1.12.4.js"></script>
<script type="text/javascript">

    $(document).ready(function(){
        $("ol").hover(
            function(){
                $(this).children("div").show();//让相应二级内容显示
                $(this).toggleClass("orange");
            },
            function(){
                $(this).children("div").hide();//让相应二级内容隐藏
                $(this).toggleClass("orange");
            }
        );
    });
</script>
</body>
</html>

7、核心部分提炼

数据库部分

明确自己的数据库端口、数据名，用户名，和密码

 "jdbc:mysql://localhost:3306/userStorage?useUnicode=true&characterEncoding
= utf-8", "root", "root");

数据库增删改命令

String sql = "insert into storage values(?,?,?,?,?)";
String sql="select * from storage where cardNo=? and userPwd =?";
String sql="update storage set phoneFee=? where cardNo=? ";

servlet部分

request.getParameter返回值类型是String型，按照需求进行类型转换

 String telephoneFee = request.getParameter("telephoneFee");
 double tepf= Double.parseDouble(telephoneFee);

如何对form表单实时验证

在输入框中加入一个监听事件，如果两次密码不一致，则提示信息为红色
思路：输入框中span标签中包裹提示信息，密码一致，则不显示这部分
CSS部分代码如下

 input[id='repasswordid']+span{
            border: 2px;
            display:none;
            color:red;
        }

HTML部分代码如下

密码:<input type="password" name="password" id="passwordid" required placeholder="必须包含字母与数字" minlength="6" <%--pattern="[A-z]{3}"--%>>
    <span id="passwordValid">密码安全性较低，请重新输入</span><br/>
请再次输入密码:<input type="password" name="repassword" id="repasswordid" required placeholder="与上面输入保持一致">
    <span id="repasswordValid">输入的密码必须与上次输入保持一致</span><br />
    <input type="submit" value="提交">

Javascript代码如下

 /*监听两次密码是否一致*/
    var repassword=document.getElementById('repasswordid');
    var repasswordValid=document.getElementById('repasswordValid');
    repassword.addEventListener('input',function(){
            var password = document.getElementById('passwordid').value;
            var inputValue=this.value;
            if(inputValue!=password){
                /*如果两次密码不一致将错误信息追加到一行*/
                repasswordValid.style.display='inline-block';
            }else{
                repasswordValid.style.display='none';
            }
        }
    )

jsp中可能出现的异常

 <c:forEach items="${sessionScope.listtype}" var="CardType">
     <td>
        <ol id="function0">${CardType.phoneTime}</ol>
     </td>
</c:forEach>

1、在上方的示例中：c:forEach 无法识别，${}无法识别
HTML页面中头部信息缺少

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ page isELIgnored="false" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

2、在上方示例中 ${CardType.phoneTime}无法识别
解决：实体类中每有该属性，或字段名不匹配

页面中如何得到yy-MM-dd 00:00:00这种格式的时间戳

var date = new Date();
        var year = date.getFullYear(),
            month = date.getMonth() + 1,//月份是从0开始的
            day = date.getDate(),
            hour = date.getHours(),
            min = date.getMinutes(),
            sec = date.getSeconds();
        var newTime = year + '-' +
            month + '-' +
            day + ' ' +
            hour + ':' +
            min + ':' +
            sec;

如何将数据输出在三行三列的表格中

<c:forEach var="GenerateCardNumber" items="${list}" varStatus="status">
     <c:if test="${(status.index+1) % 3 == 1}">
          <tr>
     </c:if>
     <td align="center" hight="100" valign="middle" bgcolor="aqua" id="tdvalue">${GenerateCardNumber.array}</td>
      <c:if test="${(status.index+1) % 3 == 0}">
           </tr>
      </c:if>
</c:forEach>