这几天抽着中午的空隙,敲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异步验证是否存在该用户名的更多相关文章

  1. osx – 无法创建目录/ var / teamsserver

    OpenSSH_6.2p2,OSSLShim0.9.8r8Dec2011debug1:Readingconfigurationdata/etc/ssh_configdebug1:/etc/ssh_configline20:Applyingoptionsfor*debug1:Connectingto1.2.3.4[1.2.3.4]portPORT.debug1:Connectionestablished.Couldnotcreatedirectory‘/var/teamsserver/.ssh’.debug

  2. ios – Xcode Server 4.0 git从构建触发脚本推送

    我为一个托管在github上的项目安装了一个XcodeBot.我按照步骤和设置机器人来使用我现有的SSH密钥.验证成功,项目结算和建立.然后,我在预触发器操作中添加了一个shell脚本,它增加了plist中的版本,将其标记,并将该更改提交到github.但是当我尝试从shell脚本执行gitpush时,我得到:–推送到git@github.com:spex-app/spex-ios.git权限被拒

  3. ios – Xcode上传错误:无法打开ssh会话. (16)

    注意:我们终于上传了该应用程序,但是我们并没有真正解决这个问题,所以如果有人可以分享一些有关这个问题的宝贵意见或经验,我将不胜感激.我也检查了以下2个类似的问题,但这些没有帮助:>Erroruploadingiosapplicationtoitunesconnect“failedtoopensshsession(16)”>AppStoresubmission/distributionerror“f

  4. 应用程序关闭时的iOS任务

    我正在构建一个应用程序,通过ajax将文件上传到服务器.问题是用户很可能有时不会有互联网连接,并且客户希望在用户重新连接时安排ajax调用.这可能是用户在离线时安排文件上传并关闭应用程序.应用程序关闭时可以进行ajax调用吗?

  5. Swift学习笔记十二——nil的聚合运算 Nil Coalescing Operator

    运算符为两个问号??。a定义的时候声明为Optional。需求是这样的,一个App,需要用户输入用户名,如果输入的的确是用户名,则显示“Hello用户名”,没有输入显示“HelloGuest”。使用if-else显得比较冗长,我们可以使用三元运算符实现,代码如下:输出结果如下:符合我们的预期。。现在将会用到nil的聚合运算,即NilCoalescingOperator。.总结,该需求使用nil聚合运算显得非常简单,但是理解上有一定的困难,要在以后的学习中慢慢领悟。

  6. swift详解之二十--------在xcode中使用git管理源代码,将代码提交到github

    在xcode中使用git管理源代码,将代码提交到github本文记录一下如何在Xcode中使用Git作为源代码控制工具,以及如何将本地的Git仓库和远程Github上的仓库集成起来,虽然这章节和swift没有关系,但我还是放在这里。对详细的git操作可以看在Xcode中使用Git进行源码控制讲得很详细,很好。将xcode与github链接起来。

  7. Swift guard 用法及特点

    guard的使用1.guard是Swift2.0新增的语法2.它与if语句非常类似,它设计的目的是提高程序的可读性3.guard语句必须带有else语句,它的语法如下:3.1.当条件表达式为true的时候跳过else语句中的内容,执行语句组内容3.2.条件表达式为false的时候执行else语句中的内容,跳转语句一般是return,break,continue和throwguard用法举例以下举例

  8. 使用OSC生成SSH

    在很多项目开始前,大家可能都愿意把项目或者自己封装的代码放到github上,但是有一点蛋疼的就是如果要在github上新建私有的项目是要收费的,所以我选择了OSC,这个不仅可以吧github的项目转接到OSC上,而且OSC还可新建私有的项目。好了,牛逼不吹了,开始下面部署SSH的步骤。第一步访问git.oschina.net,注册自己的账号第二步访问如下界面第三步打开终端第四步查看公钥第五步第六步如果你看到了这个WelcometoGit@OSC,yourname!标识,就说明成功了。

  9. android – Phonegap本地构建 – jquery ajax错误:readystate 0 responsetext status 0 statustext error

    解决方法您是否在索引文件中包含了内容安全元标记?

  10. Ajax简单的异步交互及Ajax原生编写

    一提到异步交互大家就会说ajax,仿佛ajax这个技术已经成为了异步交互的代名词.那下面将研究ajax的核心对象

