1.请编写代码实现登录效果(5分)
要求:
1)手写出相应的HTML和CSS代码
2)字体大小12px,表格宽300px,按钮行占两列并水平居中,
3)可以写在style节点内,也可使用行内CSS或者外部.css文件,但必须有核心代码
Css:
1 table 2 { 3 font-size: 12px; 4 border: solid 1px blue; 5 border-collapse: collapse; 6 width: 300px; 7 } 8 td 9 { 10 font-size: 12px; 11 border: solid 1px blue; 12 }
HTML:
1 <table> 2 <tr> 3 <td>姓名</td> 4 <td> 5 <input type="text" name="uname"> 6 </td> 7 </tr> 8 <tr> 9 <td>密码</td> 10 <td> 11 <input type="text" name="pwd"> 12 </td> 13 </tr> 14 <tr> 15 <td colspan="2" align="center"> 16 <input type="submit" value="登录"> 17 </td> 18 </tr> 19 </table>
2.请编写代码实现下图效果。(6分)
要求:
1)表格使用table完成
2)当鼠标移动到指定表格,显示对应的背景颜色
3)鼠标离开时,颜色返回成白色
HTML:
1 <table> 2 <tr> 3 <td id="td1" onmouseover="changeColor('td1','red')" onmouseout="changeColor('td1','#ffffff')">红色 4 </td> 5 <td id="td2" onmouseover="changeColor('td2','blue')" onmouseout="changeColor('td2','#ffffff')">蓝色 6 </td> 7 <td id="td3" onmouseover="changeColor('td3','green')" onmouseout="changeColor('td3','#ffffff')">绿色 8 </td> 9 </tr> 10 </table>
CSS:
1 <style type="text/css"> 2 table 3 { 4 font-size: 12px; 5 border: solid 1px blue; 6 border-collapse: collapse; 7 width: 300px; 8 } 9 td 10 { 11 font-size: 12px; 12 border: solid 1px blue; 13 } 14 </style>
JS:
1 <script> 2 function changeColor(id,obj) 3 { 4 //获得div设置style的background的值 5 document.getElementById(id).style.background=obj; 6 } 7 </script>
3. 请编码实现如下效果。(9分)
要求:
1)当“重复密码”框失去焦点时,判断两次密码一致性,如果不一致,在后面文本框中显示上图效果,如果一致,“两次密码不一致”提示消失
2)年龄判断,要求年龄必须是数字
HTML:
1 <table> 2 <tr> 3 <td>姓名</td> 4 <td> 5 <input type="text" id="uname" name="username" onblur="checkname()"> 6 </td> 7 <td id="namemess"></td> 8 </tr> 9 <tr> 10 <td>密码</td> 11 <td> 12 <input type="password" id="pwd" name="pwd"> 13 </td> 14 <td></td> 15 </tr> 16 <tr> 17 <td>重复密码</td> 18 <td> 19 <input type="password" id="pwd2" name="pwd2" onblur="checkpwd()"> 20 </td> 21 <td id="pwdmsg"></td> 22 </tr> 23 <tr> 24 <td>年龄</td> 25 <td> 26 <input type="text" id="age" name="age" onblur="checkage()"> 27 </td> 28 <td id="agemsg"></td> 29 </tr> 30 <tr> 31 <td>性别</td> 32 <td> 33 <input type="radio" value="1" name="sex">男 34 <input type="radio" value="0" name="sex">女 35 </td> 36 </tr> 37 <tr> 38 <td>爱好</td> 39 <td> 40 <input type="checkbox" value="1" name="aihao">足球 41 <input type="checkbox" value="2" name="aihao"> 42 蓝球 43 <input type="checkbox" value="3" name="aihao"> 44 羽毛球 45 <input type="checkbox" name="aihao" value="4">乒乓球 46 </td> 47 </tr> 48 <tr> 49 <td>班级</td> 50 <td> 51 <select name="banji"> 52 <option value="1">一年级一班</option> 53 <option value="2">一年级2班</option> 54 <option value="3">一年级3班</option> 55 <option value="4">一年级4班</option> 56 </select> 57 </td> 58 </tr> 59 <tr> 60 <td> 61 <input type="reset" value="重置"> 62 </td> 63 <td align="center"> 64 <input type="submit" value="提交"> 65 </td> 66 </tr> 67 </table> 68
CSS:
1 <style type="text/css"> 2 table 3 { 4 font-size: 12px; 5 border: solid 1px blue; 6 border-collapse:collapse; 7 } 8 td 9 { 10 border:solid 1px blue; 11 } 12 </style>
JS:
1 <script type="text/javascript"> 2 function checkpwd() 3 {//验证两次密码是否一致 4 var pwd1 = document.getElementById("pwd"); 5 var v1 = pwd1.value; 6 var pwd2 = document.getElementById("pwd2"); 7 var v2 = pwd2.value; 8 var pwdmsg = document.getElementById("pwdmsg"); 9 if(v1==v2) 10 { 11 pwdmsg.innerHTML=""; 12 } 13 else 14 { 15 pwdmsg.innerHTML="两次密码不一样"; 16 } 17 } 18 function checkage() 19 {//验证年龄是不是数字 20 var age = document.getElementById("age"); 21 var v1 = age.value; 22 var agemsg = document.getElementById("agemsg"); 23 if(isNaN(v1)) 24 { 25 agemsg.innerHTML="年龄必须是数字"; 26 } 27 else 28 { 29 agemsg.innerHTML=""; 30 } 31 } 32 </script>
4. 编写程序实现登录功能
要求:
1)页面使用jsp表单提交,包含姓名和密码
2)提交目的地为Servlet,在Servlet中获得表单提交的数据
3)在Servlet中判断,如果姓名是“张三”,密码是“123”,返回客户登录成功
4)写出核心代码即可
JSP:
1 <form action="login" method="post"> 2 <table> 3 <tr> 4 <td>姓名</td> 5 <td> 6 <input type="text" name="uname"> 7 </td> 8 </tr> 9 <tr> 10 <td>密码</td> 11 <td> 12 <input type="text" name="pwd"> 13 </td> 14 </tr> 15 <tr> 16 <td colspan="2" align="center"> 17 <input type="submit" value="登录"> 18 </td> 19 </tr> 20 </table> 21 </form>
Servlet:
1 public class LoginServlet extends HttpServlet 2 { 3 protected void doGet(HttpServletRequest req, HttpServletResponse resp) 4 throws ServletException, IOException 5 { 6 doPost(req, resp); 7 } 8 9 protected void doPost(HttpServletRequest req, HttpServletResponse resp) 10 throws ServletException, IOException 11 { 12 req.setCharacterEncoding("utf-8"); 13 String name = req.getParameter("uname"); 14 String pwd = req.getParameter("pwd"); 15 System.out.println(name + "=" + pwd); 16 resp.setContentType("text/html;charset=utf-8"); 17 if (name.equals("张三") && pwd.equals("123")) 18 { 19 resp.getWriter().println("登录成功"); 20 } 21 else 22 { 23 resp.getWriter().println("登录失败"); 24 } 25 } 26 }
Web.xml配置:
1 <servlet> 2 <servlet-name>login</servlet-name> 3 <servlet-class>com.bjsxtch01.LoginServlet</servlet-class> 4 </servlet> 5 <servlet-mapping> 6 <servlet-name>login</servlet-name> 7 <url-pattern>/login</url-pattern> 8 </servlet-mapping>
5. 以下出版社管理系统部分模块,按照要求实现对应功能代码。(9分)
1)在数据库中表结构如下书本表
Name |
NO |
Price |
Publisher |
Android开发基础 |
1001 |
80 |
清华大学出版社 |
2)在Servlet中接收表单提交的书籍信息,调用DAO类存入数据库中
3)编写Servlet实现,DAO实现,JavaBean实现
4)可以没有表单代码和DBConnection实现,核心代码即可
Servlet:
1 protected void doGet(HttpServletRequest req, HttpServletResponse resp) 2 throws ServletException, IOException 3 { 4 this.doPost(req, resp); 5 } 6 protected void doPost(HttpServletRequest req, HttpServletResponse resp) 7 throws ServletException, IOException 8 { 9 req.setCharacterEncoding("utf-8"); 10 String name = req.getParameter("bookname"); 11 String no = req.getParameter("no"); 12 String price = req.getParameter("price"); 13 String publisher = req.getParameter("publisher"); 14 Book book = new Book(); 15 book.setName(name); 16 book.setNo(no); 17 book.setPrice(price==null?0.0:Double.parseDouble(price)); 18 book.setPublisher(publisher); 19 BookDAO dao = new BookDAO(); 20 boolean b = dao.addBook(book); 21 if(b) 22 { 23 req.getRequestDispatcher("success.jsp").forward(req, resp); 24 } 25 else 26 { 27 req.getRequestDispatcher("error.jsp").forward(req, resp); 28 } 29 }
DAO:
1 public boolean addBook(Book book) 2 { 3 boolean b = false; 4 try 5 { 6 MyConnection mcon = new MyConnection(); 7 Connection conn = mcon.getConn(); 8 String sql = "insert into student(name,no,price,publisher)" + " values('"+book.getName()+"','"+book.getNo()+"',"+book.getPrice()+",'"+book.getPublisher()+"')"; 9 System.out.println(sql); 10 Statement st = conn.createStatement(); 11 st.executeUpdate(sql); 12 b = true; 13 mcon.closeConn(conn); 14 } 15 catch (SQLException e) 16 { 17 e.printStackTrace(); 18 } 19 return b; 20 }
JavaBean:
1 public class Book 2 { 3 private String name; 4 private String no; 5 private Double price; 6 private String publisher; 7 public String getName() 8 { 9 return name; 10 } 11 public void setName(String name) 12 { 13 this.name = name; 14 } 15 public String getNo() 16 { 17 return no; 18 } 19 public void setNo(String no) 20 { 21 this.no = no; 22 } 23 public Double getPrice() 24 { 25 return price; 26 } 27 public void setPrice(Double price) 28 { 29 this.price = price; 30 } 31 public String getPublisher() 32 { 33 return publisher; 34 } 35 public void setPublisher(String publisher) 36 { 37 this.publisher = publisher; 38 } 39 }
6. 以下出版社管理系统部分模块,按照要求实现对应功能代码。(9分)
1)在页面中显示书本列表
Name |
NO |
Price |
Publisher |
操作 |
Android开发基础 |
1001 |
80 |
清华大学出版社 |
删除 |
Core Java |
1002 |
90 |
机械工业出版社 |
删除 |
云计算编程 |
1003 |
100 |
科技出版社 |
删除 |
2)在Servlet中调用DAO类查询book表
3)将得到的结果显示在页面上,增加删除链接
4)显示时要求jsp中使用JSTL+EL输出结果
5)写出DAO,Servlet和jsp核心代码即可
DAO:
1 public List<Book> getAll() 2 { 3 List<Book> lb = new ArrayList<Book>(); 4 String sql = "select * from book"; 5 Connection conn = new MyConnection().getConn(); 6 try { 7 Statement st = conn.createStatement(); 8 ResultSet rs = st.executeQuery(sql); 9 while(rs.next()) 10 { 11 Book book = new Book(); 12 book.setName(rs.getString("name")); 13 book.setNo(rs.getString("no")); 14 book.setPrice(rs.getDouble("price")); 15 book.setPublisher(rs.getString("publisher")); 16 lb.add(book); 17 } 18 } 19 catch (SQLException e) 20 { 21 e.printStackTrace(); 22 } 23 return lb; 24 }
Servlet:
1 public class GetBookServlet extends HttpServlet 2 { 3 protected void doGet(HttpServletRequest req, HttpServletResponse resp) 4 throws ServletException, IOException 5 { 6 this.doPost(req, resp); 7 } 8 9 protected void doPost(HttpServletRequest req, HttpServletResponse resp) 10 throws ServletException, IOException 11 { 12 req.getRequestURI(); 13 BookDAO dao = new BookDAO(); 14 List<Book> lb = dao.getAll(); 15 req.setAttribute("booklist", lb); 16 req.getRequestDispatcher("bookList.jsp").forward(req, resp); 17 } 18 }
JSP:
1 <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> 2 <%@ 3 taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%> 4 <html> 5 <head> 6 <title>书本列表</title> 7 </head> 8 <body> 9 <table> 10 <tr> 11 <td>Name</td> 12 <td>NO</td> 13 <td>Price</td> 14 <td>Publisher</td> 15 <td>操作</td> 16 </tr> 17 <c:forEach items="${booklist }" var="book"> 18 <tr> 19 <td>${book.name }</td> 20 <td>${book.no }</td> 21 <td>${book.price }</td> 22 <td>${book.publisher }</td> 23 <td> 24 <a href="delete?no=${book.no }">删除</a> 25 </td> 26 </tr> 27 </c:forEach> 28 </table> 29 </body> 30 </html>
7. 以下出版社管理系统部分模块,按照要求实现对应功能代码。(9分)
1)点击对应书本的删除联接,删除对应的图书信息
Name |
NO |
Price |
Publisher |
操作 |
Android开发基础 |
1001 |
80 |
清华大学出版社 |
删除 |
Core Java |
1002 |
90 |
机械工业出版社 |
删除 |
云计算编程 |
1003 |
100 |
科技出版社 |
删除 |
2)在Servlet中接收要删除的图书NO,并调用DAO类中的删除方法传入
3)删除操作完成后,转发到查询请求
4)写出DAO,Servlet,web.xml和jsp核心代码即可
HTML:
1 <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> 2 <%@ 3 taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%> 4 <html> 5 <head> 6 <title>书本列表</title> 7 </head> 8 <body> 9 <table> 10 <tr> 11 <td>Name</td> 12 <td>NO</td> 13 <td>Price</td> 14 <td>Publisher</td> 15 <td>操作</td> 16 </tr> 17 <c:forEach items="${booklist }" var="book"> 18 <tr> 19 <td>${book.name }</td> 20 <td>${book.no }</td> 21 <td>${book.price }</td> 22 <td>${book.publisher }</td> 23 <td> 24 <a href="delete?no=${book.no }">删除</a> 25 </td> 26 </tr> 27 </c:forEach> 28 </table> 29 </body> 30 </html>
Web.xml:
1 <servlet> 2 <servlet-name>delete</servlet-name> 3 <servlet-class>com.guangsoft.servlet.DeleteBookServlet</servlet-class> 4 </servlet> 5 <servlet-mapping> 6 <servlet-name>delete</servlet-name> 7 <url-pattern>/delete</url-pattern> 8 </servlet-mapping>
Servlet:
1 protected void doPost(HttpServletRequest req, HttpServletResponse resp) 2 throws ServletException, IOException 3 { 4 req.setCharacterEncoding("utf-8"); 5 String no = req.getParameter("no"); 6 BookDAO dao = new BookDAO(); 7 boolean b = dao.deleteBook(no); 8 if(b) 9 { 10 req.getRequestDispatcher("getAll").forward(req, resp); 11 } 12 else 13 { 14 req.setAttribute("message","删除编号是"+no+"的书失败"); 15 req.getRequestDispatcher("error.jsp").forward(req, resp); 16 } 17 }
DAO:
1 public boolean deleteBook(String no) 2 { 3 boolean b = false; 4 try 5 { 6 MyConnection mcon = new MyConnection(); 7 Connection conn = mcon.getConn(); 8 String sql = "delete from book where no='"+no+"'"; 9 System.out.println(sql); 10 Statement st = conn.createStatement(); 11 st.executeUpdate(sql); 12 b = true; 13 mcon.closeConn(conn); 14 } 15 catch (SQLException e) 16 { 17 e.printStackTrace(); 18 } 19 return b; 20 }
8. 以下出版社管理系统部分模块,按照要求实现对应功能代码。(9分)
1)点击“修改”或者“删除”实现对应的功能
Name |
NO |
Price |
Publisher |
操作 |
Android开发基础 |
1001 |
80 |
清华大学出版社 |
修改 删除 |
Core Java |
1002 |
90 |
机械工业出版社 |
修改 删除 |
云计算编程 |
1003 |
100 |
科技出版社 |
修改 删除 |
2)在Servlet中实现分发功能,即利用一个Servlet实现多个功能,减少重复代码
3)查询,删除,修改,增加任意两个即可
3)写出Servlet核心代码即可,使用method或者uri分析请求不限制
Servlet:
1 public class BookServlet extends HttpServlet 2 { 3 protected void doGet(HttpServletRequest req, HttpServletResponse resp) 4 throws ServletException, IOException 5 { 6 this.doPost(req, resp); 7 } 8 protected void doPost(HttpServletRequest req, HttpServletResponse resp) 9 throws ServletException, IOException 10 { 11 req.setCharacterEncoding("utf-8"); 12 String uri = req.getRequestURI(); 13 //在dopost方法中利用uri分发到不同的操作 14 if(uri.endsWith("getAll")) 15 { 16 this.getAll(req,resp); 17 } 18 else if(uri.endsWith("add")) 19 { 20 this.add(req, resp); 21 } 22 else if(uri.endsWith("delete")) 23 { 24 this.del(req, resp); 25 } 26 }
DAO:
1 protected void getAll(HttpServletRequest req, HttpServletResponse resp) 2 throws ServletException, IOException 3 { 4 BookDAO dao = new BookDAO(); 5 List<Book> lb = dao.getAll(); 6 req.setAttribute("booklist",lb); 7 req.getRequestDispatcher("bookList.jsp").forward(req, resp); 8 }
JavaBean:
1 protected void del(HttpServletRequest req, HttpServletResponse resp) 2 throws ServletException, IOException 3 { 4 String no = req.getParameter("no"); 5 BookDAO dao = new BookDAO(); 6 boolean b = dao.deleteBook(no); 7 if(b) 8 { 9 req.getRequestDispatcher("getAll").forward(req, resp); 10 } 11 else 12 { 13 req.setAttribute("message","删除编号是"+no+"的书失败"); 14 req.getRequestDispatcher("error.jsp").forward(req, resp); 15 } 16 }
Servlet中的对应方法:
1 protected void add(HttpServletRequest req, HttpServletResponse resp) 2 throws ServletException, IOException 3 { 4 req.setCharacterEncoding("utf-8"); 5 String name = req.getParameter("bookname"); 6 String no = req.getParameter("no"); 7 String price = req.getParameter("price"); 8 String publisher = req.getParameter("publisher"); 9 Book book = new Book(); 10 book.setName(name); 11 book.setNo(no); 12 book.setPrice(price==null?0.0:Double.parseDouble(price)); 13 book.setPublisher(publisher); 14 BookDAO dao = new BookDAO(); 15 boolean b = dao.addBook(book); 16 if(b) 17 { 18 req.getRequestDispatcher("success.jsp").forward(req, resp); 19 } 20 else 21 { 22 req.getRequestDispatcher("error.jsp").forward(req, resp); 23 } 24 }
9. 写出处理中文乱码的过虑器及配置
要求:写出Filter核心代码,web.xml配置代码
Web.xml:
1 <filter> 2 <filter-name>charset</filter-name> 3 <filter-class>com.guangsoft.filter.CharsetEncodingFilter</filter-class> 4 <init-param> 5 <param-name>endcoding</param-name> 6 <param-value>gb2312</param-value> 7 </init-param> 8 </filter> 9 <filter-mapping> 10 <filter-name>charset</filter-name> 11 <url-pattern>/*</url-pattern> 12 </filter-mapping>
Filter:
1 public class CharsetEncodingFilter implements Filter 2 { 3 private String encoding; 4 public void init(FilterConfig filterconfig) throws ServletException 5 { 6 this.encoding = filterconfig.getInitParameter("endcoding"); 7 } 8 public void doFilter(ServletRequest req, ServletResponse resp, 9 FilterChain chain) throws IOException, ServletException 10 { 11 req.setCharacterEncoding(encoding); 12 chain.doFilter(req, resp); 13 } 14 public void destroy() 15 { 16 } 17 }
10. 写出记录在线人数功能的监听器
要求:写出Listener核心代码,web.xml配置代码
Web.xml:
1 <listener> 2 <listener-class>com.guangsoft.filter.CountListener</listener-class> 3 </listener>
Listener:
1 public class CountListener implements HttpSessionListener 2 { 3 private ServletContext sc = null; 4 public void sessionCreated(HttpSessionEvent se) 5 { 6 this.sc = se.getSession().getServletContext(); 7 Integer i = (Integer) this.sc.getAttribute("online"); 8 if (i == null) 9 i = new Integer(0); 10 i = new Integer((i.intValue()) + 1); 11 this.sc.setAttribute("online", i); 12 } 13 public void sessionDestroyed(HttpSessionEvent httpsessionevent) 14 { 15 Integer i = (Integer) this.sc.getAttribute("online"); 16 if (i == null) 17 i = new Integer(1); 18 i = new Integer((i.intValue()) - 1); 19 this.sc.setAttribute("online", i); 20 } 21 }
11. 使用jquery完成邮件地址是否已经注册代码
要求:写出jquery ajax和HTML核心代码
1 <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> 2 <html> 3 <head> 4 <title>register</title> 5 <script type="text/javascript" src="js/jquery-1.8.2.min.js"></script> 6 <script type="text/javascript"> 7 function checkemail() { 8 $.ajax({ 9 type : "GET", url : "checkemail", 10 dataType : "html", data : "userName=" + $("#email").val(), 11 success : function(msg) { 12 $("#showResult").html(msg); 13 $("#showResult").css("color", "red"); 14 } 15 }); 16 } 17 </script> 18 </head> 19 <body> 20 邮件注册: 21 <input type="text" id="email" onblur="checkemail()"> 22 @163.com 23 <span id="message"></span> 24 </body> 25 </html>