JQuery+Ajax+Struts 2+Hibernate 프레임 워 크 통합 으로 완전한 로그 인 등록 실현

27431 단어 JQueryAjaxStruts2Hibernate
최근 한 서점 의 사 이 트 를 모방 하고 있 습 니 다.http://www.yousuu.comUI 를 직접 가 져 와 서 사용 합 니 다.전단 백 엔 드 는 스스로 쓰 고 현재 대부분의 기능 이 실현 되 었 습 니 다.
구체 적 인 로그 인 등록 기능 을 가 져 와 공유 하 세 요.PS:로그 인 등록 을 또 쓰 면 누 군가 에 게 분출 되 지 않 을 까=.
1.개발 환경의 배치
프로그램 구성:
BootStrap+Ajax+Struts2+Hibernate+MySql
참고:관련 기능 을 실현 할 수 있 으 면 됩 니 다.
운영 체제:ubuntu 14.10
프론트 프레임:BootStrap   주:이 프레임 워 크 는 사용자 인터페이스 를 실현 하기 위 한 것 일 뿐 구체 적 인 기능 과 는 무관 합 니 다.
데이터베이스:mysql-5.5 데이터베이스 도구:emma
서버:tomcat 서버 도구:Myeclipse 10(Struts 2 와 Hibernate 환경 설정)
주의:
프로그램 디 버 깅 과정 에서 오류 가 발생 할 수 있 습 니 다.모든 도구 인 코딩 방식 이 같 으 면 됩 니 다.
프로젝트 파일 설정
1.새로운 웹 프로젝트,이름 은 ROOT
2,설정/WebRoot/WEB-INF/web.xml

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
 xmlns="http://java.sun.com/xml/ns/javaee"
 xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd"
 id="WebApp_ID" version="3.0">
 <display-name>ROOT</display-name>
 <filter>
  <filter-name>struts2</filter-name>
  <filter-class>
     org.apache.struts2.dispatcher.ng.filter.StrutsPrepareAndExecuteFilter
   </filter-class>
 </filter>
 <filter-mapping>
  <filter-name>struts2</filter-name>
  <url-pattern>/*</url-pattern>
 </filter-mapping>
 <error-page>
  <error-code>404</error-code>
  <location>/error.jsp</location>
 </error-page>
 <error-page>
  <error-code>500</error-code>
  <location>/error.jsp</location>
 </error-page>
 <welcome-file-list>
  <welcome-file>index.html</welcome-file>
  <welcome-file>index.htm</welcome-file>
  <welcome-file>index.jsp</welcome-file>
  <welcome-file>default.html</welcome-file>
  <welcome-file>default.htm</welcome-file>
  <welcome-file>default.jsp</welcome-file>
 </welcome-file-list>
</web-app>
3.설정/src/struts.xml(struts 설정 파일),다른 action 과 interceptor 가 삭제 되 었 습 니 다.이 정도 면 충분 합 니 다.

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE struts PUBLIC "-//Apache Software Foundation//DTD Struts Configuration 2.1//EN" "http://struts.apache.org/dtds/struts-2.1.dtd">
<struts>
 <package name="default" namespace="/" extends="struts-default">
  <!--    -->
  <action name="login" class="com.action.Login" method="login"></action>
  <!--    -->
  <action name="logout" class="com.action.Logout" method="logout"></action>
  <!--    -->
   <action name="register" class="com.action.Register" method="register"></action>
  <!--      -->
   <action name="sendmail" class="com.action.SendMail" method="sendmail"></action>
 </package>
</struts>
4.설정/src/hibenate.cfg.xml(hibenate 데이터베이스 설정 파일),마지막 4 줄 에이 있 습 니 다.직접 만 들 필요 가 없습니다.다음 설정 에 있 습 니 다.

<?xml version='1.0' encoding='UTF-8'?>
<!DOCTYPE hibernate-configuration PUBLIC
   "-//Hibernate/Hibernate Configuration DTD 3.0//EN"
   "http://www.hibernate.org/dtd/hibernate-configuration-3.0.dtd">
<!-- Generated by MyEclipse Hibernate Tools. -->
<hibernate-configuration>
 <session-factory>
  <property name="myeclipse.connection.profile">Myeclipse Mysql</property>
  <!--  JDBC  、       -->
  <property name="connection.url">jdbc:mysql://localhost:3306/test</property>
  <!--          -->
  <property name="connection.username">root</property>
  <property name="connection.password">root</property>
  <!--  JDBC  -->
  <property name="connection.driver_class">com.mysql.jdbc.Driver</property>
  <!--  mysql  -->
  <property name="dialect">org.hibernate.dialect.MySQLDialect</property>
  <property name="hibernate.current_session_context_class">thread</property>
  <property name="hibernate.dialect">org.hibernate.dialect.MySQLDialect</property>
  <property name="show_sql">true</property>
  <property name="format_sql">true</property>
  <mapping resource="com/hibernate/bookchat.hbm.xml" />
 </session-factory>
</hibernate-configuration>
5./src 에서 com.hibenate 패 키 지 를 만 들 고 이 패키지 에서 bookchat.hbm.xml(hibenate 대상 관계 맵 파일)을 만 들 고 설정 합 니 다.
의 이 User 클래스 는 사용자 정의 데이터베이스 대상 클래스(pojo)입 니 다.다음 단계 에 설정 합 니 다.

<?xml version="1.0"?> 
<!DOCTYPE hibernate-mapping PUBLIC "-//Hibernate/Hibernate Mapping DTD 3.0//EN" "http://hibernate.sourceforge.net/hibernate-mapping-3.0.dtd">
<hibernate-mapping>
 <!--  Bean  ，       -->
 <class name="com.hibernate.User" table="user">
  <id column="id" type="int">
   <generator class="native" />
  </id>
  <!--        、    -->
  <property name="user_id" column="user_id" type="int" />
  <property name="phone" column="phone" type="int" />
  <property name="email" column="email" type="string" />
  <property name="username" column="username" type="string" />
  <property name="password" column="password" type="string" />
  <property name="icon" column="icon" type="string" />
  <property name="description" column="description" type="string" />
  <property name="followThreadNum" column="followThreadNum" type="int" />
  <property name="followPeopleNum" column="followPeopleNum" type="int" />
  <property name="fansNum" column="fansNum" type="int" />
  <property name="haveMsg" column="haveMsg" type="int" />
 </class>
</hibernate-mapping>
6./src 의 com.hibenate 패키지 에서 User 클래스 를 만 듭 니 다.

package com.hibernate;
public class User {
 private int user_id; //      user_id
 private int phone; //   
 private String email; //  
 private String username; //   
 private String password; //  
 private String icon; //    
 private String description;  //     
 private int followThreadNum; //      
 private int followPeopleNum; //      
 private int fansNum; //    
 private int haveMsg; //        
 public User() {
  super();
 }
   //            
 public User(String email, String username, String password) {
  //     ：username,password,email
  //     ：user_id,icon,followThreadNum,followPeopleNum,fansNum,haveMsg
  //   :phone,description,
  this.user_id = 39212;
  // this.phone = phone;
  this.email = email;
  this.username = username;
  this.password = password;
  this.icon = "images/icon.png";
  // this.description = description;
  this.followThreadNum = 0;
  this.followPeopleNum = 0;
  this.fansNum = 0;
  this.haveMsg = 0;
 }
 public int getUser_id() {
  return user_id;
 }
 public void setUser_id(int user_id) {
  this.user_id = user_id;
 }
 public int getPhone() {
  return phone;
 }
 public void setPhone(int phone) {
  this.phone = phone;
 }
 public String getEmail() {
  return email;
 }
 public void setEmail(String email) {
  this.email = email;
 }
 public String getUsername() {
  return username;
 }
 public void setUsername(String username) {
  this.username = username;
 }
 public String getPassword() {
  return password;
 }
 public void setPassword(String password) {
  this.password = password;
 }
 public String getIcon() {
  return icon;
 }
 public void setIcon(String icon) {
  this.icon = icon;
 }
 public String getDescription() {
  return description;
 }
 public void setDescription(String description) {
  this.description = description;
 }
 public int getFollowThreadNum() {
  return followThreadNum;
 }
 public void setFollowThreadNum(int followThreadNum) {
  this.followThreadNum = followThreadNum;
 }
 public int getFollowPeopleNum() {
  return followPeopleNum;
 }
 public void setFollowPeopleNum(int followPeopleNum) {
  this.followPeopleNum = followPeopleNum;
 }
 public int getFansNum() {
  return fansNum;
 }
 public void setFansNum(int fansNum) {
  this.fansNum = fansNum;
 }
 public int getHaveMsg() {
  return haveMsg;
 }
 public void setHaveMsg(int haveMsg) {
  this.haveMsg = haveMsg;
 }
}
7./src 의 com.db 패키지 에서 CreateTable 류 를 만 든 다음 Run as-Java Application 에서 콘 솔 이 sql 문 구 를 출력 했 는 지 확인 합 니 다.

package com.db;
import org.hibernate.cfg.Configuration;
import org.hibernate.tool.hbm2ddl.SchemaExport;
public class CREATTABLEDONOT {
 public static void main(String[] args) {
  //     hibernate.cfg.xml  
  Configuration cfg = new Configuration().configure();
  SchemaExport export = new SchemaExport(cfg);
  export.create(true, true);
 }
}
3.데이터베이스 검사
1.데이터베이스 GUI 도 구 를 열 고 test 데이터베이스 에 user 표 가 있 는 지 확인 합 니 다.user 표를 열 수 있 으 면 설정 이 성공 적 입 니 다.
2.user 표 편집:필드 의 기본 값 을 설정 하고 표 에 데 이 터 를 추가 할 수 있 습 니 다.
 

4.웹 UI 디자인
1.struts.xml 파일 설정 에 복선 을 묻 었 습 니 다.




우 리 는 웹 페이지 에서/login,/logout,/register 에 이 세 가지 Action 처리 류 를 방문 할 것 을 요청 할 수 있 습 니 다.물론 이 세 가지 구체 적 인 내용 은 아직 쓰 지 않 았 습 니 다.먼저 두 십시오.
2.지금부터 웹 디자인 에 무엇이 필요 한 지 생각 하기 시작 합 니 다.
<1>첫 페이지 에 로그 인 및 등록 링크 제공
 
<2>팝 업 상자 와 등록 페이지 로그 인

<3>로그 인/등록 성공,로그 인 및 등록 사라 짐,사용자 이름과 로그 인 종료 표시
 
<4>우리 가 원 하 는 효과:로그 인/등록 성공 후 사용자 이름 을 표시 합 니 다.로그 인 실패 후 동적 알림 오류 상세 정보!
5.JQuery+Ajax 디자인
1.주요 JQuery 와 Ajax 코드

(function(window, $) {
 var SOKK = {};
 ys.common = SOKK;
 //    
 SOKK.sendmail = function(){
  var email = $("#inputEmail").val().trim();
  if(!checkEmail(email)){
   return false;
  }
  //    
  $.get("/sendmail","email="+email,function(data){
   data = JSON.parse(data);
   tip(data.code);
  })
 }
 //  
 SOKK.signup = function(form){
  var form = $(form);
  //        
  if(!checkSignUp(form.find("input")))
   return false;
  //     ，  JSON  
  var JStr =form.serialize();
  // var JStr = JSON.stringify(JForm);
  tip(JStr);
  $.post("/register",JStr,function(data){
   data = JSON.parse(data);
   if (data.code == 200) {
    location.reload(); //       ？
   } else {
    tip(data.code);
   }
  })
 };
 //   
 SOKK.login = function(form) {
  var form = $(form);
  var input = form.find("input");
  var username=$.trim(input[0].value);
  var password=$.trim(input[1].value);
  if(checkLogin(username,password)){
   return false;
  }
  var dataParam = {};
  dataParam.username = username;
  dataParam.password = password;
  //    dataParam    ，          ?username=xx&password=xx;
  //     json                $.ajax，  json          ，
  //         ，     json。        json
  $.post("/login", dataParam, function(data) {
   // json   ->json  
   data = JSON.parse(data);
   if (data.code == 200) {
    location.reload();
   } else {
    tip(data.code);
   }
  })
 };
 //  
 SOKK.logout = function(){
  $.get("/logout", function (data) {
   //json   ->json    
   data = JSON.parse(data);
   if (data.code==200){
    location.reload();
   }
  })
 };
})(window, $)
2.사용자 정의 도구 코드

//      
function tip(info){
 if(isNaN(info)){
  toastr.info(info);
 }else{
  var msg;
  if(info<300){  
   switch(info){
    case 100: msg="      ！"; break;
    case 101: msg="      ！"; break;
    case 102: msg="    【   】！"; break;
    case 103: msg="    【   】！"; break;
    case 104: msg="    【   】！"; break;
    case 105: msg="    【   】！"; break;
    case 110: msg="            ！";break;
    case 200: msg="    ！"; break;
    case 202: msg="     ，     。"; break;
    case 204: msg="    ，      。"; break;
    default : break;
   }
   toastr.success(msg);
  }else if(info<1000){
   switch(info){
    case 301: msg="           ！"; break;
    case 400: msg="    ，       ！"; break;
    case 401: msg="    ，        ！"; break;
    case 403: msg="    ！"; break;
    case 404: msg="       ！"; break;
    case 408: msg="    ！"; break;
    case 500: msg="     ！"; break;
    case 500: msg="     ！"; break;
    case 900: msg="   /    ，     "; break;
    case 903: msg="     ，   ！"; break;
    case 904: msg="        ！"; break;
    case 905: msg="    ！"; break;
    case 906: msg="    ，   ！";break;
    case 907: msg="       ！";break;
    case 908: msg="      ！";break;
    case 909: msg="      ！";break;
    case 910: msg="        ！";break;
    default : break;
   }
   toastr.error(msg);
  }else{
   toastr.info(info);
  }
 }
}
//    
function checkSignUp(input){
 var username = $.trim(input[0].value);
 var password1 = $.trim(input[1].value);
 var password2 = $.trim(input[2].value);
 var email = $.trim(input[3].value);
 var emailcode = $.trim(input[4].value);
 for (var i = 0; i < input.length; i++) {
  if(input[i].value.length<=0){
   tip("        ！");
   return false;
  }
 };
 if(username.length<4){
  tip("       4   ！");
  return false;
 }
 if(password1!==password2){
  tip("         ！");
  return false;
 }
 if(password1.length<6){
  tip("      6   ！");
  return false;
 }
 return true;
}
function checkLogin(username,password){
 if(!username){
  tip("      ！");
  return false;
 }
 if(!password){
  tip("     ！");
  return false;
 }
}
function checkEmail(email){
 var reg = /^([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/;
 if(email){
  if(reg.test(email)){
   return true;
  }else{
   tip("         ！");
   return false;
  }
 }else{
  tip("        ！");
  return false;
 }
}
3.toastr 는 전단 이 막 히 지 않 는 알림 플러그 인 으로http://www.bootcdn.cn/toastr.js/다운로드 하여 사용 할 수 있 습 니 다.
         
6.액 션 디자인
1、Login.java

package com.action;
import javax.servlet.http.HttpServletRequest;
import org.apache.struts2.ServletActionContext;
import com.opensymphony.xwork2.ActionSupport;
import com.service.BaseService;
import com.service.BaseServiceImpl;
import com.util.OperateJSON;
public class Login extends ActionSupport {
 private static final long serialVersionUID = 4679952956618457478L;
 private String username;
 private String password;
 public void login() {
  HttpServletRequest request = ServletActionContext.getRequest();
  BaseService hs = new BaseServiceImpl();
  OperateJSON oj = new OperateJSON();
  username = request.getParameter("username");
  password = request.getParameter("password");
  System.out.println("   ：" + username + "--  ：" + password);
  //       id
  Object obj = hs.login(username, password);
  if (obj != null) {
   System.out.println("       ");
   request.getSession().setAttribute("username", username);
   request.getSession().setAttribute("userid", obj);
   System.out.println("   " + username + " Session    ～");
   System.out.println("  id Session    ～");
   oj.putCode(200);
  } else {
   System.out.println("       ");
   oj.putCode(900);
  }
  oj.send();
 }
}
2、Logout.java

package com.action;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import org.apache.struts2.ServletActionContext;
import com.opensymphony.xwork2.ActionSupport;
import com.util.OperateJSON;
public class Logout extends ActionSupport {
 private static final long serialVersionUID = -6758897982192371466L;
 HttpServletRequest request = ServletActionContext.getRequest();
 HttpServletResponse response = ServletActionContext.getResponse();
 OperateJSON oj = new OperateJSON();
 public void logout() {
  request.getSession().removeAttribute("username");
  request.getSession().invalidate();
  if (request.getSession().getAttribute("username") == null) {
   oj.putCode(200);
  } else {
   oj.putCode(903);
  }
  oj.send();
 }
}
3、Register.java

package com.action;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import org.apache.struts2.ServletActionContext;
import com.hibernate.User;
import com.opensymphony.xwork2.ActionSupport;
import com.service.BaseService;
import com.service.BaseServiceImpl;
import com.util.OperateJSON;
public class Register extends ActionSupport {
 private static final long serialVersionUID = -3356620731966076779L;
 HttpServletRequest request = ServletActionContext.getRequest();
 HttpServletResponse response = ServletActionContext.getResponse();
 BaseService bs = new BaseServiceImpl();
 OperateJSON oj = new OperateJSON();
 SendMail sm = new SendMail();
 public void register() {
  String username = request.getParameter("username");
  String password1 = request.getParameter("password1");
  String password2 = request.getParameter("password2");
  String password = (password1.equals(password2) ? password1 : null);
  String email = request.getParameter("email");
  String emailcode = request.getParameter("emailcode");
  //                    
  if (!(emailcode.equals(sm.getMailCode()))) {
   oj.putCode(907);
   oj.send();
   return;
  }
  //      /      
  if (!bs.isUnique("User", "username", username)) {
   oj.putCode(908);
   oj.send();
   return;
  }
  if (!bs.isUnique("User", "email", email)) {
   oj.putCode(909);
   oj.send();
   return;
  }
  //   User  
  User user = new User(email, username, password);
  //         
  Boolean reged = bs.register(user);
  if (reged) {
   System.out.println("      ");
   request.getSession().setAttribute("username", username);
   oj.putCode(200);
  } else {
   System.out.println("    ");
   oj.putCode(906);
  }
  oj.send();
 }
}
4、 SendMail.java  SMTP 프로 토 콜 에서 메 일 을 보 내 는 클래스 입 니 다.사용 하기 전에 메 일 을 가 져 와 야 하 는 jar 패키지 와 함께 보 내 는 사람의 메 일 을 여 는 smtp 서 비 스 를 설정 해 야 합 니 다.

package com.action;
import java.util.Date;
import java.util.Properties;
import javax.mail.BodyPart;
import javax.mail.Message;
import javax.mail.MessagingException;
import javax.mail.Multipart;
import javax.mail.Session;
import javax.mail.Transport;
import javax.mail.internet.InternetAddress;
import javax.mail.internet.MimeBodyPart;
import javax.mail.internet.MimeMessage;
import javax.mail.internet.MimeMultipart;
import javax.servlet.http.HttpServletRequest;
import org.apache.struts2.ServletActionContext;
import com.opensymphony.xwork2.ActionSupport;
import com.util.OperateJSON;
public class SendMail extends ActionSupport {
  private static final long serialVersionUID = -4724909293302616101L;
  private static String QQ = "392102018"; // qq
  private static String HOST = "qq.com"; // SMTP      
  private static String PASS = "xxxxxxxx"; // SMTP     
  private static String mailCode; //      

  OperateJSON oj = new OperateJSON();
  public void sendmail() {
 HttpServletRequest request = ServletActionContext.getRequest();
 String email = request.getParameter("email");
 System.out.println(email);
 String mailCode = SendMail.setMailCode();
 try {
   beginSend(email, mailCode);
   oj.putCode(110);
 } catch (MessagingException e) {
   oj.putCode(910);
 } finally {
   oj.send();
 }
  }
  public static String setMailCode() {
 mailCode = 100000 + (int) (Math.random() * 900000) + "BC";
 System.out.println(mailCode);
 return mailCode;
  }
  public String getMailCode() {
 return SendMail.mailCode;
  }
  public void beginSend(String email, String mailCode)
   throws MessagingException {
 String mailTo = email; //    mail  
 String mailTitle = "        ！         ";
 String mailContent = "<p>     ：</p><p>  ！        ，            。       ，                 。 </p>"
  + mailCode + "<p>    © 1999 - 2015 BookChat。      。</p>";
 //       
 Properties props = new Properties();
 props.put("mail.smtp.host", "smtp." + HOST);
 props.put("mail.smtp.auth", "true");
 Session session = Session.getInstance(props);
 session.setDebug(true);
 //       
 MimeMessage message = new MimeMessage(session);
 //      /   /  /    
 InternetAddress from = new InternetAddress(QQ + "@" + HOST);
 message.setFrom(from);
 InternetAddress to = new InternetAddress(mailTo);
 message.setRecipient(Message.RecipientType.TO, to);
 message.setSubject(mailTitle);
 message.setSentDate(new Date());
 //         
 BodyPart mdp = new MimeBodyPart();//            BodyPart  
 mdp.setContent(mailContent, "text/html;charset=utf-8");//  BodyPart         /    
 Multipart mm = new MimeMultipart();//     MimeMultipart      BodyPart  (         )
 mm.addBodyPart(mdp);//  BodyPart   MimeMultipart   (      BodyPart)
 message.setContent(mm);//  mm         
 message.saveChanges();
 //       
 Transport transport = session.getTransport("smtp");
 transport.connect("smtp." + HOST, QQ, PASS); //    115798090       QQ  
 transport.sendMessage(message, message.getAllRecipients());
 transport.close();
  }
}
5、OpreateJSON

package com.util;
import java.io.IOException;
import java.io.PrintWriter;
import org.apache.struts2.ServletActionContext;
import net.sf.json.JSONObject;
public class OperateJSON {
 JSONObject json;
 public OperateJSON() {
  json = new JSONObject();
  json.put("code", "");
  json.put("msg", "");
  json.put("data", "");
 }
 public OperateJSON(String str) {
  json = JSONObject.fromObject(str);
 }
 public void put(String key, Object value) {
  json.remove(key);
  json.put(key, value);
 }
 public void putCode(Object value) {
  json.remove("code");
  this.put("code", value);
 }
 public void putMsg(Object value) {
  json.remove("msg");
  this.put("msg", value);
 }
 public void remove(String key) {
  json.remove(key);
 }
 public void send() {
  System.out.println("----------      ：" + json);
  try {
   PrintWriter out = ServletActionContext.getResponse().getWriter();
   out.print(json);
   out.flush();
  } catch (IOException e) {
   e.printStackTrace();
  }
 }
}
7.Hibernate Dao 디자인
이것 은 모두 데이터 베 이 스 를 조작 하 는 내용 으로 모두 자신의 스타일 이 있 으 니 자세히 쓰 면 된다.코드 가 너무 어 지 러 워 서 안 넣 을 게 요.무서워 요.-...-!
8.총화
처음에는 결 과 를 보 여 주 려 고 했 지만 그만 두 었 다.작은 예 로 하 자 를 면 하기 어 려 우 니 대신 들 의 지적 을 바 랍 니 다.
다 썼 으 니 기분 이 좋아 졌 습 니 다.채용 회 에 가 보 셔 도 좋 습 니 다.일자 리 를 찾 든 말 든 중요 하지 않 습 니 다.중요 한 것 은 제 가 올 바른 길 을 가 는 것 입 니 다.자신 에 게 의지 하 는 것 만 이 강자 입 니 다.
Jquery+Ajax+JSon 을 사용 하여 페이지 표시 JAVA+JQuery 를 붙 여 비동기 페이지 를 만 드 는 방법
ajax 와 전통 웹 개발 의 공통점

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage