数据库信息返回前端展示-阿里云开发者社区

数据库信息返回前端展示

2023-06-27 122

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： 数据库信息返回前端展示

这里首先记录一下自己的学习经历，在做项目的时候，有时会遇到要调用数据库然后进行返回到前端的页面，这里我展示自己的写法。

首先是后端

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>

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("查询发生错误~");
        }
    })
}