开学测试——河北省重大技术需求征集系统原型
这次老师要求嵌套模板，自己并没有嵌套成功，里面用到了html、css、JavaScript(JS)、jQuery
自己使用的技术以及环境
技术：html、css、BootStrap、jsp、el表达式、Druid
环境：IDEA、Tomcat-9.0.55、MySQL数据库
首先是用户注册功能
（1）用户注册需要填报用户姓名、密码、重复密码、手机号码、所属单位五项内容；
（2）验证密码和重复密码保持一致；
（3）验证手机号码为11位数字。
密码与重复密码相同，可以使用JS进行判断，也可以在数据库建立一个重复密码字段，这里我采用的是第二种方法；
验证手机号为11位数字，可以采用HTML中的四则表达式进行限制，也可以使用JS进行判断弹出，这里我使用的是四则表达式进行限制
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>注册</title> <style> *{ margin: 0px; padding: 0px; box-sizing: border-box; } body{ background: url("img/xk.jfif"); } .rg_layout{ width: 900px; height: 500px; border:5px solid #EEEEEE; background: white; margin-left: auto; margin-right: auto; margin-top: 20px; } .rg_left{ float: left; margin: 15px; } .rg_center{ float: left; width: 450px; } .rg_right{ float: right; margin: 15px; } </style> <style type="text/css"> .rg_p1{ color: #0000FF; font-size: 25px; } .rg_p2{ color: #00FFFF; font-size: 25px; } a{ text-decoration: none; color: #eb7350; font-size: 15px; } .td_left{ width: 100px; text-align: right; height: 45px; } .td_right{ padding-left: 50px; } #name,#password,#password1,#phone,#company{ width: 240px; height: 32px; border: 1px solid black; border-radius: 5px; padding-left: 5px; } #btn{ width: 150px; height: 40px; background: yellow; border: 1px solid yellow; } </style> </head> <body> <div class="rg_layout"> <div> <h2 align="center">欢迎使用河北征集注册系统</h2><br> </div> <div class="rg_left"> <p class="rg_p1">新用户注册</p> <p class="rg_p2">USER REGISTER</p> </div> <div class="rg_center"> <div class="rg_form"> <form action="/Register" method="post"> <table> <tr> <td class="td_left">姓名：</td> <td class="td_right"><input type="text" name="name" id="name" placeholder="请输入姓名"></td> </tr> <tr> <td class="td_left">密码：</td> <td class="td_right"><input type="password" name="password" id="password" placeholder="请输入密码"></td> </tr> <tr> <td class="td_left">重复密码：</td> <td class="td_right"><input type="password" name="password1" id="password1" placeholder="请重复密码"></td> </tr> <tr> <td class="td_left">手机号：</td> <td class="td_right"><input type="text" name="phone" id="phone" placeholder="请输入真实手机号" onkeyup="this.value=this.value.replace(/\D/g,'')" maxlength="11"></td> </tr> <tr> <td class="td_left">单位：</td> <td class="td_right"><input type="text" name="company" id="company" placeholder="请输入所属单位"></td> </tr> <tr> <td colspan="2" align="center"><input type="submit" value="注册" id="btn"></td> </tr> </table> </form> </div> </div> <div class="rg_right"> <p>已有帐号？<a href="Login.jsp">登录</a></p> </div> </div> </body> </html>
接下来是登陆界面
（1）用户名不在数据库中，提示“该用户不存在”。
（2）密码错误，提示“密码错误，请重新录入”。
（3）录入验证码信息与界面显示验证码码信息不一致，提示“验证码码错误”。
（4）上述信息录入正确，页面跳转到系统主界面。
验证码的实现使用的是Servlet，这个是自己在学习的时候写的
package Servlet; import javax.imageio.ImageIO; import javax.servlet.*; import javax.servlet.http.*; import javax.servlet.annotation.*; import java.awt.*; import java.awt.image.BufferedImage; import java.io.IOException; import java.util.Random; @WebServlet(name = "CheckCode", value = "/CheckCode") public class CheckCode extends HttpServlet { @Override protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { //创建一个对象 int width = 100; int height = 50; BufferedImage image = new BufferedImage(width,height,BufferedImage.TYPE_3BYTE_BGR); //填充背景颜色 Graphics g = image.getGraphics();//画笔 g.setColor(Color.cyan);//设置画笔颜色 g.fillRect(0,0,width,height); //画边框 g.setColor(Color.black); g.drawRect(0,0,width-1,height-1); //随机码 String str = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789"; Random ran = new Random(); StringBuilder sb = new StringBuilder(); for(int i=1;i<=4;i++){ int index = ran.nextInt(str.length()); char ch = str.charAt(index); sb.append(ch); g.drawString(ch+"",width/5*i,height/2); } String checkCode_session = sb.toString(); //将验证码存入session request.getSession().setAttribute("checkCode_session",checkCode_session); //随机划线 g.setColor(Color.BLUE); for(int i=1;i<4;i++){ int x1 = ran.nextInt(width); int y1 = ran.nextInt(height); int x2 = ran.nextInt(width); int y2 = ran.nextInt(height); g.drawLine(x1,y1,x2,y2); } //图片输出 ImageIO.write(image,"png",response.getOutputStream()); } @Override protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { this.doPost(request,response); } }
登陆这一块使用的是jsp和el表达式技术，在Servlet中将前台接收的数据与数据库信息进行比较，如果错误，将错误信息存入jsp的域对象中
package Servlet; import Bean.User; import dao.UserDaoImpl; import javax.servlet.*; import javax.servlet.http.*; import javax.servlet.annotation.*; import java.io.IOException; @WebServlet(name = "Login", value = "/Login") public class Login extends HttpServlet { @Override protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { this.doPost(request, response); } @Override protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { request.setCharacterEncoding("UTF-8"); response.setContentType("text/html;charset=utf-8"); String phone = request.getParameter("phone"); String password = request.getParameter("password"); String checkcode = request.getParameter("checkcode"); User user = new User(); user.setPhone(phone); user.setPassword(password); UserDaoImpl user1 = new UserDaoImpl(); //获取生成的验证码 HttpSession session = request.getSession(); String checkCode_session = (String) session.getAttribute("checkCode_session"); //删除session中的验证码，保证验证码一次有效 session.removeAttribute("checkCode_session"); if(checkCode_session != null && checkCode_session.equalsIgnoreCase(checkcode)){ if(user1 != null){ response.getWriter().append("登陆成功"); session.setAttribute("phone",phone); response.sendRedirect(request.getContextPath()+"/List"); }else{ response.getWriter().append("登陆失败，用户名或密码错误"); request.setAttribute("login_error","错误，用户不存在/用户名或密码错误"); request.getRequestDispatcher("/Login.jsp").forward(request,response); } }else{ request.setAttribute("code_error","验证码错误"); request.getRequestDispatcher("/Login.jsp").forward(request,response); } } }
剩下的功能就是增删改查了，这里就不再上传源码了。
感想：
首先是这次没有使用JS和JQuery的原因：假期中确实学习了，但是由于使用jsp+servlet+JavaBean敲了一个完整的增删改查（也算是一个模板），所以就没有选择使用JS。
在我敲代码的过程中我发现el表达式的一个问题，数据的名称中不能有大写字母，一旦有大写字母，tomcat就会报500的错误
<c:forEach items="${demandlist}" var="demandlist" varStatus="s">
<tr>
<td>${s.count}</td>
<td>${demandlist.dname}</td>
<td>${demandlist.dsummary}</td>
<td>${demandlist.method}</td>
<td>${demandlist.cooperation}</td>
<td>${demandlist.money}</td>
<td>${demandlist.status}</td>
<td>${demandlist.time}</td>
</tr>
</c:forEach>
在之后的学习中，自己有必要跟紧时代的潮流，少使用jsp，因为这个东西写好之后是真的不好维护。
这次的测试之后，自己要学习嵌套模板了，自己做一个模板，或者使用一个商用模板。
最后，在这次的练习中，自己有必要加快代码的编写速度，不然一个项目需要的时间会很长。可以专注于一个技术（jdbc或者Druid）。
