该工程主要目的是通过后台将用户输入的username和password获取，和数据库中的user表中的username和password进行比较，如果对应则登陆成功，否则登陆失败。
1、创建一个dao包，编写userMapper接口，接口里面只写一个方法。接口相当于客户，只写出自己的需求，例如需要按照名字查找：
User selByName（String name)
@Repository
public interface UserMapper {
// void selByName(String name);
User selByName(String name);
}
2、此时没有实体类，创建model包，创建实体类User，里面定义数据库user表中的字段，并且生成getter、setter和tostring方法。
public class User {
private int id;
private String userName;
private String passWord;
private String realName;
public int getId() {
return id;
}
public void setId(int id) {
this.id = id;
}
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 getRealName() {
return realName;
}
public void setRealName(String realName) {
this.realName = realName;
}
@Override
public String toString() {
return "User{" +
"id=" + id +
", userName='" + userName + '\'' +
", passWord=" + passWord +
", realName='" + realName + '\'' +
'}';
}
}
3、此时需要创建和接口名字相同的xml映射文件，里面是真正的查询方法。在resources文件夹下创建文件夹mapper，创建UserMapper.xml。然后就是实现查询数据库的方法。定义mapper标签，声明mapper的命名空间namespace：对应UserMapper这个接口的位置。
然后创建select标签，添加查询语句。
<?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="com.example.ajax.dao.UserMapper">
<select id="selByName" parameterType="java.lang.String" resultType="com.example.ajax.model.User">
select * from user where userName = #{value }
</select>
</mapper>
4、然后创建服务层，服务层相当于业务员，去和客服沟通，并且将需求告诉程序员进行实际生产。创建service包，new一个UserService.java
首先这个类中需要new出对象 userMapper，springboot中可以通过添加注解@Autowired来进行new对象。
@Service
public class UserService {
@Autowired
/**
* 注解会自动new出对象
*/
private UserMapper userMapper;
/**
* service层相当于业务层，连接接口(客户预期)和usermapper（具体实现）
* usermapper是真正去查数据功能的
* controller相当于客户，去调用selByName
* @param name
* @return
*/
public User selByName(String name){
return userMapper.selByName(name);
}
}
5、.此时需要编写controller，controller相当于最后调用方法的人，具体的软件做出来需要客户来使用，controller来调用方法实现查询。获取用户输入的数据通过loginData.获取，然后和数据库中的数据进行比较，调用if进行判断，如果equals比较结果相同则success（true）否则走else。
@RequestMapping("/login.json")
@ResponseBody
/**
* 将map换成BaseResult来接受数据
*/
public BaseResult recieveData(@RequestBody Map<String, Object> loginData) {
BaseResult baseResult = new BaseResult();
String name = loginData.get("name").toString();
String password = loginData.get("password").toString();
if (name != null) {
User user = userService.selByName(name);
if (user.getPassWord().equals(password)) {
baseResult.setSuccess(true);
} else {
baseResult.setSuccess(false);
}
}
return baseResult;
}
后续，想啊看到成品还需要编写前台页面和后台提交数据的代码，如下：
6、编写前台登录页面
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>登录</title>
</head>
<body>
<form id="newForm">
<button type="submit" id="btn_login">登录</button>
</form>
<th:block th:replace="js/indexs"></th:block>
<th:block th:replace="js/login9_10_js"></th:block>
</body>
</html>
7、后台接收数据的页面为 js/login9_10_js。
<script type="text/javascript">
var Login = function () {
return {
init: function () {
Login.initSubmit();
},
initSubmit: function () {
var defaultParam = {
formId: "newForm"
}
var param = $.extend({}.defaultParam);
alert("..." + defaultParam.formId)
$('#' + defaultParam.formId).submit(function () {
Login.getLoginData(defaultParam);
});
}
,
getLoginData: function (curParam) {
},
sendDataToController: function (param) {
alert('........sendDataToController')
//发送数据用ajax提交
$.ajax({
url: "/login.json",
contentType: "application/json;charset=UTF-8",
type: "post",
data: JSON.stringify(param),
// dataType:"json",
success: function (resp) {
if (resp.success) {
alert("提交成功！！" );
location.href = "/shouye.html";
}else {
alert("密码错误！！")
}
}
});
}
}
}();
$(document).ready(function () {
Login.init();
});
/**
* 封装从this中取数据的功能
* this代表调用此方法的
*/
$.fn.serializeObject = function () {
var o = {};
var a = this.serializeArray();
$.each(a, function () {
if (o[this.name]) {
if (!o[this.name].push) {
o[this.name] = [o[this.name]]
}
o[this.name].push(this.value || '');
} else {
o[this.name] = this.value || '';
}
});
return o;
}
</script>
</body>
</html>
注：application.yml配置文件配置如下：
server:
port: 8888
spring:
datasource:
url: jdbc:mysql://localhost:3306/frame?useUnicode=true&useSSL=true&serverTimezone=UTC
username: root
password: 123456
driver-class-name: com.mysql.cj.jdbc.Driver
thymeleaf:
cache: false
mybatis:
typeAliasesPackage: wang.doug.frame.model
mapperLocations: classpath:mapper/*.xml