随机推荐

  1. xe-ajax-mock 前端虚拟服务

    最新版本见Github,点击查看历史版本基于XEAjax扩展的Mock虚拟服务插件;对于前后端分离的开发模式,ajax+mock使前端不再依赖后端接口开发效率更高。CDN使用script方式安装,XEAjaxMock会定义为全局变量生产环境请使用xe-ajax-mock.min.js,更小的压缩版本,可以带来更快的速度体验。

  2. vue 使用 xe-ajax

    安装完成后自动挂载在vue实例this.$ajaxCDN安装使用script方式安装,VXEAjax会定义为全局变量生产环境请使用vxe-ajax.min.js,更小的压缩版本,可以带来更快的速度体验。cdnjs获取最新版本点击浏览已发布的所有npm包源码unpkg获取最新版本点击浏览已发布的所有npm包源码AMD安装require.js安装示例ES6Module安装通过Vue.use()来全局安装示例./Home.vue

  3. AJAX POST数据中文乱码解决

    前端使用encodeURI进行编码后台java.net.URLDecoder进行解码编解码工具

  4. Koa2框架利用CORS完成跨域ajax请求

    实现跨域ajax请求的方式有很多,其中一个是利用CORS,而这个方法关键是在服务器端进行配置。本文仅对能够完成正常跨域ajax响应的,最基本的配置进行说明。这样OPTIONS请求就能够通过了。至此为止,相当于仅仅完成了预检,还没发送真正的请求呢。

  5. form提交时,ajax上传文件并更新到&lt;input&gt;中的value字段

  6. ajax的cache作用

    filePath="+escape;},error:{alert;}});解决方案:1.加cache:false2.url加随机数正常代码:网上高人解读:cache的作用就是第一次请求完毕之后,如果再次去请求,可以直接从缓存里面读取而不是再到服务器端读取。

  7. 浅谈ajax上传文件属性contentType = false

    默认值为contentType="application/x-www-form-urlencoded".在默认情况下,内容编码类型满足大多数情况。在这里,我们主要谈谈contentType=false.在使用ajax上传文件时:在其中先封装了一个formData对象,然后使用post方法将文件传给服务器。说到这,我们发现在JQueryajax()方法中我们使contentType=false,这不是冲突了吗?这就是因为当我们在form标签中设置了enctype=“multipart/form-data”,

  8. 909422229_ajaxFileUpload上传文件

    ajaxFileUpload.js很多同名的,因为做出来一个很容易。我上github搜AjaxFileUpload出来很多类似js。ajaxFileUpload是一个异步上传文件的jQuery插件传一个不知道什么版本的上来,以后不用到处找了。语法:$.ajaxFileUploadoptions参数说明:1、url上传处理程序地址。2,fileElementId需要上传的文件域的ID,即的ID。3,secureuri是否启用安全提交,默认为false。4,dataType服务器返回的数据类型。6,error

  9. AJAX-Cache:一款好用的Ajax缓存插件

    原文链接AJAX-Cache是什么Ajax是前端开发必不可少的数据获取手段,在频繁的异步请求业务中,我们往往需要利用“缓存”提升界面响应速度,减少网络资源占用。AJAX-Cache是一款jQuery缓存插件,可以为$.ajax()方法扩展缓存功能。

  10. jsf – Ajax update/render在已渲染属性的组件上不起作用

    我试图ajax更新一个有条件渲染的组件。我可以确保#{user}实际上是可用的。这是怎么引起的,我该如何解决呢?必须始终在ajax可以重新呈现之前呈现组件。Ajax正在使用JavaScriptdocument.getElementById()来查找需要更新的组件。但是如果JSF没有将组件放在第一位,那么JavaScript找不到要更新的内容。解决方案是简单地引用总是渲染的父组件。

返回
顶部