(入门级小项目)JSP编程+web项目发布到Tomcat+mysql数据库

项目名称:  学生评分系统

 

1、 笔记本电脑开wifi使用Tomcat9做服务器。(默认150个链接)

2、 在mysql数据库中录入两个班级的学生信息。

3、 登陆界面,对两个班级学生username、password验证。有管理员权限(统计)。

4、 数据采集界面,设计表单填写。

5、 Servlet调用Add方法录入数据库。

6、 统计在数据库做相关查询,与界面进行交互。

 

一、JSP编程

 

分为login.jsp、login_action.jsp、grade.jsp和Answer.jsp

login.jsp

 

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<html>
<head>
<title>登陆界面</title>
<link rel="stylesheet" type="text/css" href="css/loginBg.css" />
<script type="text/javascript">
	function checkForm(form) {
		if (form.username.value == "") {
			alert("昵称不能为空!");
			form.username.focus();
			return false;
		}
		if (form.password.value == "") {
			alert("密码不能为空!");
			form.password.focus();
			return false;
		}

		return true;
	}
</script>
</head>
<body>
	<%@ include file="top.jsp"%>
	<hr>
	<form method="post" action="login_action.jsp"
		onsubmit="return checkForm(this);">
		<table align="center" width="300" border="1" rules="none"
			bordercolor="blue" style="margin-bottom: 40px">
			<tr>
				<td align="center" colspan="2" bgcolor="#ACD6FF">登录</td>
			</tr>
			<tr>
				<td style="color: white">您的昵称:</td>
				<td colspan="2"><input type="text" name="username" size="20"
					style="width: 150px"></td>
			</tr>
			<tr>
				<td style="color: white">您的密码:</td>
				<td colspan="2"><input type="password" name="password"
					size="20" style="width: 150px"></td>
			<tr>
				<td align="center" colspan="3"><input type="submit" value="登录">
					<input type="reset" value="重置"></td>
			</tr>
		</table>
	</form>
	<hr>
	<%@ include file="footer.jsp"%>
</body>
</html>

 

login_action.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ page import="java.sql.*"%>
<jsp:useBean id="Conn" scope="page" class="Com.DB.Conn" />
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
	<%
		request.setCharacterEncoding("UTF-8");
		String id = request.getParameter("username");
		String pass = request.getParameter("password");
    	
		//登陆校验 成功则进入评分表单;失败则停留登陆界面。
		boolean flag = Conn.verify(id, pass);
		if(flag){
			session.setAttribute("Username", id);
			response.sendRedirect("grade.jsp");
		}
		else if(id.equals("10000")&&pass.equals("10000"))
			response.sendRedirect("Answer.jsp");
		else 
			response.sendRedirect("login.jsp"); 
		
	%>
</body>
</html>

foot.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<html>
<head>
<style>
#footer {
	background-color: rbga(0,0,0,0.4);
	color: black;
	clear: both;
	text-align: center;
	padding: 5px;
}
</style>
</head>

<body>
	<div id="footer">
		<a href="#top">&Delta;返回顶部</a><br>
		<table align="center">
		  <tr>
		    <td align="center" width="100px">
		      <img src="image1/ad1.JPG"/>
		    </td>
		    <td align="center" width="100px">
		      <img src="image1/ad2.JPG"/>
		    </td>
		    <td align="center" width="100px">
		      <img src="image1/ad3.JPG"/>
		    </td>
		    <td align="center" width="100px">
		      <img src="image1/ad4.JPG"/>
		    </td>
		    <td align="center" width="100px">
		      <img src="image1/ad5.JPG"/>
		    </td>
		  </tr>
		</table>
	    <a href="">管理中心</a>&nbsp;<a href="">用户注册</a>&nbsp;<a href="">版权声明</a>&nbsp;<a href="">广告服务</a>&nbsp;<a href="">联系我们</a><br>
		<font color="white">Copyright(C)2000 学分评定,All Rights Reserved<br>学生学分评定网(中国)有限公司2000(C)版权所有</font>
	</div>
