iCoding项目----题库页面实现

最新推荐文章于 2024-09-08 21:03:34 发布

原创最新推荐文章于 2024-09-08 21:03:34 发布 · 640 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javaweb

在读程序猿专栏收录该内容

8 篇文章

订阅专栏

本文围绕iCoding项目的题库页面实现展开，介绍了功能分页面，包括首页、题库、题解等页面。阐述了题库页面问题动态展示与翻页、查找功能的实现方式，如通过ajax传参等。还说明了具体题目页面通过超链接传参到对应servlet的实现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

iCoding项目----题库页面实现

功能简介–分页面

首页
题库页面
题解页面
讨论区
吐槽
登陆注册
个人空间

题库页面实现

问题动态展示和翻页

①.通过ajax向getpageServlet传两个参数currentPage和type（question/answer，代表问题页或题解页）。
②. 在getpageServlet中向Page实体类中封装currentPage，调用service中getAnsPage方法，再调用Dao层中的getAnsPage方法返回封装完成的Page（内涵当前页的具体问题，问题的qid，title）
③.ajax的返回函数代码为

			success:function(dataJson){	
					//显示部分
					var $tbody = $(".questionContent");
					$tbody.empty();
					var queList = dataJson.queList;
					var question = "question";
					for(i=0;i<queList.length;i++)
					{
						var $tr = $("<tr></tr>");
						$tr.html(
								"<td></td>"+
                        		 "<td><span style='color: grey;'>"+queList[i].qid+"</span></td>"+
                        		 "<td><a href='getquestionByid?qid="+queList[i].qid+"&uid=0&type="+question+"'>"+queList[i].questionTitle+"</a></td>"+
                        		 "<td><span style='color: grey;'>简单</span></td>"+
                        		 "<td><span class='label label-success round'>100%</span></td>"
                        		);
                        $tbody.append($tr);
						
					}
					//翻页部分
					var maxPage = dataJson.pageNum;
					var $li = $(".flag");
					for(var i=maxPage;i>0;i--)
					{
						var $myli = $("<li class='#' id='"+i+"'></li>");
						$myli.html(
									"<a href = '#'>"+i+"</a>"
									);
						$myli.click(function(){							
							changePage( $(this).text() );
						});
						$li.after($myli);
						
					}
					$("#1").attr("class","active");
					$("#page_sta").click(function(){
						changePage( 1 );
					});
					$("#page_end").click(function(){
						changePage( maxPage );
					});
				}

④. Dao层具体实现为

	public Page getPage(Page page) {
		Connection conn = null;
		PreparedStatement ps = null;
		ResultSet rs = null;
		
		try {	
			conn = JDBCUtil.getConnection();
			String sql = "select * from questionbank limit ?,?";
			ps = conn.prepareStatement(sql);
			int firstParam = (page.getCurPage()-1)*page.getQueNum();
			ps.setInt(1, firstParam);
			ps.setInt(2, page.getQueNum());
			rs = ps.executeQuery();
			
			while(rs.next()) {
				//填充当前页展示的具体问题
				Code code = new Code();
				code.setQid(rs.getInt(1));
				code.setQuestionTitle(rs.getString(2));
				code.setQuestionDescription(rs.getString(3));
				code.setInputFormat(rs.getString(4));
				code.setOutputFormat(rs.getString(5));
				code.setInputSample(rs.getString(6));
				code.setOutputSample(rs.getString(7));		
				
				List<Code> codeList = page.getQueList();
				codeList.add(code);
			}
			//codes中题解的总数
			sql = "select count(1) from codes";
			ps = conn.prepareStatement(sql);
			rs = ps.executeQuery();
			rs.next();
			int totalNum = rs.getInt(1);
			int pageNum = 1;
			if(totalNum<page.getQueNum()) {
				pageNum = 1;
			}else if(totalNum%page.getQueNum()==0) {
				pageNum = totalNum/page.getQueNum();
			}else if(totalNum%page.getQueNum()!=0) {
				pageNum = totalNum/page.getQueNum()+1;
			}
			page.setPageNum(pageNum);
			
			return page;
			
		} catch (ClassNotFoundException e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		} catch (SQLException e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		} finally {
			try {
				JDBCUtil.closeConnection(rs,ps, conn);
			} catch (SQLException e) {
				// TODO Auto-generated catch block
				e.printStackTrace();
			}
		}
		return page;
	}

⑤.翻页函数

	function changePage(num)
	{
		var question = "question";
		$.ajax({
			url:"getPage?currentPage="+num+"&type="+question,
			type:"post",
			data:{},
			dataType:"json",
			success:function(dataJson){	
				var $tbody = $(".questionContent");
				$tbody.empty();
				var queList = dataJson.queList;
				var question = "question";
				for(i=0;i<queList.length;i++)
				{
					var $tr = $("<tr></tr>");
					$tr.html(
							"<td></td>"+
                    		 "<td><span style='color: grey;'>"+queList[i].qid+"</span></td>"+
                    		 "<td><a href='getquestionByid?qid="+queList[i].qid+"&uid=0&type="+question+"'>"+queList[i].questionTitle+"</a></td>"+
                    		 "<td><span style='color: grey;'>简单</span></td>"+
                    		 "<td><span class='label label-success round'>100%</span></td>"
                    		);
                    $tbody.append($tr);	
				}
				//当前是那一页
				for(var j=1;j<=dataJson.pageNum;j++)
				{
					$("#"+j+"").attr("class","#");
				}
				$("#"+num+"").attr("class","active");				
			}			
		});	
	}

