版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/qq_38390092/article/details/79785522
整体结构 :
建议：
一般先写服务端层，最后写客户端层（客户端层可以先不用管）
第一步：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_user_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>