</body>

top.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>

<head>
<style>
    #header {
    background-color:rbga(0,0,0,0.4);
    color:black;
    text-align:center;
    padding:5px;
}
</style>
</head>

<body>
<div id="header">
<h1 align="center">学分评定</h1>
<table align="center" width="100%">
<tr>
   <td width ="71" height = "33" bgcolor="#CDCD9A" align="center"><u><a href="">本站主页</a></u>&nbsp;&nbsp;&nbsp;</td>
   <td width ="71" height = "33" bgcolor="#CDCD9A" align="center"><u><a href="">学校风采</a></u>&nbsp;&nbsp;&nbsp;</td>
   <td width ="71" height = "33" bgcolor="#CDCD9A" align="center"><u><a href="">优秀教师</a></u>&nbsp;&nbsp;&nbsp;</td>
   <td width ="71" height = "33" bgcolor="#CDCD9A" align="center"><u><a href="">优秀学生</a></u>&nbsp;&nbsp;&nbsp;</td>
   <td width ="71" height = "33" bgcolor="#CDCD9A" align="center"><u><a href="">教务网</a></u>&nbsp;&nbsp;&nbsp;</td>
   <td width ="71" height = "33" bgcolor="#CDCD9A" align="center"><u><a href="">登录平台</a></u>&nbsp;&nbsp;&nbsp;</td>
</tr>
</table>
</div>
</body>

grade.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" type="text/css" href="css/gradeBg.css" />
<script type="text/javascript">
	function checkForm(form1) {
		if (form1.ppt.value == "") {
			alert("ppt制作得分不能为0!");
			form1.ppt.focus();
			return false;
		}
		if (form1.speech.value == "") {
			alert("讲解得分不能为0!");
			form1.speech.focus();
			return false;
		}
		if (form1.answer.value == "") {
			alert("答疑得分不能为0!");
			form1.aanswer.focus();
			return false;
		}
		if (form1.team.value == "") {
			alert("团队合作得分不能为0!");
			form1.team.focus();
			return false;
		}
	
		return true;
	}
</script>
</head>
<% String path = request.getContextPath(); %>
<body>
	<hr>
<h2 align="center">在线评分</h2>
<%-- <% String str = (String)session.getAttribute("Username");
	out.print(str+"1111111111111");
%> --%>

<form name="form1" action="<%=path%>/addServlet" method="post" onSubmit="return check(this)"align="center" > 
 
    <select>
        <option value ="请选择班级">请选择班级</option>
        <option value ="网嵌151">网嵌151</option>
        <option value ="网嵌152">网嵌152</option>
     </select>
     
   <select>
        <option value ="请选择组号">请选择组号</option>
        <option value ="1">1.手机端评分系统</option>
        <option value ="2">2.自动驾驶汽车</option>
        <option value ="3">3.校园卡,手机公交卡</option>
        <option value ="4">4.VR&Google Daydream </option>
        <option value ="5">5.无线网络wifi密码破</option>
        <option value ="6">6.GPU,TPU,DPU,NPU,BPU</option>
        <option value ="7">7.量子通信,量子计算</option>
        <option value ="8">8.南京小学机器人教育市场分析</option>
        <option value ="9">9.树莓派开发,安卓开发</option>
        <option value ="10">10.OFDM/MIMO在5G中的应用</option>
     </select>
    <th>被打分者学号:<input type="text" name="userid"></th> 
     
     
    
    <p><br/></p>
    <p>(ppt制作20%,讲解40%,答疑20%,团队配合10%,实现10%,每项得分为100分,最后生成总分)</p>
    
   
