做汤的网站,网站设计公司网站制作费用,中国企业排名100强,小程序排名三大公司锋哥原创的uni-app视频教程#xff1a;
2023版uniapp从入门到上天视频教程(Java后端无废话版)#xff0c;火爆更新中..._哔哩哔哩_bilibili2023版uniapp从入门到上天视频教程(Java后端无废话版)#xff0c;火爆更新中...共计23条视频#xff0c;包括#xff1a;第1讲 uni…锋哥原创的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 {ListNews newsList newsService.list();MapString,Object resultMapnew 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;}}
静态页面
templateview classuni-listview classuni-list-cellview classuni-media-listimage classuni-media-list-logo srchttp://localhost/image/20230115051209000000878.png/imageview classuni-media-list-bodyview classuni-media-list-text-top为什么自动驾驶诉讼不断/viewview classuni-media-list-text-bottomtext未来汽车日报/texttext2020-04-11 17:07:48/text/view/view/view/viewview classuni-list-cellview classuni-media-listimage classuni-media-list-logo srchttp://localhost/image/20230115051147000000020.png/imageview classuni-media-list-bodyview classuni-media-list-text-top2020数字中国创新大赛-数字政府赛道21强出炉四大赛题紧贴政府数字化发展需求/viewview classuni-media-list-text-bottomtext36氪深度服务/texttext2020/04/11-16:59/text/view/view/view/view/view
/template
动态页面 block v-for(value,index) in listData :keyindexview classuni-list-cell clickgoDetail(value)view classuni-media-listimage classuni-media-list-logo :srchttp://localhost/image/value.coverImage/imageview classuni-media-list-bodyview classuni-media-list-text-top{{value.title}}/viewview classuni-media-list-text-bottomtext{{value.author}}/texttext{{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 resultdata.data;if(result.code200){this.listDataresult.newsList;}},fail:(data,code){console.log(fail: JSON.stringify(data))}})}}
}
