uni-app 前后端调用实例 基于Springboot 数据列表显示实现

锋哥原创的uni-app视频教程：

2023版uniapp从入门到上天视频教程(Java后端无废话版)，火爆更新中..._哔哩哔哩_bilibili2023版uniapp从入门到上天视频教程(Java后端无废话版)，火爆更新中...共计23条视频，包括：第1讲 uni-app简介、第2讲 uni-app环境搭建、第3讲 uni-app之HelloWorld实现等，UP主更多精彩视频，请关注UP账号。https://www.bilibili.com/video/BV1eG411N71c/基于前面帖子搭建下前后端实例：uni-app 前后端调用实例 基于Springboot-CSDN博客

我们来实现 数据库列表显示

后端：

/**
 * 分页查询新闻信息
 * @return
 */
@GetMapping("/list")
public R list() throws InterruptedException {
    List newsList = newsService.list();
    Map resultMap=new HashMap<>();
    resultMap.put("newsList",newsList);
    return R.ok(resultMap);
}

前端样式：

.uni-list{
	background-color: #FFFFFF;
	position: relative;
	width: 100%;
	display: flex;
	flex-direction: column;
	.uni-list-cell {
		position: relative;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		.uni-media-list {
			padding: 22rpx 30rpx;
			box-sizing: border-box;
			display: flex;
			width: 100%;
			flex-direction: row;
			.uni-media-list-logo {
				width: 5.625rem;
				height: 4.375rem;
				margin-right: 0.625rem;
			}
		
			.uni-media-list-body {
				height: auto;
				display: flex;
				flex: 1;
				flex-direction: column;
				justify-content: space-around;
				align-items: flex-start;
				overflow: hidden;
				.uni-media-list-text-top {
					height: 2.3125rem;
					font-size: 0.875rem;
					overflow: hidden;
					width: 100%;
					line-height: 1.125rem;
				}
				.uni-media-list-text-bottom {
					display: flex;
					flex-direction: row;
					justify-content: space-between;
					width: 100%;
					line-height: 0.9375rem;
					font-size: 0.8125rem;
					color: #8f8f94;
				}
				
			}
		}
	}
	.uni-list-cell::after {
	    position: absolute;
	    z-index: 3;
	    right: 0;
	    bottom: 0;
	    left: 0.9375rem;
	    height: 1px;
	    content: '';
	    transform: scaleY(.5);
	    background-color: #c8c7cc;
	}

}

静态页面：

动态页面： 

		
			
				
				
					{{value.title}}
					
						{{value.author}}
						{{value.releaseDate}}
					
				
			
		
		

export default{
	data(){
		return{
			listData:[
			]
		}
	},
	onLoad(){
		this.getList();
	},
	methods:{
		getList(){
			uni.request({
				url:'http://localhost/news/list',
				method:'POST',
				success:data=>{
					let result=data.data;
					if(result.code==200){
				        this.listData=result.newsList;
					}
				},
				fail:(data,code)=>{
					console.log("fail:" + JSON.stringify(data))
				}
			})
		}
	}
}