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

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

后端:

/*** 分页查询新闻信息* @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))}})}}
}

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

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

相关文章

ACM32F403/F433 12 位多通道国产芯片,支持 MPU 存储保护功能,应用于工业控制,智能家居等产品中

ACM32F403/F433 芯片的内核基于 ARMv8-M 架构&#xff0c;支持 Cortex-M33 和 Cortex-M4F 指令集。芯片内核 支持一整套DSP指令用于数字信号处理&#xff0c;支持单精度FPU处理浮点数据&#xff0c;同时还支持Memory Protection Unit &#xff08;MPU&#xff09;用于提升应用的…

关键字:try-catch关键字

在 Java 中&#xff0c;try-catch关键字用于异常处理。它们允许编写代码来捕获和处理异常&#xff0c;以确保程序能够在出现问题时合理地处理它们而不会崩溃。 以下是try-catch关键字的基本语法&#xff1a; 在try块中编写可能会抛出异常的代码。如果在try块中的任何代码抛出…

基于YOLOv8的目标跟踪技术

&#x1f4a1;&#x1f4a1;&#x1f4a1;本文摘要&#xff1a;介绍了YOLOv8自带的目标跟踪技术以及评价指标&#xff0c;并教会你如何在YOLOv8使用 1.YOLOv8自带两种跟踪方法 ultralytics/cfg/trackers/文件夹下 1.1 ByteTrack介绍 https://arxiv.org/pdf/2110.06864.pdf 摘…

mac下jd-gui提示没有找到合适的jdk版本

mac下jd-gui提示jdk有问题 背景解决看一下是不是真有问题了方法一&#xff1a;修改启动脚本方法二&#xff1a;设置launchd环境变量 扩展动态切jdk脚本(.bash_profile) 背景 配置了动态jdk后&#xff0c;再次使用JD-GUI提示没有找到合适的jdk版本。 解决 看一下是不是真有问题…

Zookeeper实现分布式锁和注册中心

目录 分布式锁 实现方式 分布式锁场景如何选择Redis和zookeeper 用InterProcessMutex实现分布式锁 zookeeper实现注册中心 分布式锁 实现方式 数据库唯一索引Redis的setnxZookeeper创建临时节点及监听机制Zookeeper创建临时有序节点 分布式锁场景如何选择Redis和zookeepe…

Vue实现JSON字符串格式化编辑器组件

相信很多同学都用过网上的在线JSON格式化工具来将杂乱的JSON数据转换成易于我们阅读和编辑的格式。那么&#xff0c;你有没有想过自己动手实现一个这样的工具呢&#xff1f;今天&#xff0c;我将介绍如何使用Vue.js来构建一个简单的JSON格式化工具。 功能简述 支持格式化JSON字…

使用spring boot实现异常的统一返回

在这个前后端分离的时代&#xff0c;一个 统一的数据格式非常重要。本次我们实现用spring boot实现一下返回给前端数据的统一格式&#xff0c;不再出现服务器500的错误。 新建一个spring boot项目&#xff0c;并导入knife4j的依赖。 写一个controller控制器&#xff0c;用来是…

57.网游逆向分析与插件开发-游戏增加自动化助手接口-接管游戏的自动药水设定功能

内容来源于&#xff1a;易道云信息技术研究院VIP课 码云地址&#xff08;master分支&#xff09;&#xff1a;https://gitee.com/dye_your_fingers/sro_-ex.git 码云版本号&#xff1a;51307d6bf69f2f3c645c70d09f841f5e32da79b9 代码下载地址&#xff0c;在 SRO_EX 目录下&…

计算机网络——基础知识汇总(八)

个人名片&#xff1a; &#x1f981;作者简介&#xff1a;一名喜欢分享和记录学习的在校大学生 &#x1f42f;个人主页&#xff1a;妄北y &#x1f427;个人QQ&#xff1a;2061314755 &#x1f43b;个人邮箱&#xff1a;2061314755qq.com &#x1f989;个人WeChat&#xff1a;V…

基于电商场景的高并发RocketMQ实战-促销活动推送千万级用户解决方案【多线程+分片推送实现高性能推送】

&#x1f308;&#x1f308;&#x1f308;&#x1f308;&#x1f308;&#x1f308;&#x1f308;&#x1f308; 欢迎关注公众号&#xff08;通过文章导读关注&#xff09;&#xff0c;发送【资料】可领取 深入理解 Redis 系列文章结合电商场景讲解 Redis 使用场景、中间件系列…

如何使用Docker将.Net6项目部署到Linux服务器(三)

目录 四 安装nginx 4.1 官网下载nginx 4.2 下载解压安装nginx 4.3 进行configure 4.4 执行make 4.5 查看nginx是否安装成功 4.6 nginx的一些常用命令 4.6.1 启动nginx 4.6.2 通过命令查看nginx是否启动成功 4.6.3 关闭Nginx 4.6.5 重启Nginx 4.6.6 杀掉所有Nginx进…

浏览器---善用的一些调试技巧

https://www.cnblogs.com/dasusu/p/17932742.html

c# 捕获全部线程的异常 试验

1.概要 捕获全部线程的异常 试验&#xff0c;最终结果task的异常没有找到捕获方法 2.代码 2.1.试验1 2.1.1 试验结果 2.2 代码 2.2.1主程序代码 using NLog; using System; using System.Threading; using System.Windows.Forms;namespace 异常监控 {static class Program…

C++day4作业

定义一个Person类&#xff0c;私有成员int age&#xff0c;string &name&#xff0c;定义一个Stu类&#xff0c;包含私有成员double *score&#xff0c;写出两个类的构造函数、析构函数、拷贝构造和拷贝赋值函数&#xff0c;完成对Person的运算符重载(算术运算符、条件运算…

IRQ Handler 的使用——以USART串口接收中断分别在标准库与HAL库版本下的举例

前言&#xff1a; 1.中断系统及EXTI外部中断知识点见我的博文&#xff1a; 9.中断系统、EXTI外部中断_eirq-CSDN博客文章浏览阅读301次&#xff0c;点赞7次&#xff0c;收藏6次。EXTI&#xff08;Extern Interrupt&#xff09;外部中断EXTI可以监测指定GPIO口的电平信号&…

Redis(认识NoSQL,认识redis,安装redis,redis桌面客户端,redis常见命令,redis的Java客户端)

文章目录 Redis快速入门1.初识Redis1.1.认识NoSQL1.1.1.结构化与非结构化1.1.2.关联和非关联1.1.3.查询方式1.1.4.事务1.1.5.总结 1.2.认识Redis1.3.安装Redis1.3.1.依赖库1.3.2.上传安装包并解压1.3.3.启动1.3.4.默认启动1.3.5.指定配置启动1.3.6.开机自启 1.4.Redis桌面客户端…

病情聊天机器人,利用Neo4j图数据库和Elasticsearch全文搜索引擎相结合

项目设计目的&#xff1a; 本项目旨在开发一个病情聊天机器人&#xff0c;利用Neo4j图数据库和Elasticsearch全文搜索引擎相结合&#xff0c;实现对病情相关数据的存储、查询和自动回答。通过与用户的交互&#xff0c;机器人可以根据用户提供的症状描述&#xff0c;给出初步的可…

Linux---进程控制

一、进程创建 fork函数 在Linux中fork函数是非常重要的函数&#xff0c;它从已存在进程中创建一个新进程&#xff0c;原进程为父进程 fork函数的功能&#xff1a; 分配新的内存和内核数据结构给子进程将父进程部分数据结构内容拷贝至子进程添加子进程到系统的进程列表中fork返…

听GPT 讲Rust源代码--library/portable-simd

File: rust/library/portable-simd/crates/core_simd/examples/spectral_norm.rs spectral_norm.rs是一个示例程序&#xff0c;它展示了如何使用Portable SIMD库中的SIMD&#xff08;Single Instruction Multiple Data&#xff09;功能来实现频谱规范化算法。该示例程序是Rust源…

如何使用SeaFile搭建本地私有云盘并结合cpolar实现远程访问

文章目录 1. 前言2. SeaFile云盘设置2.1 SeaFile的安装环境设置2.2 SeaFile下载安装2.3 SeaFile的配置 3. cpolar内网穿透3.1 Cpolar下载安装3.2 Cpolar的注册3.3 Cpolar云端设置3.4 Cpolar本地设置 4.公网访问测试5.结语 1. 前言 现在我们身边的只能设备越来越多&#xff0c;…