Shulou(Shulou.com)06/03 Report--

JQuery+Ajax+Struts2+Hibernate framework integration to achieve complete login registration is the example analysis, in view of this problem, this article introduces the corresponding analysis and solution in detail, hoping to help more partners who want to solve this problem to find a more simple and feasible method.

I. deployment of the development environment

Program structure:

BootStrap+Ajax+Struts2+Hibernate+MySql

For reference only: you can achieve the relevant functions

Operating system: ubuntu 14.10

Front-end framework: BootStrap Note: this framework is only for the implementation of the user interface and has nothing to do with specific functions

Database: mysql-5.5 database tool: emma

Server: tomcat server tool: Myeclipse 10 (Struts2 and Hibernate environments are configured)

Note:

Garbled code may occur during program debugging, as long as all tools are coded in the same way.

II. Project file configuration

1. Create a new Web Project and name it ROOT

2. Configuration / 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. Configure / src/struts.xml (struts configuration file). I deleted other action and interceptor, which is enough.

4. Configure / src/hibernate.cfg.xml (hibernate database configuration file). Note that one of the penultimate line does not need to be created by yourself, which will be configured in the next step.

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. Create com.hibernate package under / src, create bookchat.hbm.xml (hibernate object-relational mapping file) under this package, and configure

Note that the User class in is a custom database object class (pojo), which will be configured in the next step

6. Create a User class under the com.hibernate package under / src

Package com.hibernate;public class User {private int user_id; / / corresponding database user_id private int phone; / / Mobile number private String email; / / email private String username; / / user name private String password; / / password private String icon; / / user profile private String description; / / Custom description private int followThreadNum; / / number of followers private int followPeopleNum; / / number of followers private int fansNum; / / number of followers / / is there any new message public User () {super ();} / this constructor is useful when registering public User (String email, String username, String password) {/ / user content: username,password,email / / system definition: user_id,icon,followThreadNum,followPeopleNum,fansNum,haveMsg / / leave blank: 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. Create the CreateTable class under the com.db package under / src, and then Run as-Java Application to see if the console outputs sql statements.

Package com.db;import org.hibernate.cfg.Configuration;import org.hibernate.tool.hbm2ddl.SchemaExport;public class CREATTABLEDONOT {public static void main (String [] args) {/ / default read hibernate.cfg.xml file Configuration cfg = new Configuration () .configure (); SchemaExport export = new SchemaExport (cfg); export.create (true, true);}}

3. Check the database

1. Open the database GUI tool to see if there is a user table under the test database. If you can open the user table, the configuration is successful.

2. Edit the user table: set the default value of the field and add data to the table.

Fourth, web page UI design

1. We have laid a foreshadowing in the struts.xml file configuration:

We can request / login,/logout,/register in the web page to access the three Action processing classes, of course, we haven't written the specific contents of these three classes, so let's leave them first.

2. Now start thinking about what web design needs.

The home page provides login and registration links

Login pop-up box and registration page

Login / registration is successful, login and registration disappear, display user name and exit login

What we want to achieve: display the user name after login / registration, and dynamically prompt the error details after login failure!

5. JQuery+Ajax design

1. Main JQuery and Ajax codes

(function (window, $) {var SOKK = {}; ys.common = SOKK; / / mailbox verification SOKK.sendmail = function () {var email= $("# inputEmail") .val () .trim (); if (! checkEmail (email)) {return false;} / / send request $.get ("/ sendmail", "email=" + email,function (data) {data = JSON.parse (data); tip (data.code)) })} / / Register SOKK.signup = function (form) {var form = $(form); / / the successful party can continue to execute the if (! checkSignUp (form.find ("input")) return false; / / serialization form to generate the JSON object 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 (); / / how do I jump to the home page? } else {tip (data.code);}})}; / / Log in 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 / / the dataParam here is a key-value pair, but when the server acquires it, it is? username=xx&password=xx; / / if you use json transmission, you must use $.ajax instead, and json needs to be parsed on the server side, / / so it is not recommended to use json when sending a request. Data can be accepted using json $.post ("/ login", dataParam, function (data) {/ / json string-> json object data = JSON.parse (data); if (data.code = = 200) {location.reload ();} else {tip (data.code);}})} / / Logout SOKK.logout = function () {$.get ("/ logout", function (data) {/ / json string-> json object data = JSON.parse (data); if (data.code==200) {location.reload ();}})};}) (window, $)

2. Custom tool code

/ / Custom prompt function tip (info) {if (isNaN (info)) {toastr.info (info);} else {var msg; if (info)

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.