该工程主要目的是通过后台将用户输入的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