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