2. 程式人生 > >【SSH網上商城】——AJAX非同步驗證是否存在該使用者名稱

【SSH網上商城】——AJAX非同步驗證是否存在該使用者名稱

阿新 • • 發佈：2019-01-06

        這幾天抽著中午的空隙，敲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程式碼:
<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>
3.編寫Action

在編寫action前，需要先建立相應的包和類，要用到的user的包和類，見下圖：

userAction:接收username:模型驅動接收 
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）通過這個專案讓我對以後的學習更感興趣，通過敲這一條線，先來梳理一下簡單的邏輯。

相關推薦

【SSH網上商城】——AJAX非同步驗證是否存在該使用者名稱

        這幾天抽著中午的空隙，敲SSH網上商城，剛開始敲的時候，弄SSH的框架花了段時間，框架搭完以後，開始首頁跳轉，一切都開始步入正軌了。敲了幾集視訊，感覺SSH網上商城的專案挺好玩的，雖然開始學習的時候不太懂，但是看著功能一個一個的實現，很有成就感。 使用aja

SSH學習02 【SSH網上商城專案實戰02】基本增刪查改、Service和Action的抽取以及使用註解替換xml

【SSH網上商城專案實戰02】基本增刪查改、Service和Action的抽取以及使用註解替換xml 轉自：https://blog.csdn.net/eson_15/article/details/51297698 上一節我們搭建好了Struts2、Hibernate和Spring的開

【SSH網上商城專案實戰05】完成資料庫的級聯查詢和分頁

  轉自：https://blog.csdn.net/eson_15/article/details/51320212 上一節我們完成了EasyUI選單的實現。這一節我們主要來寫一下CategoryServiceImpl實現類，完成資料庫的級聯查詢。一般專案從後往前做，先做se

【SSH網上商城專案實戰08】查詢和刪除商品類別功能的實現

  轉自：https://blog.csdn.net/eson_15/article/details/51338991 上一節我們完成了使用DataGrid顯示所有商品資訊，這節我們開始新增幾個功能：新增、更新、刪除和查詢。首先我們實現下前臺的顯示，然後再做後臺獲取資料。

【SSH網上商城專案實戰07】Struts2和Json的整合

    轉自：https://blog.csdn.net/eson_15/article/details/51332758   上一節我們完成了DataGrid顯示jason資料，但是沒有和後臺聯絡在一起，只是單純地顯示了我們自己弄的json資

【SSH網上商城專案實戰06】基於DataGrid的資料顯示

  轉自：https://blog.csdn.net/eson_15/article/details/51322262 1. 回顧一下第4節內容         在第4節中，我們使用Eas

【SSH網上商城專案實戰11】查詢和刪除商品功能的實現

  轉自：https://blog.csdn.net/eson_15/article/details/51360804   在第8節我們完成了查詢和刪除商品類別的功能，那麼現在實現查詢和刪除商品的功能就很好做了，原理和第8節一模一樣，只是修改一些引數，比如請求不同的a

【SSH網上商城專案實戰10】商品類基本模組的搭建

      前面我們完成了與商品類別相關的業務邏輯，接下來我們開始做具體商品部分。 1. 資料庫建表並對映Model         首先我們在資料庫中新建一張表，然後使用逆

【SSH網上商城專案實戰17】購物車基本功能的實現

  轉自：https://blog.csdn.net/eson_15/article/details/51418350 上一節我們將商品的詳細頁面做完了，並使用了Hibernate的二級快取載入詳細頁面來提高系統的效能。這節我們開始做購物車部分。 1. 新增新的表

【SSH網上商城專案實戰16】Hibernate的二級快取處理首頁的熱門顯示

    轉自：https://blog.csdn.net/eson_15/article/details/51405911   網上商城首頁都有熱門商品，那麼這些商品的點選率是很高的，當用戶點選某個熱門商品後需要進入商品的詳細資訊頁面，就像淘寶裡面

【SSH網上商城專案實戰15】執行緒、定時器同步首頁資料（類似於部落格定期更新排名）

  轉自：https://blog.csdn.net/eson_15/article/details/51387378   上一節我們做完了首頁UI介面，但是有個問題：如果我在後臺添加了一個商品，那麼我必須重啟一下伺服器才能重新同步後臺資料，然後重新整理首頁才能同步資

【SSH網上商城專案實戰14】商城首頁UI的設計

  轉自：https://blog.csdn.net/eson_15/article/details/51373403 前面我們利用EasyUI和SSH搭建好了後臺的基本框架，做好了後臺的基本功能，包括對商品類別的管理和商品的管理等，這一節我們開始搭建前臺頁面。 做首頁的思

【SSH網上商城專案實戰13】Struts2實現檔案上傳功能

  轉自：https://blog.csdn.net/eson_15/article/details/51366384 上一節我們做完了新增和更新商品的功能，這兩個部分裡有涉及到商品圖片的上傳，並沒有詳細解說。為此，這篇文章詳細介紹一下Struts2實現檔案上傳的功能。 1

【SSH網上商城專案實戰12】新增和更新商品功能的實現

  新增商品部分原理和新增商品類別是一樣的，不過要比商品類別複雜，因為商品的屬性有很多，對應的資料庫中的欄位也就多了，新增商品還有個選項是上傳圖片，這一小塊內容會在下一篇部落格中單獨說明，因為這涉及到一個知識點，就是Struts2實現檔案上傳功能。其他廢話不多說了，現在開始完善新增

【SSH網上商城專案實戰18】過濾器實現購物登入功能的判斷

    轉自：https://blog.csdn.net/eson_15/article/details/51425010     上一節我們做完了購物車的基本操作，但是有個問題是：當用戶點選結算

【SSH網上商城專案實戰21】從Demo中看易寶支付的流程

      　　這一節我們先寫一個簡單點的Demo來測試易寶支付的流程，熟悉這個流程後，再做實際的開發，因為是一個Demo，所以我沒有考慮一些設計模

【SSH網上商城專案實戰23】完成線上支付功能

  　 轉自： https://blog.csdn.net/eson_15/article/details/51464415　 上一節我們做好了支付頁面的顯示，從上一節支付頁面顯示的jsp程式碼中可以看出，當用戶點選

【SSH網上商城專案實戰25】使用java email給使用者傳送郵件

    　　當用戶購買完商品後，我們應該向使用者傳送一封郵件，告訴他訂單已生成之類的資訊，郵箱地址是從使用者的基本資訊中獲取，好了，首先我們來看一下java中傳送郵件的方法。

【SSH網上商城專案實戰24】Struts2中如何處理多個Model請求

    1. 問題的提出 　　Struts2中如果實現了ModelDriven<model>介面

【SSH網上商城專案實戰26】完成訂單支付後的簡訊傳送功能

  　　上一節我們使用了Java mail完成了給買家傳送郵件的功能，還遺留一個功能，就是給買家傳送簡訊，告訴他訂單已經生成之類的。這一節主要介紹一下如何在使用者支付完成後自動給使用者傳送簡訊。