查找功能
①ajax代码

			$("#searchbutton").click(function(){
				
				$.ajax({
					url:"searchServlet?curpage="+1,
					type:"post",
					data:{
						"searchContent":$("#search_content").val()
					},
					dataType:"json",
					success:function(dataJson)
					{
						var $tbody = $(".questionContent");
						$tbody.empty();
						var queList = dataJson.queList;
						var question = "question";
						for(i=0;i<queList.length;i++)
						{
							var $tr = $("<tr></tr>");
							$tr.html(
									"<td></td>"+
	                        		 "<td><span style='color: grey;'>"+queList[i].qid+"</span></td>"+
	                        		 "<td><a href='getquestionByid?qid="+queList[i].qid+"&type="+question+"'>"+queList[i].questionTitle+"</a></td>"+
	                        		 "<td><span style='color: grey;'>简单</span></td>"+
	                        		 "<td><span class='label label-success round'>100%</span></td>"
	                        		);
	                        $tbody.append($tr);
							
						}
						var lastmaxpage = ${maxpage};
						for(var i=1;i<=lastmaxpage;i++)
						{
							$("#"+i+"").remove();
						}
						var $li = $(".flag");	
						var $myli = $("<li class='#' id='1'></li>");
						$myli.html(
									"<a href = '#'>1</a>"
								  );
						$li.after($myli);
						$("#1").attr("class","active");
					}
				});
			});
			
		});

②.Dao层实现

	public Page searchQueDao(String SearchContent,Page page) {
		Connection conn = null;
		PreparedStatement ps = null;
		ResultSet rs = null;
		try {
			conn = JDBCUtil.getConnection();
			//模糊匹配
			String sql = "select * from questionbank where questionTitle like '%"+SearchContent+"%';";
			ps = conn.prepareStatement(sql);
			//ps.setString(1, SearchContent);
			rs = ps.executeQuery();
			
			
			for(int first = 1;rs.next();first++)
			{
				Code code = new Code();
				code.setQid(rs.getInt(1));
				code.setQuestionTitle(rs.getString(2));
				code.setQuestionDescription(rs.getString(3));
				code.setInputFormat(rs.getString(4));
				code.setOutputFormat(rs.getString(5));
				code.setInputSample(rs.getString(6));
				code.setOutputSample(rs.getString(7));		
				
				
				List<Code> codeList = page.getQueList();
				codeList.add(code);
				page.setQueNum(first);
			}
			int pagenum = 1;
			page.setPageNum(pagenum);
			
			return page;
		} catch (ClassNotFoundException e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		} catch (SQLException e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		}finally {
			try {
				JDBCUtil.closeConnection(rs,ps, conn);
			} catch (SQLException e) {
				// TODO Auto-generated catch block
				e.printStackTrace();
			}
		}
		return page;
	}

具体题目页面

通过超链接
"<td><a href='getquestionByid?qid="+queList[i].qid+"&type="+question+"'>"+queList[i].questionTitle+"</a></td>"
将参数qid，（uid），type传到getquestionByidservlet–type用来区分是题目页面还是题解页面。
getquestionByidservlet代码：

@WebServlet("/getquestionByid")
public class getQuestionByidServlet extends HttpServlet {
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		request.setCharacterEncoding("utf-8");
		String qid = request.getParameter("qid");
		String type = request.getParameter("type");
			
		Code code = new Code();
		code.setQid(Integer.valueOf(qid));
				
		if("question".equals(type))
		{
			GetQuestionByidService gs = new GetQuestionByidServiceImpl();
			code = gs.getQuestionByidService(code);
			request.setAttribute("qid", code.getQid());
			request.setAttribute("tit", code.getQuestionTitle());
			request.setAttribute("des", code.getQuestionDescription());
			request.setAttribute("format_in", code.getInputFormat());
			request.setAttribute("format_out", code.getOutputFormat());
			request.setAttribute("example_in", code.getInputSample());
			request.setAttribute("example_out", code.getOutputSample());
			request.getRequestDispatcher("questionEditor.jsp").forward(request, response);
		}
		if("answer".equals(type))
		{
			List<Code> codes = new ArrayList<Code>();
			String uidStr = request.getParameter("uid");
			code.setUid(Integer.valueOf(uidStr));
			
			GetQuestionByidService gs = new GetQuestionByidServiceImpl();
			codes = gs.getQuestionByidAnsService(code);					
			
			request.setAttribute("qid", codes.get(1).getQid());
			request.setAttribute("tit", codes.get(1).getQuestionTitle());
			request.setAttribute("des", codes.get(1).getQuestionDescription());
			request.setAttribute("code", codes.get(1).getCode());
			request.setAttribute("author",codes.get(1).getUsername());
			request.setAttribute("pertit", codes.get(0).getQuestionTitle());
			request.setAttribute("perqid", codes.get(0).getQid());
			request.setAttribute("peruid", codes.get(0).getUid());
			request.setAttribute("nexttit", codes.get(2).getQuestionTitle());
			request.setAttribute("nextqid", codes.get(2).getQid());
			request.setAttribute("nextuid", codes.get(2).getUid());
			request.getRequestDispatcher("questionAns.jsp").forward(request, response);
		}
		
	}