您现在的位置是:网站首页> 编程资料编程资料
JQuery+Ajax+Struts2+Hibernate框架整合实现完整的登录注册_AJAX相关_
2023-05-25
285人已围观
简介 JQuery+Ajax+Struts2+Hibernate框架整合实现完整的登录注册_AJAX相关_
最近在仿造一个书城的网站: http://www.yousuu.com ,UI直接拿来用,前端后端自己写,目前大部分功能已经实现,
就把具体的 登录注册功能 拿来分享一下。PS:又写登录注册会不会被人喷啊=。=
一、开发环境的部署
程序结构:
BootStrap+Ajax+Struts2+Hibernate+MySql
仅供参考:能实现相关功能即可
操作系统:ubuntu 14.10
前端框架:BootStrap 注:此框架只是为了实现用户界面,和具体功能无关
数据库:mysql-5.5 数据库工具:emma
服务器:tomcat 服务器工具:Myeclipse 10(已配置好Struts2和Hibernate环境)
注意:
程序调试过程可能会产生乱码,只需保持所有工具编码方式相同即可。
二、项目文件配置
1、新建Web Project,命名为ROOT
2、配置/WebRoot/WEB-INF/web.xml
ROOT struts2 org.apache.struts2.dispatcher.ng.filter.StrutsPrepareAndExecuteFilter struts2 /* 404 /error.jsp 500 /error.jsp index.html index.htm index.jsp default.html default.htm default.jsp
3 、 配置/src/struts.xml(struts配置文件),其他的action和interceptor被我删了,这点够用了。
4、配置/src/hibernate.cfg.xml(hibernate数据库配置文件),注意倒数第4行有个
Myeclipse Mysql jdbc:mysql://localhost:3306/test root root com.mysql.jdbc.Driver org.hibernate.dialect.MySQLDialect thread org.hibernate.dialect.MySQLDialect true true
5、/src下创建com.hibernate包,在该包下创建bookchat.hbm.xml(hibernate对象关系映射文件),并配置
注意
6、/src下的com.hibernate包下创建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); } }三、检查数据库
1、打开数据库GUI工具,查看test数据库下是否有一个user表,若能打开user表说明之前配置成功。
2、编辑user表:设置字段默认值,可以向表中添加数据。


四、网页UI设计
1、我们在struts.xml文件配置中已经埋下伏笔:
我们可以在网页中请求/login,/logout,/register来访问这三个Action处理类,当然这三个类具体的内容我们还没写,先放着。
2、现在开始思考网页设计需要什么东西...
<1> 首页提供登陆和注册链接

<2> 登陆弹出框和注册页面


<3> 登陆/注册成功,登陆和注册消失,显示用户名和退出登陆

<4> 我们想达到的效果:登陆/注册成功后显示用户名,登陆失败后动态提示错误详情!
五、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 = use
相关内容
- ajax与传统web开发的异同点_AJAX相关_
- SSH+Jquery+Ajax框架整合_AJAX相关_
- jQuery通过Ajax向PHP服务端发送请求并返回JSON数据_AJAX相关_
- 如何利用jQuery post传递含特殊字符的数据_AJAX相关_
- 如何解决ajax在google chrome浏览器上失效_AJAX相关_
- 基于ajax实现点击加载更多无刷新载入到本页_AJAX相关_
- 有关Ajax跨域问题的两种解决方法_AJAX相关_
- js ajax加载时的进度条代码_AJAX相关_
- Jquery具体实例介绍AJAX何时用,AJAX应该在什么地方用_AJAX相关_
- $.ajax()方法参数详解_AJAX相关_
点击排行
本栏推荐
