整体思路。
1.登录界面，输入正确的账号密码，跳转到用户显示界面。不正确则显示错误信息。
2.注册界面，输入账号密码昵称，假如3者有一个为空，显示输入有误请重新输入。假如用户名存在于数据库，显示用户以存在请重新输入。所以还要编写一个findUserByName的接口，作用是查询数据库中是否以存在这条数据。
均使用ajax实现异步请求。
常见的问题
在连接数据库的过程中，很容易出现一些错误。比如数据表名字、账号、密码填写错误。如果控制台输出有关SQL方面错误，请认真检查mybatis配置、dao层SQL语句是否编写错误。
项目格式:
Controller、dao、model、service，分别是控制层、持久层、数据模型层、业务处理层。
1529458005(1).jpg
数据库有4个字段: id(用户编号)、user_name(用户名称)、login_name(登录名称)、password(密码)。
用户登录用的是登录名(login_name) 、密码(password)。
2.jpg
数据库连接配置
Spring-mybatis.xml
<!-- 配置数据库相关参数properties的属性：${url} -->
<context:property-placeholder location="classpath*:jdbc.properties"/>
<!-- 数据库连接池 -->
<bean id="dataSource" class="org.apache.commons.dbcp.BasicDataSource">
<property name="driverClassName" value="${jdbc.driver}"/>
<property name="url" value="${jdbc.url}"/>
<property name="username" value="${jdbc.username}"/>
<property name="password" value="${jdbc.password}"/>
</bean>
jdbc.properties
jdbc.driver=com.mysql.jdbc.Driver
jdbc.url=jdbc:mysql://localhost:3306/userdb?useUnicode=true&characterEncoding=UTF-8
jdbc.username=root
jdbc.password=root
首先是根据数据表编写实体User.java。 dao层 定义方法的接口。userMapper.java编写接口。userMapper.xml编写sql语句。
1.根据数据表编写实体类:User.java
private Integer id;
private String user_name;
private String login_name;
private String password;
getter/setter方法
2.dao层编写接口:userMapper.java
User login(@Param("login_name") String login_name, @Param("password") String password);
boolean register(@Param("login_name") String login_name,
@Param("password") String password, @Param("user_name") String user_name);
3.编写sql语句:userMapper.xml
<!--登录-->
<select id="login" resultMap="BaseResultMap" parameterType="String">
select login_name, password from User
WHERE login_name = #{login_name} AND password= #{password}
</select>
<!--注册-->
<insert id="register" parameterType="com.ssm.model.User">
insert into User (login_name,password,user_name)
values (#{login_name}, #{password}, #{user_name})
</insert>
<!--验证用户是否存在-->
<select id="findUserByLgName" resultType="int">
select count(*) from user where login_name like #{login_name}
</select>
service层专注于业务逻辑 ，可以根据userMapper.JAVA编写接口，然后编写实 现类，这里可以做一些数据的限制，比如与拦截器做一些登录验证之类的。
(这个功能看过文章，没实现。)
4.service编写接口:IUserService.java
boolean login(String login_name, String password);
boolean register(String login_name, String password, String user_name);
5serviceImpl编写实现类:UserServiceImpl.java
@Autowired
private UserMapper userMapper;
@Override
public boolean login(String login_name, String password) {
if (userMapper.login(login_name, password) != null) {
return true;
} else {
return false;
}
}
@Override
public boolean register(String login_name, String password, String user_name) {
return userMapper.register(login_name, password, user_name);
}
6.Util包下编写工具类:Md5.java
public static String MD5(String inStr) {
MessageDigest md5 = null;
try {
md5 = MessageDigest.getInstance("MD5");
} catch (Exception e) {
System.out.println(e.toString());
e.printStackTrace();
return "";
}
char[] charArray = inStr.toCharArray();
byte[] byteArray = new byte[charArray.length];
for (int i = 0; i < charArray.length; i++)
byteArray[i] = (byte) charArray[i];
byte[] md5Bytes = md5.digest(byteArray);
StringBuffer hexValue = new StringBuffer();
for (int i = 0; i < md5Bytes.length; i++) {
int val = ((int) md5Bytes[i]) & 0xff;
if (val < 16)
hexValue.append("0");
hexValue.append(Integer.toHexString(val));
}
return hexValue.toString();
}
// 可逆的加密算法
public static String KL(String inStr) {
// String s = new String(inStr);
char[] a = inStr.toCharArray();
for (int i = 0; i < a.length; i++) {
a[i] = (char) (a[i] ^ 't');
}
String s = new String(a);
return s;
}
// 加密后解密
public static String JM(String inStr) {
char[] a = inStr.toCharArray();
for (int i = 0; i < a.length; i++) {
a[i] = (char) (a[i] ^ 't');
}
String k = new String(a);
return k;
}
Controller层：传递参数处理数据，返回给view展示数据。
7.Controller编写UserController.java
@Autowired
private IUserService userService;
//跳转登录
@RequestMapping("login")
public String toLogin() {
return "login";
}
/*验证登录
*
* 使用 @ResponseBody 在ajax异步获取数据时使用。返回0/1
*
*/
@RequestMapping(value = "login_check", method = RequestMethod.POST)
@ResponseBody
public int login(String login_name, String password) {
String passwordByMd5 = MD5.MD5(password);
boolean count = userService.login(login_name, passwordByMd5);
int message;
if (count == true) {
message = 1;
} else {
message = 0;
}
return message;
}
//跳转注册
@RequestMapping(value = "toAdd")
public String toAdd() {
return "register";
}
//实现注册
@RequestMapping(value = "implAdd", method = RequestMethod.POST)
@ResponseBody
public int add(String login_name, String password, String user_name) {
String passwordByMd5 = MD5.MD5(password);
int findUserByLgName = userService.findUserByLgName(login_name);
int message;
if (login_name.length() == 0 || user_name.length() == 0 || password.length() == 0) {
message = -1;
//System.out.println("用户信息输入信息有误");
} else if (findUserByLgName == 0) {
userService.register(login_name, passwordByMd5, user_name);
message = 1;
//System.out.println("可以注册");
} else {
//System.out.println("用户存在");
message = 0;
}
return message;
}
8.编写login.jsp
<script type="text/javascript" language="JavaScript">
$(document).ready(function () {
$('#login').click(function () {
$.ajax({
type: "post",
url: "/login_check",
data: {
"login_name": $("#lg_name").val(),
"password": $("#pwd").val(),
},
dataType: "JSON",
async: false,
beforeSend: function () {
alert("正在提交");
},
success: function (data) {
if (data == 1) {
alert("登录成功")
window.location.href = "userList";
} else {
alert("用户名或者密码错误!");
}
},
error: function () {
alert("提交失败");
}
});
})
})
</script>
<h1>登录页面</h1>
<form class="bs-example bs-example-form" role="form1" method="post">
<div class="input-group">
<span class="input-group-addon">username</span>
<input type="text" id="lg_name" class="form-control" >
</div>
<div class="input-group">
<span class="input-group-addon">password</span>
<input type="text" id="pwd" class="form-control" >
</div>
</form>
<button class="btn btn-info" style="align-content: center" id="register">注册</button>
<button class="btn btn-info" style="align-content: center" id="login">登录</button>
</div>
9.编写Register.jsp
<script type="text/javascript" language="JavaScript">
$(document).ready(function () {
$('#addUser').click(function () {
$.ajax({
type: "post",
url: "/implAdd",
data: {
login_name: $("#lg_name").val(),
password: $("#pwd").val(),
user_name: $("#user_name").val(),
},
dataType: "JSON",
async: false,
beforeSend: function () {
alert("正在提交");
},
success: function (data) {
if (data == -1) {
alert("数据输入有误!");
} else if (data == 0) {
alert("用户以存在!");
} else {
alert("注册成功")
window.location.href = "login";
}
},
error: function () {
alert("提交失败");
}
});
})
})
</script>
<h1>注册页面</h1>
<form class="bs-example bs-example-form" role="form" method="post">
<div class="input-group">
<span class="input-group-addon">用户名:</span>
<input type="text" id="lg_name" class="form-control" placeholder="输入你的登录名">
</div>
<div class="input-group">
<span class="input-group-addon">密码:</span>
<input type="text" id="pwd" class="form-control" placeholder="输入你的密码">
</div>
<div class="input-group">
<span class="input-group-addon">昵称:</span>
<input type="text" id="user_name" class="form-control" placeholder="输入你的昵称">
</div>
</form>
<button class="btn btn-info" style="align-content: center" id="addUser">提交</button>
<button class="btn btn-info" style="align-content: center" id="returnLogin">返回</button>
10.gif展示
GIF1.gif
11.实现思路
因为做得是注册、登录功能，在接口用了boolean作为接口的类型。
登录功能：返回0 就是登录失败，没有在数据库匹配到数据，反之，1就是成功。
注册功能：返回 0代表输入有误，返回－1代表数据存在数据库中，返回1代表成功。
md5加密是 在网上找的，然后在用 string passwordMd5 =md5(password) 代替原来的密码实现加密。这里我做了一个注册功能，在注册的时候数据库记录 的就是 md5密码的数据。
