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博客

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

后端：

java 复制代码

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

前端样式：

css 复制代码

.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;
	}

}

静态页面：

XML 复制代码

<template>
	<view class="uni-list">
		<view class="uni-list-cell">
			<view class="uni-media-list">
				<image class="uni-media-list-logo" src="http://localhost/image/20230115051209000000878.png"></image>
				<view class="uni-media-list-body">
					<view class="uni-media-list-text-top">为什么自动驾驶诉讼不断？</view>
					<view class="uni-media-list-text-bottom">
						<text>未来汽车日报</text>
						<text>2020-04-11 17:07:48</text>
					</view>
				</view>
			</view>
		</view>
	    <view class="uni-list-cell">
			<view class="uni-media-list">
				<image class="uni-media-list-logo" src="http://localhost/image/20230115051147000000020.png"></image>
				<view class="uni-media-list-body">
					<view class="uni-media-list-text-top">2020数字中国创新大赛-数字政府赛道21强出炉，四大赛题紧贴政府数字化发展需求</view>
					<view class="uni-media-list-text-bottom">
						<text>36氪深度服务</text>
						<text>2020/04/11-16:59</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

复制代码

动态页面：

XML 复制代码

<block v-for="(value,index) in listData" :key="index">
		<view class="uni-list-cell" @click="goDetail(value)">
			<view class="uni-media-list">
				<image class="uni-media-list-logo" :src="'http://localhost/image/'+value.coverImage"></image>
				<view class="uni-media-list-body">
					<view class="uni-media-list-text-top">{{value.title}}</view>
					<view class="uni-media-list-text-bottom">
						<text>{{value.author}}</text>
						<text>{{value.releaseDate}}</text>
					</view>
				</view>
			</view>
		</view>
		</block>

javascript 复制代码

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))
				}
			})
		}
	}
}

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

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