数据库信息返回前端展示

新闻公告

数据库信息返回前端展示

发布时间：2023-06-27 15:00:33

这里首先记录一下自己的学习经历，在做项目的时候，有时会遇到要调用数据库然后进行返回到前端的页面，这里我展示自己的写法。首先是后端 Controller层 /** * 查询全部的信息进行测试 * @return */ @GetMapping("/search/all") public Object test01(){ System.out.println("进入control......"); List 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() { System.out.println("进入service层"); return mapperDao.findTestsPaged(); } /** service层的接口 */ //查询全部的信息 List test(); Dao层 //查询全部的信息 List 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实现类的路径 */ 首先是前端部分 html

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="

" + "result.message

"; }else if (result.code==1){ var array=result.data; for (let i=0;i" + array[i].username + "" + "" + array[i].password + "" + "" + array[i].emailuser + "" + ""; } //拿到outshow的所填充的数据 showtable.innerHTML=outshow; } }, Error: function () { window.alert("查询发生错误~"); } }) } 展示效果图片: 这里我写项目需要展示的部分结束语这是在读的我第一次写博客，如果有不对的地方，可以指点，谢谢大家！

关于我们

新闻公告

数据库信息返回前端展示

磊宇云计算产品

解决方案

帮助与支持

其他链接

联系我们