这里首先记录一下自己的学习经历，在做项目的时候，有时会遇到要调用数据库然后进行返回到前端的页面，这里我展示自己的写法。
首先是后端
/** * 查询全部的信息进行测试 * @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();
//查询全部的信息 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("查询发生错误~"); } }) }
展示效果图片:
这里我写项目需要展示的部分
结束语
这是在读的我第一次写博客，如果有不对的地方，可以指点，谢谢大家！
