数据库信息返回前端展示

た入场券 2023-09-27 18:22 29阅读 0赞

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

### 首先是后端 ###

> 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

> js

> 展示效果图片:  
> 这里我写项目需要展示的部分  
> ![在这里插入图片描述][b023e2dd51e74ba78094face80591b04.png]

> **结束语**  
> 这是在读的我第一次写博客，如果有不对的地方，可以指点，谢谢大家！

[b023e2dd51e74ba78094face80591b04.png]: https://img-blog.csdnimg.cn/b023e2dd51e74ba78094face80591b04.png