Springboot开发指南（三）—ajax+mybatis+mysql从数据库读取数据并展示到前台
一 需求
采用springboot+ajax+mybatis技术从mysql数据库读取数据，并展示到前台
二 项目效果
浏览器输入：http://localhost:8091/member。在页面输入ID为1，单击搜索按钮，从数据库获取数据并显示到前台
三 项目建设步骤
1. 在mysql里建设数据库表m_members
2.使用IDEA 新建工程，引入依赖
（1）选择SpringWeb、Thymeleaf、JDBC API、MySQLDriver、MyBatis Framework选型
（2）添加fastjson依赖 ，用于后台返回json格式数据
<dependency>
<groupId>com.alibaba</groupId>
<artifactId>fastjson</artifactId>
<version>1.2.28</version>
</dependency>
添加后的依赖如下：
<dependencies>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-jdbc</artifactId>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-web</artifactId>
</dependency>
<dependency>
<groupId>org.mybatis.spring.boot</groupId>
<artifactId>mybatis-spring-boot-starter</artifactId>
<version>2.0.1</version>
</dependency>
<dependency>
<groupId>com.alibaba</groupId>
<artifactId>fastjson</artifactId>
<version>1.2.28</version>
</dependency>
<dependency>
<groupId>mysql</groupId>
<artifactId>mysql-connector-java</artifactId>
<scope>runtime</scope>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-test</artifactId>
<scope>test</scope>
</dependency>
</dependencies>3. 建后台目录及四层文件
后台文件主要有bean，mapper，serivce，controller四类文件
（1）bean文件夹下的Member.java
public class Member {
private Integer memberId;
private String memberName;
private String memberSex;
private String memberTelephone;
public Integer getMemberId() {
return memberId;
}
public void setMemberId(Integer memberId) {
this.memberId = memberId;
}
//....get，set函数
}（2)mapper文件夹下的MemberMapper.java
@Mapper
public interface MemberMapper {
@Select("select * from m_members where memberId=#{id}")
public Member getMemberById(Integer id);
}
(3) service文件夹下的MemberService.java
@Service
public class MemberService {
@Autowired
MemberMapper memberMapper;
public Member getMemberById(Integer id)
{
return memberMapper.getMemberById(id);
}
}(4)controller文件夹下的MemberController.java
@Controller
public class MemberController {
@Autowired
MemberService memberService;
//页面跳转
@RequestMapping("member")
public String goMemberSearch()
{
return "memberSearch";
}
//返回json数据给ajax
@ResponseBody
@RequestMapping("/searchById")
public String getMemberById(@RequestParam("memberId") Integer memberId)
{
System.out.println(memberId);
Member member=memberService.getMemberById(memberId);
JSONObject result = new JSONObject();
if(member!=null) {
System.out.println(member.getMemberName());
result.put("status", "success");
result.put("member", member);
}
else
{ result.put("status", "fail");
}
return result.toJSONString();
}
}4. 引入css和js，建前台html文件
（1）将bootstrap文件加入到static文件夹下
（2）在templates添加memberSearch.html文件，内容如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="asserts/js/jquery-3.4.0.min.js"></script>
<title>Title</title>
</head>
<body>
<div>
<label>ID</label>
<input name="id" id="id" type="text" >
<button type="submit" onclick="searchMember()">搜索</button>
</div>
<div>
<p>姓名：<span id="name">---</span></p>
<p>性别：<span id="sex">---</span></p>
<p>手机号：<span id="telephone">---</span></p>
</div>
<script>
function searchMember() {
var id = $("#id").val();
alert("searchMember"+id);
//设为disable则无法获取
$.ajax({
url: "searchById",
method: "post",
data: {
memberId: id
},
dataType: "json",
success: function(data) {
alert(data.status);
if (data.status == "success") {
//alert(data.member.name);
$("#name").html(data.member.memberName);
$("#sex").html(data.member.memberSex);
$("#telephone").html(data.member.memberTelephone);
}
},
error: function(data) {
alert("wrong");
}
});
}
</script>
</body>
</html>5. 建数据库配置文件
（1）删除application.propeties文件
（2）新建application.yml文件，内容如下
spring:
datasource:
username: root
password: 888
url: jdbc:mysql://localhost:3306/memsys?serverTimezone=GMT%2B8
driver-class-name: com.mysql.cj.jdbc.Driver
server:
port: 8091
mybatis:
configuration:
#开启驼峰命名转换
map-underscore-to-camel-case: true