IDEA +SpringMVC+Mybatis+JSON+AJAX(登录注册)应用
2018-04-02 10:24
711 查看
整体结构 :
建议: 一般先写服务端层,最后写客户端层(客户端层可以先不用管)
第一步:main下建立java文件:
创建相应格式文件夹 main-Java下(控制层、数据访问层、实体类、业务层、辅助方法层) resopurces下(sql写mapper文件夹、SpringContext配置文件)
第二步:编写配置文件(pom.xml):
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/maven-v4_0_0.xsd"> <modelVersion>4.0.0</modelVersion> <groupId>spring-mybatis-study</groupId> <artifactId>com.study</artifactId> <packaging>war</packaging> <version>1.0-SNAPSHOT</version> <name>com.study Maven Webapp</name> <url>http://maven.apache.org</url> <dependencies> <dependency> <groupId>junit</groupId> <artifactId>junit</artifactId> <version>3.8.1</version> <scope>test</scope> </dependency> <!--Spring --> <dependency> <groupId>org.springframework</groupId> <artifactId>spring-context</artifactId> <version>4.3.9.RELEASE</version> </dependency> <dependency> <groupId>org.springframework</groupId> <artifactId>spring-web</artifactId> <version>4.3.9.RELEASE</version> </dependency> <!-- spring-webmvc --> <dependency> <groupId>org.springframework</groupId> <artifactId>spring-webmvc</artifactId> <version>4.3.9.RELEASE</version> </dependency> <dependency> <groupId>org.mybatis</groupId> <artifactId>mybatis</artifactId> <version>3.3.0</version> </dependency> <!-- mysql 连接--> <dependency> <groupId>mysql</groupId> <artifactId>mysql-connector-java</artifactId> <version>5.1.39</version> </dependency> <!-- https://mvnrepository.com/artifact/net.sf.json-lib/json-lib --> <dependency> <groupId>net.sf.json-lib</groupId> <artifactId>json-lib</artifactId> <version>2.4</version> </dependency> <!-- https://mvnrepository.com/artifact/com.fasterxml.jackson.core/jackson-core --> <dependency> <groupId>com.fasterxml.jackson.core</groupId> <artifactId>jackson-core</artifactId> <version>2.9.4</version> </dependency> <!-- https://mvnrepository.com/artifact/com.fasterxml.jackson.core/jackson-databind --> <dependency> <groupId>com.fasterxml.jackson.core</groupId> <artifactId>jackson-databind</artifactId> <version>2.9.3</version> </dependency> <!-- https://mvnrepository.com/artifact/commons-dbcp/commons-dbcp --> <dependency> <groupId>commons-dbcp</groupId> <artifactId>commons-dbcp</artifactId> <version>1.4</version> </dependency> <!--jstl--> <dependency> <groupId>jstl</groupId> <artifactId>jstl</artifactId> <version>1.2</version> </dependency> <dependency> <groupId>taglibs</groupId> <artifactId>standard</artifactId> <version>1.1.2</version> </dependency> <!--mybatis-spring整合包,这样就可以通过spring配置bean的方式进行mybatis配置了, 不然需要单独使用mybatis的配置--> <dependency> <groupId>org.mybatis</groupId> <artifactId>mybatis-spring</artifactId> <version>1.2.2</version> </dependency> <!-- https://mvnrepository.com/artifact/org.springframework/spring-tx --> <dependency> <groupId>org.springframework</groupId> <artifactId>spring-tx</artifactId> <version>4.3.14.RELEASE</version> </dependency> <!-- https://mvnrepository.com/artifact/org.springframework/spring-jdbc --> <dependency> <groupId>org.springframework</groupId> <artifactId>spring-jdbc</artifactId> <version>4.3.14.RELEASE</version> </dependency><!-- https://mvnrepository.com/artifact/commons-codec/commons-codec 下面加密包--> <dependency> <groupId>commons-codec</groupId> <artifactId>commons-codec</artifactId> <version>1.10</version> </dependency> <!-- https://mvnrepository.com/artifact/org.webjars.bower/jquery --> <dependency> <groupId>org.webjars.bower</groupId> <artifactId>jquery</artifactId> <version>3.2.1</version> </dependency> </dependencies> <build> <finalName>com.study</finalName> </build> </project>
第二步:配置StringContext文件(内部包括数据库连接、扫描组件等)
<?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:util="http://www.springframework.org/schema/util" xmlns:jee="http://www.springframework.org/schema/jee" xmlns:tx="http://www.springframework.org/schema/tx" xmlns:jpa="http://www.springframework.org/schema/data/jpa" xmlns:mvc="http://www.springframework.org/schema/mvc" xsi:schemaLocation=" http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans-3.2.xsd http://www.springframework.org/schema/context http://www.springframework.org/schema/context/spring-context-3.2.xsd http://www.springframework.org/schema/util http://www.springframework.org/schema/util/spring-util-3.2.xsd http://www.springframework.org/schema/jee http://www.springframework.org/schema/jee/spring-jee-3.2.xsd http://www.springframework.org/schema/tx http://www.springframework.org/schema/tx/spring-tx-3.2.xsd http://www.springframework.org/schema/data/jpa http://www.springframework.org/schema/data/jpa/spring-jpa-1.3.xsd http://www.springframework.org/schema/mvc http://www.springframework.org/schema/mvc/spring-mvc-3.2.xsd"> <bean id="dbcp" class="org.apache.commons.dbcp.BasicDataSource"> <property name="username" value="root"></property> <property name="password" value="root"></property> <property name="driverClassName" value="com.mysql.jdbc.Driver"></property> <property name="url" value="jdbc:mysql://127.0.0.1:3306/note?user=root&password=root"/> </bean> <bean id="ssf" class="org.mybatis.spring.SqlSessionFactoryBean"> <property name="dataSource" ref="dbcp"> </property> <property name="mapperLocations" value="classpath:sql/*.xml"/> </bean> <bean class="org.mybatis.spring.mapper.MapperScannerConfigurer"> <property name="basePackage" value="org.tarena.note.dao"/> <!-- 自动注入sqlsessionfactory--> </bean> <!--开启扫描,扫描Controller,Service组件--> <context:component-scan base-package="org.tarena.note"/> <!--handlermapping,支持@RequestMapping,@ResponseBody--> <mvc:annotation-driven/> </beans>
第三步:编写mapper文件:
其中
<mapper namespace="org.tarena.note.dao.UserDao">语句为接口调用路径,将来用于被调用的接口
resultType:结果类型;
parameterType:传入参数类型
<?xml version="1.0" encoding="UTF-8" ?> <!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd"> <mapper namespace="org.tarena.note.dao.UserDao"> <select id="findByName" parameterType="string" resultType="org.tarena.note.entity.User"> select * from cn_user where cn_user_name=#{name} </select> <insert id="save" parameterType="org.tarena.note.entity.User"> insert into cn_user(cn_user_id,cn_user_name,cn_user_password,cn_user_token,cn_use 15fdb r_nick) value(#{cn_user_id},#{cn_user_name},#{cn_user_password},#{cn_user_token},#{cn_user_nick}) </insert> </mapper>
第四步:编写实体类
(user)与数据库名称相对应
package org.tarena.note.entity; import java.io.Serializable; public class User implements Serializable{ private String cn_user_id; private String cn_user_name; private String cn_user_token; private String cn_user_nick; private String cn_user_password; public String getCn_user_id() { return cn_user_id; } public void setCn_user_id(String cn_user_id) { this.cn_user_id = cn_user_id; } public String getCn_user_desc() { return cn_user_nick; } public void setCn_user_desc(String cn_user_desc) { this.cn_user_nick = cn_user_nick; } public String getCn_user_token() { return cn_user_token; } public void setCn_user_token(String cn_user_token) { this.cn_user_token = cn_user_token; } public String getCn_user_password() { return cn_user_password; } public void setCn_user_password(String cn_user_password) { this.cn_user_password = cn_user_password; } public String getCn_user_name() { return cn_user_name; } public void setCn_user_name(String cn_user_name) { this.cn_user_name = cn_user_name; } }
NoteResult(我们定义一个实体类,用于返回结果):
status:我们设置状态 0表示登陆成功 1 表示用户名已被占用 2 表示密码错误 msg: 当用户登陆不成功 ,返回对应信息 data: 用于保留数据 ,方便以后cookie的使用
package org.tarena.note.entity; import java.io.Serializable; /** * Created by TTOP on 2018/3/24. */ public class NoteResult implements Serializable{ private int status; //状态 private String msg; //消息 private Object data; //数据 public Object getData() { return data; } public void setData(Object data) { this.data = data; } public String getMsg() { return msg; } public void setMsg(String msg) { this.msg = msg; } public int getStatus() { return status; } public void setStatus(int status) { this.status = status; } }
第五步:写数据库接口
package org.tarena.note.dao; import org.tarena.note.entity.User; /** * Created by TTOP on 2018/3/23. */ public interface UserDao { public User findByName(String name); public void save(User user); }
第六步:编写业务层(最关键的一步,也是最容易出错的一部)
首先编写业务层接口,方便调用业务:
package org.tarena.note.service; import org.tarena.note.entity.NoteResult; import java.security.NoSuchAlgorithmException; /** * Created by TTOP on 2018/3/24. */ public interface UserService { public NoteResult checkLogin(String name,String pwd) throws NoSuchAlgorithmException; public NoteResult regist(String name, String password, String nickname) throws NoSuchAlgorithmException; }
其次编写相应业务: 此处:result.setData(user.getCn_user_id());//返回userID 当用户注册成功后返回相应ID 用于以后cookie的调用 此处两个方法 一个用于注册 一个用于登陆
package org.tarena.note.service; import org.springframework.stereotype.Service; import org.tarena.note.dao.UserDao; import org.tarena.note.entity.NoteResult; import org.tarena.note.entity.User; import org.tarena.note.util.NoteUtil; import javax.annotation.Resource; import java.security.NoSuchAlgorithmException; @Service //扫描Service组件 public class UserServiceImpl implements UserService { @Resource private UserDao userDao; //注入 public NoteResult checkLogin(String name,String pwd) throws NoSuchAlgorithmException { NoteResult result = new NoteResult(); User user = userDao.findByName(name); if(user==null){ result.setStatus(1); result.setMsg("用户名不存在"); return result; } //将用户输入的pwd密码加密 String md5_pwd=NoteUtil.md5(pwd); //与数据库密码比对 if(!user.getCn_user_password().equals( md5_pwd)){ result.setStatus(2); result.setMsg("密码不正确"); return result; } result.setStatus(0); result.setMsg("用户名和密码正确"); result.setData(user.getCn_user_id());//返回userID return result; } public NoteResult regist(String name, String password, String nickname) throws NoSuchAlgorithmException { NoteResult result = new NoteResult(); //检测用户名是否被占用 User hash_user=userDao.findByName(name); if(hash_user!=null){ result.setStatus(1); result.setMsg("用户名已被占用"); return result; } User user = new User(); user.setCn_user_name(name); String md5_pwd = NoteUtil.md5(password); user.setCn_user_password(md5_pwd); user.setCn_user_desc(nickname); String userId=NoteUtil.createId(); user.setCn_user_id(userId); //调用userDao保存 userDao.save(user); result.setStatus(0); result.setMsg("注册成功"); return result; } }
第七步:写控制层:
首先注册
package org.tarena.note.controller.user; import org.springframework.stereotype.Controller; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.bind.annotation.ResponseBody; import org.tarena.note.entity.NoteResult; import org.tarena.note.service.UserService; import javax.annotation.Resource; import java.security.NoSuchAlgorithmException; /** * Created by TTOP on 2018/3/27. */ @Controller @RequestMapping("/user") public class RegistController { @Resource private UserService userService; @RequestMapping("/regist.do") @ResponseBody public NoteResult execute(String name,String password ,String nickname) throws NoSuchAlgorithmException { NoteResult result= userService.regist(name, password, nickname); return result; } }
其次登陆
(@ResponseBody 注解的作用是将controller的方法返回的对象通过适当的转换器转换为JSON对象返回)
package org.tarena.note.controller.user; import org.springframework.stereotype.Controller; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.bind.annotation.ResponseBody; import org.tarena.note.dao.UserDao; import org.tarena.note.entity.NoteResult; import org.tarena.note.entity.User; import org.tarena.note.service.UserService; import javax.annotation.Resource; import java.security.NoSuchAlgorithmException; /** * Created by TTOP on 2018/3/24. */ @Controller @RequestMapping("/user") public class LoginController { @Resource private UserService userService; @RequestMapping("/login.do") @ResponseBody public NoteResult execute(String name,String pwd) throws NoSuchAlgorithmException { NoteResult result = userService.checkLogin(name,pwd); return result; } }
第八步:写辅助功能(一般为密码加密,拦截器等,本人此处写的为密码加密功能,用的时候直接调用即可)
package org.tarena.note.util; import org.apache.commons.codec.binary.Base64; import sun.misc.BASE64Encoder; import java.security.MessageDigest; import java.security.NoSuchAlgorithmException; import java.util.UUID; /** * Created by TTOP on 2018/3/26. */ public class NoteUtil { public static String createId(){ UUID uuid = UUID.randomUUID(); return uuid.toString(); } public static String md5(String msg) throws NoSuchAlgorithmException { MessageDigest md = MessageDigest.getInstance("MD5"); byte[] input = msg.getBytes(); byte[] output = md.digest(input); String result= Base64.encodeBase64String(output); return result; } public static void main (String [] args) throws NoSuchAlgorithmException { System.out.println(md5("1234"));//测试 System.out.println(md5("saddsasdadsa")); } }
以上为服务端,接下去写客户端
第一步:页面,注册页面的导入(此处偷懒直接拿了别人的登陆注册页面)第二步:导入相应需要用的脚本:
第三步:编写JS脚本代码用于与服务端的交互(此处应用了AJAX 返回的是JSON对象)
此处应有cookie,当登陆成功后调用注册后ID(可以拉回前面去看,请保持uid名称的一致性),增加cookie存储两小时,该用户不用再登陆
//result是服务器返回的json结果 if(result.status==0){ var userId = result.data; addCookie("uid",userId,2);//存储2小时 window.location.href="edit.html";
注册:
$(function(){ $("#regist_button").click(function(){ //获取表单信息 var name = $("#regist_username").val().trim(); var nick=$("#nickname").val().trim(); var password = $("#regist_password").val().trim(); var final_password=$("#final_password").val().trim(); //发送Ajax请求 $.ajax({ url:"http://localhost:8080/user/regist.do", type:"post", data:{"name":name,"password":password,"nickname":nick}, dataType:"json", success:function(result){ if(result.status==0){ alert(result.msg); $("#back").click();//触发返回按钮的单击 }else if(result.status==1){ //用户已存在 $("#warning_1 span").html(result.msg); $("#warning_1").show();//显示提示信息 } } }); }); })
登陆:
$(function(){ $("#login").click(function(){ //清空数据 $("#count_msg").html(" "); $("#password_msg").html(" "); //检查数据格式 var ok =true; if(name==""){ $("#count_msg").html("用户名不能为空"); ok=false; }2 if(password==""){ $("#password_msg").html("密码不能为空"); ok=false; } //获取请求数据 var name=$("#count").val().trim(); var password = $("#password").val().trim(); if(ok){ //发送Ajax请求 $.ajax({ url:"http://localhost:8080/user/login.do", type:"post", data:{"name":name,"pwd":password}, dataType:"json", success:function(result){ //result是服务器返回的json结果 if(result.status==0){ var userId = result.data; addCookie("uid",userId,2);//存储2小时 window.location.href="edit.html"; }else if (result.status==1){ $("#count_msg").html(result.msg); }else if(result.status==2){ $("#password_msg").html(result.msg); } } }); } }); });
第四部:在此处相应页面进行调用所有脚本,和你写的JS脚本
<head> <meta charset="utf-8"> <script type="text/javascript" src="scripts/jquery.min.js"></script> <script type="text/javascript" src="scripts/cookie_util.js"></script> <script type="text/javascript" src="scripts/login.js"></script> <script type="text/javascript" src="scripts/regist.js"> </script>
全局:
<!DOCTYPE html>
<html>
<head> <meta charset="utf-8"> <script type="text/javascript" src="scripts/jquery.min.js"></script> <script type="text/javascript" src="scripts/cookie_util.js"></script> <script type="text/javascript" src="scripts/login.js"></script> <script type="text/javascript" src="scripts/regist.js"> </script>
<link rel="stylesheet" href="styles/login.css"/>
</head>
<body>
<div class="global">
<div class="log log_in" tabindex='-1' id='dl'>
<dl>
<dt>
<div class='header'>
<h3>登 录</h3>
</div>
</dt>
<dt></dt>
<dt>
<div class='letter'>
用户名: <input type="text" name="" id="count" tabindex='1'/>
<span id="count_msg"></span>
</div>
</dt>
<dt>
<div class='letter'>
密 码: <input type="password" name="" id="password" tabindex='2'/>
<span id="password_msg"></span>
</div>
</dt>
<dt>
<div>
<input type="button" name="" id="login" value=' 登 录 ' tabindex='3'/>
<input type="button" name="" id="sig_in" value=' 注 册 ' tabindex='4'/>
</div>
</dt>
</dl>
</div>
<div class="sig sig_out" tabindex='-1' id='zc' style='visibility:hidden;'>
<dl>
<dt>
<div class='header'>
<h3>注 册</h3>
</div>
</dt>
<dt></dt>
<dt>
<div class='letter'>
用户名: <input type="text" name="" id="regist_username" tabindex='5'/>
<div class='warning' id='warning_1'><span>该用户名不可用</span></div>
</div>
</dt>
<dt>
<div class='letter'>
昵 称: <input type="text" name="" id="nickname" tabindex='6'/>
</div>
</dt>
<dt>
<div class='letter'>
密 码: <input type="password" name="" id="regist_password" tabindex='7'/>
<div class='warning' id='warning_2'><span>密码长度过短</span></div>
</div>
</dt>
<dt>
<div class='password'>
确认密码: <input type="password" name="" id="final_password" tabindex='8'/>
<div class='warning' id='warning_3'><span>密码输入不一致</span></div>
</div>
</dt>
<dt>
<div>
<input type="button" name="" id="regist_button" value=' 注 册 ' tabindex='9'/>
<input type="button" name="" id="back" value=' 返 回 ' tabindex='10'/>
<script type="text/javascript">
function get(e){
return document.getElementById(e);
}
get('sig_in').onclick=function(){
get('dl').className='log log_out';
get('zc').className='sig sig_in';
}
get('back').onclick=function(){
get('zc').className='sig sig_out';
get('dl').className='log log_in';
}
window.onload=function(){
var t =setTimeout("get('zc').style.visibility='visible'",800);
get('final_password').onblur=function(){
var npassword=get('regist_password').value;
var fpassword=get('final_password').value;
if(npassword!=fpassword){
get('warning_3').style.display='block';
}
}
get('regist_password').onblur=function(){
var npassword=get('regist_password').value.length;
if(npassword<6&&npassword>0){
get('warning_2').style.display='block';
}
}
get('regist_password').onfocus=function(){
get('warning_2').style.display='none';
}
get('final_password').onfocus=function(){
get('warning_3').style.display='none';
}
}
</script>
</div>
</dt>
</dl>
</div>
</div>
</body>
</html>
相关文章推荐
- Spring MVC+mybatis实现注册登录功能
- spring mvc+spring+mybatis+ajax实现登录验证
- Ajax+SpringMVC+Spring+Mybatis+MySql+js用户注册实例
- 27、SSH框架-Ajax+SpringMVC+Spring+Mybatis+MySql+js用户注册实例(2)
- 【Spring+SpringMVC+Mybatis】利用SSM整合,完成用户登录、注册、修改密码系统
- Ajax+SpringMVC+JSON登录验证
- json 字符串转对象 springmvc +mybatis +ajax
- json 字符串转对象 springmvc +mybatis +ajax
- 在springMVC+mybatis+Ajax+JSON+jQuery easyui的项目中,自定义全局异常处理器
- 使用springmvc+mybatis实现增删改查并进行登录注册功能
- Spring MVC + mybatis实现的注册登录
- 力所能及之springmvc+ajax+jquery+json实现登录异步校验用户名是否存在
- Spring MVC + mybatis实现的注册登录
- IDEA搭建Spring MVC + Spring + Mybatis 项目(单模块 多模块)
- SpringMVC+mybaits+mysql实现简单的登录注册
- IDEA中SpringMvc+Mybatis整合
- Spring MVC +MyBatis +MySQL 登录查询Demo 解决了mybatis异常【转】
- 【MVC】会员注册/登录,普通验证,会员名是否注册Ajax验证以及会员邮件验证实现原理
- Spring 3.2.* MVC通过Ajax获取JSON数据报406错误
- Ajax SpringMvc 实现登录请求