<div id="table1">  
<table align="center" border=1>  
   <tr>
     <td>ppt制作:</td>
    <td><input type="text" name="ppt"> </td>
   </tr>

   <tr>
     <td>讲 解:</td>
    <td><input type="text" name="speech"> </td>
   </tr>
   <tr>
     <td>答 疑:</td>
    <td><input type="text" name="answer"> </td>
   </tr>
   <tr>
     <td>团队配合:</td>
    <td><input type="text" name="team"> </td>
   </tr>
   <tr>
     <td>实 现:</td>
    <td><input type="text" name="finish"> </td>
   </tr>
   <tr>
   <td align="center" colspan="2"><input type="submit" value="提交">
   </tr>
</table>
</div> 
</form>
<hr>
	<%@ include file="footer.jsp"%>
</body>
</html>

Answer.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<%
	String path = request.getContextPath();
%>
<body>
	<form action="<%=path%>/tjServlet" method="post"
		onsubmit="return checkForm(this);">
		<center>
			<h1>统计页面</h1>
		</center>
		<table align="center" border="0"
			style="border-radius: 5px; border: solid; border-width: 1px;">
			<tr>
				<td><input type="submit" value="提交"><input type="reset"
					value="重置"></td>
			</tr>
		</table>
	</form>

</body>
</html>

addServlet.servlet

package Com.servlet;

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

import Com.Dao.stuDao;
import Com.Dao.stuDaoimpl;
import Com.Entity.Student;

/**
 * Servlet implementation class tjServlet
 */
@WebServlet("/addServlet")
public class addServlet extends HttpServlet {
	private static final long serialVersionUID = 1L;
       
    /**
     * @see HttpServlet#HttpServlet()
     */
    public addServlet() {
        super();
        // TODO Auto-generated constructor stub
    }

	/**
	 * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
	 */
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		// TODO Auto-generated method stub
		response.getWriter().append("Served at: ").append(request.getContextPath());
	}

	/**
	 * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
	 */
	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		// TODO Auto-generated method stub
		request.setCharacterEncoding("UTF-8");
		response.setContentType("text/html;charset=UTF-8");
		
		HttpSession session = request.getSession();
		String username = (String)session.getAttribute("Username");
//		System.out.println(username);
		String userid = (String)request.getParameter("userid");
		int ppt = Integer.parseInt(request.getParameter("ppt").toString());
		int speech = Integer.parseInt(request.getParameter("speech").toString());
		int answer = Integer.parseInt(request.getParameter("answer").toString());
		int team = Integer.parseInt(request.getParameter("team").toString());
		int finish = Integer.parseInt(request.getParameter("finish").toString());
		
		
		Student stu = new Student(username,ppt,speech,answer,team,finish);
		stuDao s = new stuDaoimpl();
		s.Add(stu,userid);
		response.sendRedirect("success.jsp");
	}

}

stuDaoimpl.java

package Com.Dao;

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 Com.DB.Conn;
import Com.Entity.Student;

public class stuDaoimpl implements stuDao {

	Connection conn = null;
	PreparedStatement pre = null;
	ResultSet rs = null;
	Statement state = null;

	@Override
	public List<Student> Select() {
		List<Student> list = new ArrayList<Student>();
		String sql = "SELECT DISTINCT tb_stu.username,tb_stu.stuName FROM tb_stu WHERE tb_stu.username NOT IN (SELECT tb_grade.username FROM tb_grade)";
		conn = Conn.getConnection();
		try {
			state = conn.createStatement();
			rs = state.executeQuery(sql);
			while (rs.next()) {
				Student stu = new Student(rs.getString("username"), rs.getString("stuName"));
				list.add(stu);
			}

		} catch (SQLException e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		}
		return list;
	}

	@Override
	public List<Student> Search() {
		// TODO Auto-generated method stub
		List<Student> list = new ArrayList<Student>();
		String sql = "SELECT userid as 学号,tb_stu.stuName as 姓名,AVG(tb_grade.Sum) as 平均分 FROM tb_grade,tb_stu WHERE tb_grade.userid = tb_stu.username GROUP BY tb_grade.userid";
		conn = Conn.getConnection();
		try {
			state = conn.createStatement();
			rs = state.executeQuery(sql);
			while (rs.next()) {
				Student stu = new Student(rs.getString("学号"), rs.getString("姓名"), rs.getFloat("平均分"));
				list.add(stu);
			}
		} catch (SQLException e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		}

		return list;
	}

