当前位置：首页 > news >正文

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

news 来源：原创 2024/5/14 4:06:19

锋哥原创的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<News> newsList = newsService.list();Map<String,Object> 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;}}

静态页面：

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

动态页面：

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

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