uni-app 前后端调用实例 基于Springboot 详情页实现

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

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

后端:

/*** 根据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);
}

加下点击事件:

跳转方法:

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

样式:

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/604588.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

mysql进阶-重构表

目录 1. 原因 2. 如何重构表呢&#xff1f; 2.1 命令1&#xff1a; 2.2 命令2&#xff1a; 2.3 命令3&#xff1a; 1. 原因 正常的业务开发&#xff0c;为什么需要重构表呢&#xff1f; 原因1&#xff1a;某张表存在大量的新增和删除操作&#xff0c;导致表经历过大量的…

JavaScript异常处理实战

前言 之前在对公司的前端代码脚本错误进行排查&#xff0c;试图降低 JS Error 的错误量&#xff0c;结合自己之前的经验对这方面内容进行了实践并总结&#xff0c;下面就此谈谈我对前端代码异常监控的一些见解。 本文大致围绕下面几点展开讨论&#xff1a; JS 处理异常的方式…

解决 Postman 报错问题:一份综合指南

Postman 是一个流行的 API 测试工具&#xff0c;它可以帮助开发者和测试人员快速地创建和发送各种 HTTP 请求&#xff0c;并查看响应结果。但是&#xff0c;在使用 Postman 的过程中&#xff0c;有时候会遇到一些报错或异常情况&#xff0c;影响了正常的测试流程。本文将介绍一…

图像分割-Grabcut法

版权声明&#xff1a;本文为博主原创文章&#xff0c;转载请在显著位置标明本文出处以及作者网名&#xff0c;未经作者允许不得用于商业目的。 本文的C#版本请访问&#xff1a;图像分割-Grabcut法(C#)-CSDN博客 GrabCut是一种基于图像分割的技术&#xff0c;它可以用于将图像…

循环队列的队空队满情况

有题目&#xff1a; 循环队列放在一维数组A[0....M-1]中&#xff0c;end1指向队头元素&#xff0c;end2指向队尾元素的后一个位置。假设队列两端均可进行入队和出队操作&#xff0c;队列中最多能容纳M-1个元素。初始时为空。下列判断队空和队满的条件中&#xff0c;正确的是 …

vim/vi 模式切换和常用快捷键

vim/vi 切换模式&#xff1a; vim/vi 常用快捷键&#xff1a; 一般模式&#xff1a; gg&#xff1a;文件开头、G&#xff1a;文件结尾 shift^ &#xff1a;光标当前行首、shift^&#xff1a;光标当前行尾 yy&#xff1a;复制、p&#xff1a;粘贴、dd&#xff1a;删除当前行、…

CRM的request管理笔记

1 request类型 request有两种&#xff0c;device request和link request。 link request link req是对link进行精确控制。 link req是对每个link的请求&#xff0c;比如某一帧是否需要bubble recovery、某一帧是否需要长曝光等feature。device request 对一个设备进行每帧控制…

JDK 11:崭新特性解析

JDK 11&#xff1a;崭新特性解析 JDK 11&#xff1a;崭新特性解析1. HTTP Client&#xff08;标准化&#xff09;示例代码 2. 局部变量类型推断的扩展示例代码 3. 新的字符串方法示例代码 4. 动态类文件常量示例代码 5. Epsilon 垃圾收集器使用方式 结语 JDK 11&#xff1a;崭新…

MySQL数据库进阶-事务

事务 事务由单独单元的一个或多个SQL语句组成&#xff0c;在这 个单元中&#xff0c;每个MySQL语句是相互依赖的。而整个单独单 元作为一个不可分割的整体&#xff0c;如果单元中某条SQL语句一 旦执行失败或产生错误&#xff0c;整个单元将会回滚。所有受到影 响的数据将返回到…

现有网络模型的使用及修改(VGG16为例)

VGG16 修改默认路径 import os os.environ[TORCH_HOME] rD:\Pytorch\pythonProject\vgg16 # 下载位置太大了&#xff08;140多G&#xff09;不提供直接下载 train_set torchvision.datasets.ImageNet(root./data_image_net, splittrain, downloadTrue, transformtorchvis…

Informer:用于长序列时间序列预测的高效Transformer模型

最近在研究时间序列分析的的过程看&#xff0c;看到一篇精彩的文章&#xff0c;名为&#xff1a;《Informer: Beyond Efficient Transformer for Long Sequence Time-Series Forecasting》&#xff0c;特此撰写一篇博客。 文章主要研究了一种用于长序列时间序列预测的高效Trans…

Windows:笔记本电脑设置休眠教程

前言 不知道大家在使用【Windows】笔记本有没有这个习惯&#xff0c;我会把他的电池选项的【休眠】设置进行打开。因为作为我们开发人员电脑一般是一周关一次机&#xff0c;有时候一个月关一次机。这时候【休眠】功能就给我们提供了一个好处&#xff0c;我们选择了【休眠】后电…

PAT 乙级 1056 组合数的和

给定 N 个非 0 的个位数字&#xff0c;用其中任意 2 个数字都可以组合成 1 个 2 位的数字。要求所有可能组合出来的 2 位数字的和。例如给定 2、5、8&#xff0c;则可以组合出&#xff1a;25、28、52、58、82、85&#xff0c;它们的和为330。 输入格式&#xff1a; 输入在一行…

C语言编译器(C语言编程软件)完全攻略(第二十四部分:Turbo C 2.0使用教程(使用Turbo C 2.0编写C语言程序))

介绍常用C语言编译器的安装、配置和使用。 二十四、Turbo C 2.0使用教程&#xff08;使用Turbo C 2.0编写C语言程序&#xff09; 首先&#xff0c;我们给出一段完整的C语言代码&#xff1a; #include <stdio.h> int main() { puts("hello&#xff0c;world!"…

jumpServer-02-安装与配置

jumpServer-02-安装与配置 文章目录 jumpServer-02-安装与配置一、什么是jumpServer&#xff1f;二、jumpServer安装配置①&#xff1a;初始化配置01&#xff1a;Linux服务器准备02&#xff1a;环境准备&#xff0c;关闭防火墙03: 配置yum源04&#xff1a;安装系统初始化所需的…

Linux习题2

解析&#xff1a;虚拟内存是计算机系统内存管理的一种技术。它使得应用程序认为它拥有连续可用的内存&#xff0c;使得每个进程看到的内存空间一致。 解析&#xff1a;所谓系统调用&#xff0c;就是内核提供的、功能十分强大的一系列的函数。这些系统调用是在内核中实现的&…

Qt/QML编程学习之心得:Linux下读写文件File(24)

在Linux嵌入式系统中,经常会使用Qt来读写一个文件,判断一个文件是否存在,具体如何实现呢? 首先,要使用linux系统中相关的头文件: #include <unistd.h> #include <stdio.h> #include <stdlib.h> 其次,判断路径是否存在, if(!dir.exists()){mkdir(…

leetcode12 整数转罗马数字

题目描述&#xff1a;给定一个整数&#xff0c;将其转换为罗马数字。罗马数字由七个字符表示&#xff1a;I&#xff08;1&#xff09;、V&#xff08;5&#xff09;、X&#xff08;10&#xff09;、L&#xff08;50&#xff09;、C&#xff08;100&#xff09;、D&#xff08;5…

视频剪辑技巧:添加srt字幕,提升视频品质的方法

在视频制作和剪辑过程中&#xff0c;字幕的添加是一项常见的技巧。通过添加srt字幕&#xff0c;可以提升视频的品质和观感&#xff0c;让观众更好地理解视频内容。下面一起来看云炫AI智剪如何批量添加srt字幕的方法&#xff0c;如何通过这些技巧提升视频品质。 原视频画面与添…

JAVA中小型医院信息管理系统源码 医院系统源码

开发框架&#xff1a;SpringBootJpathymeleaf 搭建环境&#xff1a;jdk1.8idea/eclipsemaven3mysql5.6 基于SpringBoot的中小型医院信息管理系统&#xff0c;做的比较粗糙&#xff0c;但也实现了部分核心功能。 就诊卡提供了手动和读卡两种方式录入&#xff0c;其中IC读卡器使用…