	@Override
	public void Add(Student stu, String userid) {
		// TODO Auto-generated method stub
		int i = 0;
		String username = stu.getStuNum();
		int ppt = stu.getPpt();
		int speech = stu.getSpeech();
		int answer = stu.getAnswer();
		int team = stu.getTeam();
		int finish = stu.getFinish();
		String sql1 = "Select Count(*) from tb_grade where username = ? and userid = ?";
		String sql2 = "insert into tb_grade values(1," + username + "," + userid + "," + ppt + "," + speech + ","
				+ answer + "," + team + "," + finish + ","+"null"+")";
		try {
			conn = Conn.getConnection();
			pre = conn.prepareStatement(sql1);
			pre.setObject(1, username);
			pre.setObject(2, userid);
			rs = pre.executeQuery();
			while (rs.next()) {
				i = rs.getInt(1);
			}
			// 不允许重复评分
			if (i == 0)
			{	conn = Conn.getConnection();
				pre = conn.prepareStatement(sql2);
				pre.execute();
			}
			// 插入分数

		} catch (SQLException e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
			System.out.println(e.getErrorCode());
		}

	}

}

 

二、web项目发布到Tomcat

 

这里使用的是Tomcat9,到官网下载。

步骤:

1、 将文件打包成war文件(ecilipse中export)

2、 将war文件复制到tomcat9 中webapps

3、 将tomcat启动

4、 将防火墙关闭

5、 打开360wifi

6、 Cmd管理员模式 ipconfig/all 查看ipv4地址

7、 手机连接登陆网址:ip地址+“:8080/Login/login.jsp”

 

三、mysql数据库

这里使用的是mysql5.7,也是到官网下载。还有navicat,最新版本即可。(附mysql数据库安装指南)

注意数据库连接时,导入mysql-connector-java-5.1.26-bin.jar

mysql表

tb_stu表

tb_grade表

id流水号和Sum求加权值的触发器:

CREATE TRIGGER tr_ID BEFORE INSERT ON tb_grade
FOR EACH ROW 
BEGIN
DECLARE n int;
SELECT IFNULL(MAX(id),0) INTO n FROM tb_grade;
SET NEW.id = n + 1;
SET NEW.Sum = (NEW.ppt*0.2+NEW.speech*0.4+NEW.answer*0.2+NEW.team*0.1+NEW.finish*0.1);
END;

 

Add:

新的login.html登录界面

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>用户登陆界面</title>
<link rel="stylesheet" type="text/css" href="css/styles.css">
</head>
<script type="text/javascript">
	function load(){
		alert("用户请登陆!");
	}
	function checkForm(form) {
		if (form.username.value == "") {
			alert("昵称不能为空!");
			form.username.focus();
			return false;
		}
		if (form.password.value == "") {
			alert("密码不能为空!");
			form.password.focus();
			return false;
		}

		return true;
	}
</script>

<body onload="load()">
	<form action="login_action.jsp" method="post" onsubmit="return checkForm(this)">
		<div class="jq22-container" style="padding-top: 0px">
			<div class="login-wrap">
				<div class="login-html">
					<input id="tab-1" type="radio" name=" tab" class="sign-in" checked><label
						for="tab-1" class="tab">登录</label> <input id="tab-2" type="radio"
						name="tab" class="sign-up"><label for="tab-2" class="tab"></label>
					<div class="login-form">
						<div class="sign-in-htm">

							<div class="group">
								<label for="user" class="label">账 号</label> <input id="user" name="username"
									type="text" class="input">
							</div>
							<div class="group">
								<label for="pass" class="label">密 码</label> <input id="pass" name="password"
									type="password" class="input" data-type="password">
							</div>
							<div class="group">
								<input id="check" type="checkbox" class="check" checked>
								<label for="check"><span class="icon"></span> 记 住 我</label>
							</div>
							<div class="group">
								<input type="submit" class="button" value="登    录">
							</div>
							<div class="hr"></div>
							<div class="foot-lnk">
								<a>物联网与无线传感网络</a>
							</div>
						</div>

					</div>
				</div>
			</div>

		</div>
	</form>

