这里首先记录一下自己的学习经历,在做项目的时候,有时会遇到要调用数据库然后进行返回到前端的页面,这里我展示自己的写法。
首先是后端
Controller层
/**
* 查询全部的信息进行测试
* @return
*/
@GetMapping("/search/all")
public Object test01(){
System.out.println("进入control......");
List<test> testList = testService.test();
// for (test test:testList){
// System.out.println("username: "+test.getUsername()+" "+"password: "+test.getPassword()+" "+"emailuser: "+test.getEmailuser());
// }
return new TCMcommon().successed(testList);
}
Service层
/**
service层的实现类
*/
@Override
public List<test> test() {
System.out.println("进入service层");
return mapperDao.findTestsPaged();
}
/**
service层的接口
*/
//查询全部的信息
List<test> test();
Dao层
//查询全部的信息
List<test> findTestsPaged();
Pojo层
@Data
@AllArgsConstructor
@NoArgsConstructor
public class test implements Serializable {
String username;
String password;
String emailuser;
}
返回通用类
@Data
public class TCMcommon {
private int code;
private String message;
private Object data;
public TCMcommon successed(Object data){
TCMcommon tcMcommon=new TCMcommon();
tcMcommon.code=1;
tcMcommon.data=data;
return tcMcommon;
}
public TCMcommon error(String errorMessage){
TCMcommon tcMcommon=new TCMcommon();
tcMcommon.code=0;
tcMcommon.message=errorMessage;
return tcMcommon;
}
}
Mapper层
/**
com.example.Pojo.test 为我自己test实现类的路径
*/
<select id="findTestsPaged" resultType="com.example.Pojo.test">
select * from studentuser;
</select>
首先是前端部分
html
<input type="button" id="SEARCH" value="搜索" style="width: 80px;" onclick="searchShow();">
<table id="show" border="1px" cellpadding="10px">
</table>
js
var outshow ="";
function searchShow() {
console.log("进入")
$.ajax({
url: "http://localhost:8081/search/all",
type: "get",
dataType: "json",
contentType: "application/json;charset=UTF-8", //设置请求为json格式,中文的为utf-8
success: function (result){
//如果成功的话,这里就拿到了后端传过来的数据
var showtable=document.querySelector("#show");
if (result.code==0){
showtable.innerHTML="<div style='height:100px;width:10px;margin-top:400px;margin-left:40%;font-family: \"华文彩云\";font-weight: bolder;color: rgb(236,39,39);'>" +
"result.message</div>";
}else if (result.code==1){
var array=result.data;
for (let i=0;i<array.length;i++){
outshow +=
"<tr >"
+ "<td style='width:393.6px;height: 235.36px'>" + array[i].username + "</td>"
+ "<td style='width: 393.6px;height: 235.36px'>" + array[i].password + "</td>"
+ "<td style='width: 393.6px;height: 235.36px'>" + array[i].emailuser + "</td>"
+ "</tr>";
}
//拿到outshow的所填充的数据
showtable.innerHTML=outshow;
}
},
Error: function () {
window.alert("查询发生错误~");
}
})
}
展示效果图片:
这里我写项目需要展示的部分
结束语
这是在读的我第一次写博客,如果有不对的地方,可以指点,谢谢大家!