广州大学学生实验报告(***报告只能为文字和图片,老师评语将添加到此处,学生请勿作答***)一、实验目的通过本实验，使学生综合掌握Web技术的应用和设计方法，掌握HTML语言、JavaScript 和JSP的混合编程及其与数据库的结合。
完成本实验后，学生具有建设网上应用系统所需主流技术的能力，并具备独立设计与开发Web系统的能力。
二、实验内容自选主题设计并建立一个网站(如个人网站，花店网站，书店网站，网上论坛等)。
这个实验，我选择了做人员网站，可以添加人员、修改人员、删除人员、查找人员，即是一个简单的人员管理功能。
三、实验设备WindowsXP一台，eclipse，mysql四、实验要求1、自选主题设计并建立一个网站(如个人网站，花店网站，书店网站，网上论坛等)。
2、包含所学的web技术:静态HTML, CSS，JavaScript, JSP, JavaBean, Servlet 技术五、实验程序1、登陆界面使用的index.jsp<%@page language="java"contentType="text/html; charset=UTF-8"pageEncoding="UTF-8"%><!DOCTYPE html PUBLIC"-//W3C//DTD HTML 4.01 Transitional//EN""/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type"content="text/html; charset=UTF-8"><title>Insert title here</title><script type="text/javascript"src="js/jquery-1.4.4.min.js"></script> <script type="text/javascript">function submit(){var _loginAction="login.action";var param={username:$('#username').val(),password:$('#password').val()};$.post(_loginAction,param,function callback(data){if(data.errorMsg){alert(data.errorMsg);}else{window.location="list.jsp";}});}</script></head><body><table border="1"align="center"><tr><td>帐号:</td><td><input type="text"id="username"name="username"/></td></tr><tr><td>密码:</td><td><input type="password"id="password"name="password"/></td></tr><tr><td></td><td> <input type="button"onclick="submit()"value="登录"/></td></tr></table></body></html>结果：2、也有静态的登录界面index.html<!DOCTYPE html PUBLIC"-//W3C//DTD HTML 4.01 Transitional//EN" "/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type"content="text/html; charset=UTF-8"> <title>Insert title here</title><script type="text/javascript">function submit(){var _loginAction="login.action";var param={username:$('#username').val(),password:$('#password').val()};$.post(_loginAction,param,function callback(data){if(data.errorMsg){alert(data.errorMsg);}else{window.location="list.html";}});}</script></head><body><table border="1"align="center"><tr><td>帐号:</td><td><input type="text"id=username name="username"/></td></tr><tr><td>密码:</td><td><input type="password"id="password"name="password"/></td></tr><tr><td></td><td> <input type="button"onclick="submit()"value="登录"/></td></tr></table></body></html>结果：3、人员列表使用的是list.jsString.prototype.isEmpty = function() { return /^\s*$/.test(this);};$(document).ready(function(){intiDatagrid();$('#common').addClass('hide');$('#update').addClass('hide');$('#search').addClass('hide');});function intiDatagrid(){$('#List').datagrid({url:'list.action',width : 600,height : 400,fitColumns : true,idField : 'id',singleSelect : false,rownumbers : true,showFooter : true,pagination : true,pageList : [ 10 ],columns:[[{ field:'id',title:'编号',width:70},{ field:'username',title:'帐号',width:150},{ field:'password',title:'密码',width:150},{ field:'act',title:'操作',width:200,align:'center',rowspan:2,formatter:function(value,rec){var _html = "";_html += '<a href="#" onclick=update('+ rec.id;_html += ')>修改</a> ';_html += '<a href="#" onclick=deleteUser('+ rec.id;_html += ')>删除</a> ';_html += '<a href="#" onclick=searchUser('+ rec.id;_html += ')>查看</a> ';return _html;}}]],toolbar:[{id:'btnadd',text:'添加',iconCls:'icon-add',handler:function(){intiCrud();}}]});}function intiCrud(){$('#common').dialog({buttons:[{text:'Ok',iconCls:'icon-ok',handler:function(){addUser();}},{text:'Cancel',handler:function(){$('#common').dialog('close');}}]});}function checkUsername(username){var temp;if( username.length>0 && username.length<255 ){temp = true;}else{temp = false;}alert(username.isEmpty());if( !username.isEmpty() ){temp = true;}else{temp = false;}return temp;}function checkPassword(password){var temp;var newPar=/^\d+$/;var result = newPar.test(password);alert(password.isEmpty());if(result && !password.isEmpty()){temp = true;}else{temp = false;}return temp;}function addUser(){var resultU = checkUsername($("#username").val());var resultP = checkPassword($("#password").val());if(resultU && resultP){var url="addUser.action";var params={username:$("#username").val(),password:$("#password").val()};$.post(url,params,function callback(data){if(!data.errorMsg){alert("添加成功");$("#username").val("");$("#password").val("");$('#common').dialog('close');$('#List').datagrid('reload');}else{alert(data.errorMsg);$("#username").val("");}});}else{alert("数据出错，请联系管理员");}}function update(userId){$('#update').dialog({buttons:[{text:'Ok',iconCls:'icon-ok',handler:function(){updateUser(userId);}},{text:'Cancel',handler:function(){$('#update').dialog('close');}}]});}function updateUser(userId){var resultU = checkUsername($("#updatename").val());var resultP = checkPassword($("#updatepassword").val());if(resultU && resultP){var url="updateUser.action";var params={id:userId,username:$("#updatename").val(),password:$("#updatepassword").val()};$.post(url,params,function callback(data){ if(!data.errorMsg){alert("修改成功");$("#updatename").val("");$("#updatepassword").val("");$('#update').dialog('close');$('#List').datagrid('reload');}else{alert(data.errorMsg);}});}}function deleteUser(userId){var url="deleteUser.action";var params={id:userId};$.post(url,params,function callback(data){ if(!data.errorMsg){alert("删除成功");$('#List').datagrid('reload');}else{alert(data.errorMsg);}});}function show(){$('#search').dialog({buttons:[{text:'Ok',iconCls:'icon-ok',handler:function(){$('#search').dialog('close');}},{text:'Cancel',handler:function(){$('#search').dialog('close');}}]});}function searchUser(userId){var url="searchUser.action";var params={id:userId};$.post(url,params,function callback(data){ if(!data.errorMsg){$("#searchname").val(ername);$("#searchpassword").val(data.password);show();$('#List').datagrid('reload');}else{alert(data.errorMsg);}});}结果：4、这些数据是跟数据库连接在一起的，此前建立了javabean，红色字体表示javabean部分LoginAction.action：package org.action;import java.util.Map;import javax.naming.InitialContext;import javax.naming.NamingException;import mons.logging.Log;import mons.logging.LogFactory;import erEnt;import erLoginFacade;import com.opensymphony.xwork2.ActionContext;import com.opensymphony.xwork2.ActionSupport;/*** @author Administrator**/public class LoginAction extends ActionSupport {private String username;private Long password;private String errorMsg;private UserLoginFacade ulf;private String sessionValue;private Log LOGGER=LogFactory.getLog(this.getClass());public void setUsername(String username) {ername = username;}public void setPassword(Long password) {this.password = password;}public String getUsername() {return username;}public Long getPassword() {return password;}public String getErrorMsg() {return errorMsg;}public void setErrorMsg(String errorMsg) {this.errorMsg = errorMsg;}public String execute(){try {InitialContext cxt=new InitialContext();ulf = (UserLoginFacade) cxt.lookup("CRUD/UserLoginFacadeImpl/remote");UserEnt ue;ue=ulf.FindUser(username, password);if(ue != null){ActionContext.getContext().getSession().put("username",username);return SUCCESS;}else{this.errorMsg = "用户不存在";return SUCCESS;}} catch (NamingException e) {// TODO Auto-generated catch blocke.printStackTrace();this.errorMsg = "请求数据出错，请联系管理员";return SUCCESS;}}}UserLoginFacade：package org.ejb;import java.util.List;import javax.ejb.Remote;@Remotepublic interface UserLoginFacade {public UserEnt FindUser(String username,Long password);public List<UserEnt> findAllUser();public boolean AddUser(String username,Long password);public boolean UpdateUser(Long id,String username,Long password);public boolean DeleteUser(Long id);public UserEnt searchUser(Long id);// public void InsertUser();}5、连接数据库Servlet部分首先本地启动好数据库：接着，在jboss里面放上跟数据库连接的mysql-ds.xml：最后在编写对应代码，在数据库创建出如下内容的表：package org.ejb;import static javax.persistence.GenerationType.IDENTITY; import static javax.persistence.GenerationType.SEQUENCE; import javax.persistence.Column;import javax.persistence.Entity;import javax.persistence.GeneratedValue;import javax.persistence.Id;import javax.persistence.SequenceGenerator;import javax.persistence.Table;@SuppressWarnings("serial")@Entity@Table(name="user")public class UserEnt implements java.io.Serializable{private Long id;private String username;private Long password;public UserEnt(){}@Id@GeneratedV alue(strategy = IDENTITY)@Column(name="id", unique=true,nullable = false) public Long getId() {return id;}public void setId(Long id) {this.id = id;}@Column(name="username",nullable=false)public String getUsername() {return username;}public void setUsername(String username) {ername = username;}@Column(name="password",nullable=false)public Long getPassword() {return password;}public void setPassword(Long password) {this.password = password;}}再用接口和实现类，达到对数据库操作：UserLoginFacade.java:package org.ejb;import java.util.List;import javax.ejb.Remote;@Remotepublic interface UserLoginFacade {public UserEnt FindUser(String username,Long password);public List<UserEnt> findAllUser();public boolean AddUser(String username,Long password);public boolean UpdateUser(Long id,String username,Long password);public boolean DeleteUser(Long id);public UserEnt searchUser(Long id);// public void InsertUser();}UserLoginFacadeImpl.java:package org.ejb;import java.util.List;import javax.ejb.Stateless;import javax.persistence.EntityManager;import javax.persistence.PersistenceContext;import javax.persistence.Query;import mons.logging.Log;import mons.logging.LogFactory;@Statelesspublic class UserLoginFacadeImpl implements UserLoginFacade{@PersistenceContextprivate EntityManager em;private Log LOGGER=LogFactory.getLog(this.getClass());public UserEnt FindUser(String username,Long password){("start FindUser");try {if(username == null || password == null){throw new IllegalArgumentException("帐号密码出错");}Query query;query = this.em.createQuery("SELECT U FROM UserEnt U WHERE ername='"+username+"' AND U.password="+password);("end FindUser");(query.getResultList());if(query.getResultList().isEmpty()){this.InsertUser();query = this.em.createQuery("SELECT U FROM UserEnt U WHERE ername='"+username+"' AND U.password="+password);return (UserEnt) query.getSingleResult();}return (UserEnt) query.getSingleResult();} catch (Exception e) {// TODO Auto-generated catch block("error");e.printStackTrace();return null;}}private void InsertUser(){try {String one="INSERT INTO UserEnt V ALUES("+100000+","+123456+",'"+"admin"+"')";String two="INSERT INTO UserEnt V ALUES("+200000+","+123456+",'"+"zhongjie"+"')";String three="INSERT INTO UserEnt V ALUES("+300000+","+123456+",'"+"user"+"')";Query queryOne,queryTwo,queryThree;queryOne=this.em.createQuery(one);queryTwo=this.em.createQuery(two);queryThree=this.em.createQuery(three);queryOne.executeUpdate();queryTwo.executeUpdate();queryThree.executeUpdate();("success");} catch (Exception e) {// TODO Auto-generated catch blocke.printStackTrace();("error");}}@SuppressWarnings("unchecked")public List<UserEnt> findAllUser(){try {("start findAllUser");Query query;query = this.em.createQuery("SELECT U FROM UserEnt U");List<UserEnt> ue = null;ue=query.getResultList();("end findAllUser");("ue="+ue);return ue;} catch (Exception e) {// TODO Auto-generated catch block("error");e.printStackTrace();return null;}}public boolean AddUser(String username,Long password){("start add user");try {("username="+username);("password="+password);if(null != username && null != password){("username and password is not null");UserEnt ue = new UserEnt();ue.setUsername(username);ue.setPassword(password);("ue="+ue);this.em.persist(ue);("end add user");return true;}else{("error add user");return false;}} catch (Exception e) {// TODO Auto-generated catch blocke.printStackTrace();return false;}}public boolean UpdateUser(Long id,String username,Long password) {("start update user");try {UserEnt ue = this.em.find(UserEnt.class, id);("ue="+ue);if(ue != null){("ue is not null");ue.setUsername(username);ue.setPassword(password);this.em.merge(ue);this.em.persist(ue);("end update user");return true;}else{("update user failed");return false;}} catch (Exception e) {// TODO Auto-generated catch blocke.printStackTrace();("error");return false;}}public boolean DeleteUser(Long id){("start delete user");try {UserEnt ue = this.em.find(UserEnt.class, id);if(ue !=null){this.em.remove(ue);("delete user success");return true;}else{("delete user failed");return false;}} catch (Exception e) {// TODO Auto-generated catch blocke.printStackTrace();("error");return false;}}public UserEnt searchUser(Long id){("start search user");try {UserEnt ue = this.em.find(UserEnt.class, id);if(ue !=null){("search user success");return ue;}else{("search user failed");return null;}} catch (Exception e) {// TODO Auto-generated catch blocke.printStackTrace();("search user error");return null;}}}结果：七、总结心得该实验室是在动态网页的基础上扩展的来的，其中也运用了easyui里面的grid模板，并根据它所提供的例子，实现了grid数据从前台到后台再到数据库的功能，通过他所提供的exmple加快了我对js的掌握。
