【SSH網上商城】——AJAX非同步驗證是否存在該使用者名稱
這幾天抽著中午的空隙,敲SSH網上商城,剛開始敲的時候,弄SSH的框架花了段時間,框架搭完以後,開始首頁跳轉,一切都開始步入正軌了。敲了幾集視訊,感覺SSH網上商城的專案挺好玩的,雖然開始學習的時候不太懂,但是看著功能一個一個的實現,很有成就感。
使用ajax完成使用者名稱是否存在的非同步校驗:一共分為五個步驟:
1.事件觸發:
* 在使用者名稱那新增onblur事件
2.編寫AJAX程式碼:
* 向Action中提交:傳遞username引數
3.編寫Action
* 接收username:模型驅動接收.
* 編寫實體類
* User
* User.hbm.xml
* 配置到Spring中.
4.編寫DAO
* 繼承HibernateDaoSupport
* 在配置中注入sessionFactory
5.編寫Service
*注入UserDao
*事務管理
1、在註冊頁面找到使用者名稱,為使用者名稱新增onblur(滑鼠失去焦點)事件
<strong><span style="font-size:18px;"><input type="text" id="username" name="username" class="text" maxlength="20" onblur="checkUsername()"/></span></strong>
2、編寫AJAX程式碼:3.編寫Action<strong><span style="font-size:18px;"> function checkUsername(){ // 獲得檔案框值: var username = document.getElementById("username").value; // 1.建立非同步互動物件 var xhr = createXmlHttp(); // 2.設定監聽 xhr.onreadystatechange = function(){ if(xhr.readyState == 4){ if(xhr.status == 200){ document.getElementById("span1").innerHTML = xhr.responseText; } } } // 3.開啟連線 xhr.open("GET","${pageContext.request.contextPath}/user_findByName.action?time="+new Date().getTime()+"&username="+username,true); // 4.傳送 xhr.send(null); } function createXmlHttp(){ var xmlHttp; try{ // Firefox, Opera 8.0+, Safari xmlHttp=new XMLHttpRequest(); } catch (e){ try{// Internet Explorer xmlHttp=new ActiveXObject("Msxml2.XMLHTTP"); } catch (e){ try{ xmlHttp=new ActiveXObject("Microsoft.XMLHTTP"); } catch (e){} } } return xmlHttp; }</span></strong>
在編寫action前,需要先建立相應的包和類,要用到的user的包和類,見下圖:
package cn.itcast.shop.user; import java.io.IOException; import cn.itcast.shop.user.service.UserService; import cn.itcast.shop.user.vo.User; import javax.servlet.http.HttpServletResponse; import org.apache.struts2.ServletActionContext; import com.opensymphony.xwork2.ActionSupport; import com.opensymphony.xwork2.ModelDriven; /** * 使用者模組Action的類 * @author CXC * */ public class UserAction extends ActionSupport implements ModelDriven<User> { //模型驅動要使用的 private User user=new User(); public User getModel(){ return user; } //接受驗證碼: private String checkcode; public void setCheckcode(String checkcode){ this.checkcode=checkcode; } //注入UserService private UserService userService; public void setUserService(UserService userService) { this.userService = userService; } /** * 跳轉到註冊頁面的執行方法 */ public String registPage() { return "registPage"; } /** * AJAX進行一步校驗使用者名稱的執行方法 * @ throws IOException */ public String findByName() throws IOException { // 呼叫Service進行查詢: User existUser = userService.findByUsername(user.getUsername()); // 獲得response物件,向頁面輸出: HttpServletResponse response = ServletActionContext.getResponse(); response.setContentType("text/html;charset=UTF-8"); // 判斷 if (existUser != null) { // 查詢到該使用者:使用者名稱已經存在 response.getWriter().println("<font color='red'>使用者名稱已經存在</font>"); } else { // 沒查詢到該使用者:使用者名稱可以使用 response.getWriter().println("<font color='green'>使用者名稱可以使用</font>"); } return NONE; } /** * 使用者註冊的方法: */ public String regist(){ //判斷驗證碼程式 //從session中獲得驗證碼的隨機值 String checkcode1=(String)ServletActionContext.getRequest().getSession().getAttribute("checkcode"); if(!checkcode.equalsIgnoreCase(checkcode1)){ this.addActionError("驗證碼輸入錯誤!"); return "checkcodeFail"; } userService.save(user); this.addActionMessage("註冊成功!請去郵箱啟用!"); return "msg"; } /** * 使用者啟用的方法 */ public String active(){ //根據啟用碼查詢使用者: User existUser=userService.findByCode(user.getCode()); //判斷 if(existUser ==null){ //啟用碼錯誤 this.addActionMessage("啟用失敗:啟用碼錯誤!"); }else{ //啟用成功 //修改使用者的狀態 existUser.setState(1); existUser.setCode(null); userService.update(existUser); this.addActionMessage("啟用成功,請去登陸!"); } return "msg"; } /** * 跳轉到登陸頁面 */ public String loginPage(){ return "loginPage"; } /** * 登陸的方法 */ public String login(){ User existUser=userService.login(user); if(existUser==null){ //登陸失敗 this.addActionError("登陸失敗:使用者名稱或密碼錯誤或使用者未啟用!"); return LOGIN; }else{ //登陸成功 //將使用者的資訊存入到session中 ServletActionContext.getRequest().getSession().setAttribute("existUser",existUser); return "loginSuccess"; } } /** * 使用者退出的方法 */ public String quit(){ //銷燬session ServletActionContext.getRequest().getSession().invalidate(); return "quit"; } }
實體類:編寫User的實體類
<strong><span style="font-size:18px;">package cn.itcast.shop.user.vo;
/**
* 使用者名稱模組實體類:
* @author CXC
*CREATE TABLE `user` (
`uid` int(11) NOT NULL AUTO_INCREMENT,
`username` varchar(255) DEFAULT NULL,
`password` varchar(255) DEFAULT NULL,
`name` varchar(255) DEFAULT NULL,
`email` varchar(255) DEFAULT NULL,
`phone` varchar(255) DEFAULT NULL,
`addr` varchar(255) DEFAULT NULL,
`state` int(11) DEFAULT NULL,
`code` varchar(64) DEFAULT NULL,
PRIMARY KEY (`uid`)
) ENGINE=InnoDB AUTO_INCREMENT=2 DEFAULT CHARSET=utf8;
*/
public class User {
private Integer uid;
private String username;
private String password;
private String name;
private String email;
private String phone;
private String addr;
private Integer state;
private String code;
public Integer getUid() {
return uid;
}
public void setUid(Integer uid) {
this.uid = uid;
}
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 getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public String getEmail() {
return email;
}
public void setEmail(String email) {
this.email = email;
}
public String getPhone() {
return phone;
}
public void setPhone(String phone) {
this.phone = phone;
}
public String getAddr() {
return addr;
}
public void setAddr(String addr) {
this.addr = addr;
}
public Integer getState() {
return state;
}
public void setState(Integer state) {
this.state = state;
}
public String getCode() {
return code;
}
public void setCode(String code) {
this.code = code;
}
}</span></strong>
在User.hbm.xml中新增對映:
<strong><span style="font-size:18px;"><?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE hibernate-mapping PUBLIC
"-//Hibernate/Hibernate Mapping DTD 3.0//EN"
"http://www.hibernate.org/dtd/hibernate-mapping-3.0.dtd">
<hibernate-mapping>
<class name="cn.itcast.shop.user.vo.User" table="user">
<id name="uid">
<generator class="native"/>
</id>
<property name="username"/>
<property name="password"/>
<property name="name"/>
<property name="email"/>
<property name="phone"/>
<property name="addr"/>
<property name="state"/>
<property name="code"/>
</class>
</hibernate-mapping></span></strong>
配置到Spring中:
4、編寫Dao,在這塊中UserDao繼承HibernateDaoSupport
<strong style="font-family: Arial, Helvetica, sans-serif; font-size: 12px; background-color: rgb(255, 255, 255);"><span style="font-size:18px;"></span></strong>
<strong><span style="font-size:18px;">package cn.itcast.shop.user.dao;</span></strong>
import java.util.List;
import org.springframework.orm.hibernate3.support.HibernateDaoSupport;
import cn.itcast.shop.user.vo.User;
/*
*
* 使用者模組持久層程式碼:
* @author CXC
*
*/
public class UserDao extends HibernateDaoSupport{
//按照名稱查詢是否有該使用者:
public User findByUsername(String username){
String hql = "from User where username = ?";
List<User> list = (List<User>) this.getHibernateTemplate().find(hql, username);
if(list != null && list.size() > 0){
return list.get(0);
}
return null;
}
//註冊使用者存入資料庫的程式碼實現
public void save(User user){
this.getHibernateTemplate().save(user);
}
// 根據啟用碼查詢使用者
public User findByCode(String code) {
String hql = "from User where code = ?";
List<User> list = (List<User>) this.getHibernateTemplate().find(hql,code);
if(list != null && list.size() > 0){
return list.get(0);
}
return null;
}
// 修改使用者狀態的方法
public void update(User existUser) {
this.getHibernateTemplate().update(existUser);
}
//使用者登陸的方法
public User login(User user) {
// TODO Auto-generated method stub
String hql="from User where username= ? and password = ? and state= ?";
List<User> list=(List<User>) this.getHibernateTemplate().find(hql,user.getUsername(),user.getPassword(),1);
if (list !=null && list.size()>0){
return list.get(0);
}
return null;
}
}
5、編寫Service:將配置注入到sessionFactory中
<!-- 配置使用者模組的Action -->
<action name="user_*" class="userAction" method="{1}">
<result name="registPage">/WEB-INF/jsp/regist.jsp</result>
事務管理:
<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xmlns:context="http://www.springframework.org/schema/context"
xmlns:aop="http://www.springframework.org/schema/aop"
xmlns:tx="http://www.springframework.org/schema/tx"
xsi:schemaLocation="http://www.springframework.org/schema/beans
http://www.springframework.org/schema/beans/spring-beans.xsd
http://www.springframework.org/schema/context
http://www.springframework.org/schema/context/spring-context.xsd
http://www.springframework.org/schema/aop
http://www.springframework.org/schema/aop/spring-aop.xsd
http://www.springframework.org/schema/tx
http://www.springframework.org/schema/tx/spring-tx.xsd">
<!-- 配置連線池: -->
<!-- 引入外部屬性檔案 -->
<context:property-placeholder location="classpath:jdbc.properties"/>
<!-- 配置C3P0連線池 -->
<bean id="dataSource" class="com.mchange.v2.c3p0.ComboPooledDataSource">
<property name="driverClass" value="${jdbc.driver}"/>
<property name="jdbcUrl" value="${jdbc.url}"/>
<property name="user" value="${jdbc.user}"/>
<property name="password" value="${jdbc.password}"/>
</bean>
<!-- Hibernate的相關資訊 -->
<bean id="sessionFactory" class="org.springframework.orm.hibernate3.LocalSessionFactoryBean">
<!-- 注入連線池 -->
<property name="dataSource" ref="dataSource"/>
<!-- 配置Hibernate的其他的屬性 -->
<property name="hibernateProperties">
<props>
<prop key="hibernate.dialect">org.hibernate.dialect.MySQLDialect</prop>
<prop key="hibernate.show_sql">true</prop>
<prop key="hibernate.format_sql">true</prop>
<prop key="hibernate.connection.autocommit">false</prop>
<prop key="hibernate.hbm2ddl.auto">update</prop>
</props>
</property>
<!--配置 hibernate的對映檔案 -->
<property name="mappingResources">
<list>
<value>cn/itcast/shop/user/vo/User.hbm.xml</value>
</list>
</property>
</bean>
<!-- 事務管理: -->
<!-- 事務管理器 -->
<bean id="transactionManager" class ="org.springframework.orm.hibernate3.HibernateTransactionManager">
<property name="sessionFactory" ref="sessionFactory"/>
</bean>
<!-- 開啟註解事務 -->
<tx:annotation-driven transaction-manager="transactionManager"/>
<!-- Action的配置 -->
<!-- 首頁訪問的Action -->
<bean id="indexAction" class="cn.itcast.shop.index.IndexAction" scope="prototype">
<property name="categoryService" ref="categoryService"/>
<property name="productService" ref="productService"/>
</bean>
<!-- 配置驗證碼的Action -->
<bean id="checkImgAction" class="cn.itcast.shop.user.CheckImgAction" scope="prototype"></bean>
<!-- 使用者模組的Action -->
<bean id='userAction' class="cn.itcast.shop.user.UserAction" scope="prototype">
<!-- 注入Service -->
<property name="userService" ref="userService"/>
</bean>
<!-- Service的配置 -->
<bean id='userService' class="cn.itcast.shop.user.service.UserService">
<property name="userDao" ref="userDao"/>
</bean>
<!-- Dao的配置 -->
<bean id='userDao' class="cn.itcast.shop.user.dao.UserDao">
<property name="sessionFactory" ref="sessionFactory"/>
</bean>
</beans>
總結:
剛開始學習SSH網上商城,接觸到了好多東西,SSH(spring structs,hibernate)通過這個專案讓我對以後的學習更感興趣,通過敲這一條線,先來梳理一下簡單的邏輯。