</body>
</html>

该登录界面是使用mobileSelect.js做的。考虑下手机端的适配。

新的grade.jsp评分界面

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ page import="java.sql.*"%>
<jsp:useBean id="Conn" scope="page" class="Com.DB.Conn" />
<html>

<head>
<meta charset="UTF-8" />
<meta name="renderer" content="webkit" />
<meta name="viewport"
	content="width=device-width, initial-scale=1.0, maximum-scale=1.0,user-scalable=0,uc-fitscreen=yes" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<meta name="format-detection" content="telephone=no" />
<title>评分界面</title>
<meta name="keywords" content="miniMobile的demo" />
<meta name="description" content="miniMobile是一个简单易用的移动框架!" />
<!-- miniMObile.css、js -->
<link rel="stylesheet" type="text/css" href="css/miniMobile.css" />
<script type="text/javascript" src="js/zepto.min.js"></script>
<script type="text/javascript" src="js/miniMobile.js"></script>
<!-- mobileSelect -->
<link rel="stylesheet" type="text/css"
	href="plugins/mobileSelect/mobileSelect.css">
<script src="plugins/mobileSelect/mobileSelect.js"
	type="text/javascript"></script>
<!-- icheck -->
<script src="plugins/icheck/icheck.js" type="text/javascript"
	charset="UTF-8"></script>
<!-- noUiSlider -->
<link rel="stylesheet" type="text/css"
	href="plugins/noUiSlider.10.0.0/nouislider.css" />
<script src="plugins/noUiSlider.10.0.0/nouislider.js"
	type="text/javascript" charset="UTF-8"></script>
<!-- switchery -->
<link rel="stylesheet" type="text/css"
	href="plugins/switchery/switchery.css" />
<script src="plugins/switchery/switchery.js" type="text/javascript"
	charset="UTF-8"></script>
<!-- iconfont -->
<link rel="stylesheet" type="text/css"
	href="plugins/fonticon/iconfont.css" />
<!-- animate.css -->
<link rel="stylesheet" type="text/css"
	href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.css" />
</head>

<body class="pb12 fadeIn animated">
	<header class="formheader w75 h11 f30 color8 bg-color-primary">
		<div class="ml3 mr3 pt2">
			<div class="h7 w7 fl">
				<a href="评分界面.html" class="icon color8 f46 iconfont icon-home_light"></a>
			</div>
			<input type="text" class="h7 w54 fl bg-color8 form-control"
				placeholder="请输入搜索内容" /> <span
				class="h7 f38 w8 bg-color-info fl t-c"> <i
				class="icon iconfont icon-search"></i>
			</span>
		</div>
	</header>
	<style>
.formheader {
	line-height: 0.7rem;
}

.formheader span {
	display: inline-block;
}

