The uni-app front-end and back-end calling examples are implemented based on the Springboot details page.

Fengge’s original uni-app video tutorial:

2023 version of uniapp from entry to success video tutorial (Java backend no nonsense version), hot update..._bilibili_bilibili 2023 version of uniapp from entry to success video tutorial (Java backend no nonsense version), hot update Updating... A total of 23 videos, including: Lecture 1 Introduction to uni-app, Lecture 2 uni-app environment construction, Lecture 3 HelloWorld implementation of uni-app, etc. For more exciting videos from UP, please follow UP account. https://www.bilibili.com/video/BV1eG411N71c/ Based on the previous post, build the front-end and back-end examples:​​​​​​uni-app The front-end and back-end calling examples are based on Springboot-CSDN blog

rear end:

/**
 * 根据id查询新闻详细信息
 * @param id
 * @return
 */
@GetMapping("/detail/{id}")
public R detail(@PathVariable(value = "id")Integer id){
    News news = newsService.getById(id);
    Map<String,Object> resultMap=new HashMap<>();
    resultMap.put("news",news);
    return R.ok(resultMap);
}

Add click event:

Jump method:

goDetail:function(e){
			uni.navigateTo({
				url:'/pages/detail/detail?id='+e.id
			})
		}

style:

.banner {
		height: 360rpx;
		overflow: hidden;
		position: relative;
		background-color: #ccc;
		.banner-img {
			width: 100%;
		}
		
		.banner-title {
			max-height: 84rpx;
			overflow: hidden;
			position: absolute;
			left: 30rpx;
			bottom: 30rpx;
			width: 90%;
			font-size: 32rpx;
			font-weight: 400;
			line-height: 42rpx;
			color: white;
			z-index: 11;
		}
	}
	
	.article-meta {
		padding: 20rpx 40rpx;
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		color: gray;
		
		.article-text {
			font-size: 26rpx;
			line-height: 50rpx;
			margin: 0 20rpx;
		}
		
		.article-author,
		.article-time {
			font-size: 30rpx;
		}
	}
	
	.article-content {
		padding: 0 30rpx;
		overflow: hidden;
		font-size: 30rpx;
		margin-bottom: 30rpx;
	}

<view>
		<view class="banner">
			<image class="banner-img" :src="'http://localhost/image/'+news.coverImage"></image>
			<view class="banner-title">{
   
   {news.title}}</view>
		</view>
		<view class="article-meta">
			<text class="article-author">{
   
   {news.author}}</text>
			<text class="article-text">发表于</text>
			<text class="article-time">{
   
   {news.releaseDate}}</text>
		</view>
		<view class="article-content">
			<rich-text :nodes="news.content"></rich-text>
		</view>
	</view>

export default{
		data(){
			return {
				news:{}
			}
		},
		onLoad(event){
			const id=event.id || 0;
			console.log("id="+id)
			this.getDetail(id);
		},
		methods:{
			getDetail(id){
				if(id>0){
					uni.request({
						url:"http://localhost/news/detail/"+id,
						success:(data)=>{
							let result=data.data;
							this.news=result.news;
							uni.setNavigationBarTitle({
								title:result.news.title
							})
						},
						fail:(data,code)=>{
							console.log("fail:" + JSON.stringify(data))
						}
					})
				}
			}
		}
	}