.formheader input {
	border: none;
}
</style>
	<%-- <%
	String str = (String) session.getAttribute("Username");
	if (str == null || str.equals(""))
		response.sendRedirect("login.html");
    %> --%>
    <%
	String path = request.getContextPath();
	%>
	<div class="p3 f30 f30 w75">
		<form name="form1" action="<%=path%>/addServlet" method="post"
			onSubmit="return checkForm(this)">
			<blockquote class="mb6 blockquote-success">
				<p class="f32">ppt制作20%,讲解40%,答疑20%,团队配合10%,实现10%,每项得分为100分,最后生成总分</p>
			</blockquote>

			<div class="pt2 pb2">
				<select id="classroom" onChange="selectClass(this.value)">
					<option value="请选择班级">请选择班级</option>
					<option value="151">151</option>
					<option value="152">152</option>
				</select>
				<select id="groupId" onChange="selectG(this.value)">
					<option value="请选择组号">请选择组号</option>
					<option value="1">1.手机端评分系统</option>
					<option value="2">2.自动驾驶汽车</option>
					<option value="3">3.校园卡,手机公交卡</option>
					<option value="4">4.VR&Google Daydream</option>
					<option value="5">5.无线网络wifi密码破</option>
					<option value="6">6.GPU,TPU,DPU,NPU,BPU</option>
					<option value="7">7.量子通信,量子计算</option>
					<option value="8">8.南京小学机器人教育市场分析</option>
					<option value="9">9.树莓派开发,安卓开发</option>
					<option value="10">10.OFDM/MIMO在5G中的应用</option>
				</select> <select id="stuNum" name="stuNum">
					<option value="请选择学号">被打分者学号</option>
				</select>
			</div>


			<div class="mt4 mb4">
				讲 解: <input type="text" name="speech" class="w59 h8 form-control"
					placeholder="<100">
			</div>
			<div class="mt4 mb4">
				答 疑: <input type="text" name="answer" class="w59 h8 form-control"
					placeholder="<100">
			</div>
			<div class="mt4 mb4">
				实 现: <input type="text" name="finish" class="w59 h8 form-control"
					placeholder="<100">
			</div>

			<div class="mt4 mb4">
				ppt: <input type="text" name="ppt" class="w59 h8 form-control"
					placeholder="<100">
			</div>
			<div class="mt4 mb4">
				团队: <input type="text" name="team" class="w59 h8 form-control"
					placeholder="<100">
			</div>

			<div class="t-c mt5">
				<input type="submit" class="btn f30 btn-primary radius10 p2 w50"
					value="提交表单" />
			</div>
		</form>
	</div>

	<script type="text/javascript">
		function checkForm(form1) {
			if (form1.ppt.value == "") {
				alert("ppt制作得分不能为0!");
				form1.ppt.focus();
				return false;
			}
			if (form1.speech.value == "") {
				alert("讲解得分不能为0!");
				form1.speech.focus();
				return false;
			}
			if (form1.answer.value == "") {
				alert("答疑得分不能为0!");
				form1.aanswer.focus();
				return false;
			}
			if (form1.team.value == "") {
				alert("团队合作得分不能为0!");
				form1.team.focus();
				return false;
			}
			if (form1.finish.value == "") {
				alert("实现得分不能为0!");
				form1.finish.focus();
				return false;
			}
			return true;
		}
		
		
	 	var array1 = new Array();
		var array2 = new Array();
		<%		int count1 = 0;
				int count2 = 0;
				ResultSet rs1 = null;
				ResultSet rs2 = null;
				Connection conn = null;
				Statement stmt1 = null;
				Statement stmt2 = null;
				String couName = "";
				String Classroom = "";
				String stuNum = "";
				int groupId = 0;
				String selectAll = "select distinct Classroom,couName,groupId from tb_stu order by groupId";
				conn = Conn.getConnection();
				stmt1 = conn.createStatement();
				stmt2 = conn.createStatement();
				rs1 = stmt1.executeQuery(selectAll);

				while (rs1.next()) {
					Classroom = rs1.getString("Classroom");
					couName = rs1.getString("couName");
					groupId = rs1.getInt("groupId");%>
				array1[<%=count1%>] = new Array("<%=Classroom%>","<%=couName%>","<%=groupId%>");
				<%count1++;
				}

				String selectNum = "select username,groupId,Classroom from tb_stu ";
				rs2 = stmt2.executeQuery(selectNum);
				while (rs2.next()) {
					groupId = rs2.getInt("groupId");
					stuNum = rs2.getString("username");
					Classroom = rs2.getString("Classroom");%>
					array2[<%=count2%>] = new Array("<%=stuNum%>","<%=groupId%>","<%=Classroom%>");
					<%count2++;
				}%>
		function selectClass(id) {
			document.getElementById("groupId").length = 1;
			for (var i = 0; i < array1.length; i++) {
				if (array1[i][0] == id) {
					document.getElementById("groupId").options[document
							.getElementById("groupId").length] = new Option(
							array1[i][2] + "\t" + "、" + array1[i][1]);
				}
			}
		}

		function selectG(id) {
			document.getElementById("stuNum").length = 1;
			var temp = document.getElementById("classroom").value ;
			
			alert(id);
			alert(id.length);
			alert(id.charAt(0));
			alert(id.charAt(1)+"");
			var num = "";
			
			for(var j = 0;j< id.length; j++){
				if((id.charAt(j)+"").equals("\t")){
					break;
				}else{
					num = num + id.charAt(j);
				}
			}
			
			alert(num);
			
			//Str = id.charAt(0);  //第10组和第一组是一样的 ,待解决的问题
		   // alert(Str);
			for (var i = 0; i < array2.length; i++) {
				if (array2[i][1] == num && array2[i][2] == temp) {
					document.getElementById("stuNum").options[document
							.getElementById("stuNum").length] = new Option(
							array2[i][0]);
				}
			}

		}

		/*  var classArr = [ '网嵌151', '网嵌152' ];

		var memberArr = [ {
			id : '1',
			value : '手机端评分系统',
			childs : [ {
				id : '11',
				value : ''
			}, {
				id : '12',
				value : '子寅'
			}, {
				id : '13',
				value : '文港'
			}, {
				id : '14',
				value : '御寒'
			},

			]
		}, {
			id : '2',
			value : '湖北',
			childs : [ {
				id : '21',
				value : '武汉'
			}, {
				id : '22',
				value : '黄石'
			}, {
				id : '23',
				value : '襄樊'
			}, {
				id : '24',
				value : '荆州'
			}, {
				id : '25',
				value : '鄂州'
			} ]
		}, {
			id : '3',
			value : '河北',
			childs : [ {
				id : '31',
				value : '石家庄'
			}, {
				id : '32',
				value : '唐山'
			}, {
				id : '33',
				value : '秦皇岛'
			}, {
				id : '34',
				value : '邯郸'
			}, {
				id : '35', 
				value : '邢台'
			} ]
		} ]
		 */ 
		//mobileselect 班级选择框
		var mobileSelect1 = new MobileSelect({
			trigger : '#selectClass',
			title : '班级选择',
			wheels : [ {
				data : classArr
			} ],
			position : [ 0 ], //初始化定位 打开时默认选中的哪个 如果不填默认为0
			transitionEnd : function(indexArr, data) {
				console.log(data);
			},
			callback : function(indexArr, data) {
				console.log(data);
				alert(data);
			}
		});

		//mobileselect 项目名+姓名选择框
		var mobileSelect2 = new MobileSelect({
			trigger : '#selectMem',
			title : '成员选择',
			wheels : [ {
				data : memberArr
			} ],
			position : [ 0, 0 ], //初始化定位 打开时默认选中的哪个 如果不填默认为0
			callback : function(indexArr, data) {
				console.log(JSON.stringify(data));
				/* alert(JSON.stringify(data)); */
				alert(memberArr[0][0]);
			}
		});

		//icheck 多选框插件
		$('.check').iCheck({
			checkboxClass : 'ui-checkbox check-primary',
			radioClass : 'ui-radio check-primary'
		});
		//noUiSlider 滑块
		var slider = document.getElementById('noUiSlider');
		noUiSlider.create(slider, {
			start : [ 20, 80 ],
			connect : true,
			range : {
				'min' : 0,
				'max' : 100
			}
		});
		//switchery
		var elem = document.querySelector('.js-switch');
		var switchery = new Switchery(elem, {
			size : 'small'
		});
	</script>

</body>

</html>

 

评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值