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

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

相关文章:

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

锋哥原创的uni-app视频教程&#xff1a; 2023版uniapp从入门到上天视频教程(Java后端无废话版)&#xff0c;火爆更新中..._哔哩哔哩_bilibili2023版uniapp从入门到上天视频教程(Java后端无废话版)&#xff0c;火爆更新中...共计23条视频&#xff0c;包括&#xff1a;第1讲 uni…...

python渗透工具编写学习笔记:10、网络爬虫基础/多功能编写

目录 前言 10.1 概念 10.2 调度器/解析器 10.3 存储器/去重器 10.4 日志模块 10.5 反爬模块 10.6 代理模块 前言 在渗透工具中&#xff0c;网络爬虫有着不可忽视的作用&#xff0c;它能够快速而精准的搜寻、提取我们所需要的信息并按照我们所需要的格式排列&#xff0c;…...

Python武器库开发-武器库篇之子域名扫描器开发(四十一)

Python武器库开发-武器库篇之子域名扫描器开发(四十一) 在我们做红队攻防或者渗透测试的过程中&#xff0c;信息收集往往都是第一步的&#xff0c;有人说&#xff1a;渗透的本质就是信息收集&#xff0c;前期好的信息收集很大程度上决定了渗透的质量和攻击面&#xff0c;本文将…...

通俗易懂的15个Java Lambda表达式案例

文章目录 1. **实现Runnable接口**&#xff1a;2. **事件监听器**&#xff08;如Swing中的ActionListener&#xff09;&#xff1a;3. **集合遍历**&#xff08;使用forEach方法&#xff09;&#xff1a;4. **过滤集合**&#xff08;使用Stream API&#xff09;&#xff1a;5. …...

十七:爬虫-JS逆向(上)

1、什么是JS、JS反爬是什么&#xff1f;JS逆向是什么? JS:JS全称JavaScript是互联网上最流行的脚本语言&#xff0c;这门语言可用于HTML 和 web&#xff0c;更可广泛用于服务器、PC、笔记本电脑、平板电脑和智能手机等设备。JavaScript 是一种轻量级的编程语言。JavaScript 是…...

How to implement anti-crawler strategies to protect site data

How to implement anti-crawler strategies to protect site data 信息校验型反爬虫User-Agent反爬虫Cookie反爬虫签名验证反爬虫WebSocket握手验证反爬虫WebSocket消息校验反爬虫WebSocket Ping反爬虫 动态渲染反爬虫文本混淆反爬虫图片伪装反爬虫CSS偏移反爬虫SVG映射反爬虫字…...

王国维的人生三境界,这一生至少当一次傻瓜

一、人生三境界 古今之成大事业、大学问者&#xff0c;必经过三种之境界。“昨夜西风凋碧树&#xff0c;独上高楼&#xff0c;望尽天涯路。”此第一境也。“衣带渐宽终不悔&#xff0c;为伊消得人憔悴。”此第二境也。“众里寻他千百度&#xff0c;蓦然回首&#xff0c;那人却…...

Jmeter二次开发实操问题汇总(JDK问题,jar包问题)

前提 之前写过一篇文章&#xff1a;https://qa-lsq.blog.csdn.net/article/details/119782694 只是简单尝试了一下生成一个随机手机号码。 但是如果在工作中一个实际场景要用的二次开发&#xff0c;可能会遇到一些问题。 比如这样一个场景&#xff1a; Mobile或者前端调用部分…...

网络安全B模块(笔记详解)- 数字取证

数据分析数字取证-attack 1.使用Wireshark查看并分析Windows 7桌面下的attack.pcapng数据包文件,通过分析数据包attack.pcapng找出恶意用户的IP地址,并将恶意用户的IP地址作为Flag(形式:[IP地址])提交; 解析:http.request.method==POST ​ Flag:[172.16.1.102] 2.继续…...

阿里云服务器8080端口安全组开通图文教程

阿里云服务器8080端口开放在安全组中放行&#xff0c;Tomcat默认使用8080端口&#xff0c;8080端口也用于www代理服务&#xff0c;阿腾云atengyun.com以8080端口为例来详细说下阿里云服务器8080端口开启教程教程&#xff1a; 阿里云服务器8080端口开启教程 阿里云服务器8080端…...

vmlinux, vmlinux.bin, bzImage; cmake的find_package(Clang)新增了哪些变量( 比较两次记录的所有变量差异)

vmlinux, vmlinux.bin, bzImage cd /bal/linux-stable/ file vmlinux #vmlinux: ELF 32-bit LSB executable, Intel 80386, version 1 (SYSV), statically linked, BuildID[sha1]=b99bbd9dda1ec2751da246d4a7ae4e6fcf7d789b, not stripped #文件大小 20MB, 19940148Bfile ar…...

webpack配置入门

webpack是需要一定配置才能使用的&#xff0c;否则无任何效果。在开始webpack学习之前必须理解以下5个核心概念。 5大核心配置 1.entry(入口) webpack从那个文件开始打包&#xff0c;支持单文件入口&#xff08;vue和react脚手架单入口&#xff09;和多文件入口 2.output(输…...

Elasticsearch 8.X进阶搜索之“图搜图”实战

Elasticsearch 8.X “图搜图”实战 1、什么是图搜图&#xff1f; "图搜图"指的是通过图像搜索的一种方法&#xff0c;用户可以通过上传一张图片&#xff0c;搜索引擎会返回类似或者相关的图片结果。这种搜索方式不需要用户输入文字&#xff0c;而是通过比较图片的视…...

LLM之RAG实战(十三)| 利用MongoDB矢量搜索实现RAG高级检索

想象一下&#xff0c;你是一名侦探&#xff0c;身处庞大的信息世界&#xff0c;试图在堆积如山的数据中找到隐藏的一条重要线索&#xff0c;这就是检索增强生成&#xff08;RAG&#xff09;发挥作用的地方&#xff0c;它就像你在人工智能和语言模型世界中的可靠助手。但即使是最…...

UI动效设计师通往高薪之路,AE设计从基础到进阶教学

一、教程描述 UI动效设计&#xff0c;顾名思义即动态效果的设计&#xff0c;用户界面上所有运动的效果&#xff0c;也可以视其为界面设计与动态设计的交集&#xff0c;或者可以简单理解为UI设计中的动画效果&#xff0c;是UI设计中不可或缺的组成部分。现在UI设计的要求越来越…...

APK多渠道加固打包笔记之360加固宝

知识储备 首先需要知道V1,V2,V3签名的区别&#xff0c;可以参考之前的文章&#xff1a;AndroidV1,V2,V3签名原理详解 前言&#xff1a;一般开发者会指定使用自己创建的证书&#xff0c;如果没有指定&#xff0c;则会默认使用系统的证书&#xff0c;该默认的证书存储在C:\Users…...

编程天赋和努力哪个更重要?

编程天赋和努力在编程中都非常重要&#xff0c;但它们的侧重点不同。 编程天赋通常指的是与生俱来的、在逻辑思维、抽象思维、创造力等方面的能力&#xff0c;这些能力可以帮助程序员更快地理解问题、更高效地设计和实现解决方案。天赋的确可以帮助程序员更容易地入门和更快地掌…...

SpringCloud Alibaba之Nacos配置中心配置详解

目录 Nacos配置中心数据模型Nacos配置文件加载Nacos配置 Nacos配置中心数据模型 Nacos 数据模型 Key 由三元组唯一确定&#xff0c;三元组分别是Namespace、Group、DataId&#xff0c;Namespace默认是公共命名空间&#xff08;public&#xff09;&#xff0c;分组默认是 DEFAUL…...

个人实际开发心得感悟及学习方法

前言 我的学习路线应该和大多数人的学习路线差不多,快速的学习完html和css,很多东西都没有记住的情况下就进入了js的学习,js学的懵懵懂懂就进入了node.js的基础学习和webpack的了解式学习,然后就跨度到了vue和react框架的学习。 节奏很快,学习的基础也极其不扎实。正如同那句…...

光速爱购--靠谱的SpringBoot项目

简介 这是一个靠谱的SpringBoot项目实战&#xff0c;名字叫光速爱购。从零开发项目&#xff0c;视频加文档&#xff0c;十天就能学会开发JavaWeb项目。 教程路线是&#xff1a;搭建环境> 安装软件> 创建项目> 添加依赖和配置> 通过表生成代码> 编写Java代码&g…...

UE5 学习系列(二)用户操作界面及介绍

这篇博客是 UE5 学习系列博客的第二篇&#xff0c;在第一篇的基础上展开这篇内容。博客参考的 B 站视频资料和第一篇的链接如下&#xff1a; 【Note】&#xff1a;如果你已经完成安装等操作&#xff0c;可以只执行第一篇博客中 2. 新建一个空白游戏项目 章节操作&#xff0c;重…...

Android Wi-Fi 连接失败日志分析

1. Android wifi 关键日志总结 (1) Wi-Fi 断开 (CTRL-EVENT-DISCONNECTED reason3) 日志相关部分&#xff1a; 06-05 10:48:40.987 943 943 I wpa_supplicant: wlan0: CTRL-EVENT-DISCONNECTED bssid44:9b:c1:57:a8:90 reason3 locally_generated1解析&#xff1a; CTR…...

剑指offer20_链表中环的入口节点

链表中环的入口节点 给定一个链表&#xff0c;若其中包含环&#xff0c;则输出环的入口节点。 若其中不包含环&#xff0c;则输出null。 数据范围 节点 val 值取值范围 [ 1 , 1000 ] [1,1000] [1,1000]。 节点 val 值各不相同。 链表长度 [ 0 , 500 ] [0,500] [0,500]。 …...

1.3 VSCode安装与环境配置

进入网址Visual Studio Code - Code Editing. Redefined下载.deb文件&#xff0c;然后打开终端&#xff0c;进入下载文件夹&#xff0c;键入命令 sudo dpkg -i code_1.100.3-1748872405_amd64.deb 在终端键入命令code即启动vscode 需要安装插件列表 1.Chinese简化 2.ros …...

浅谈不同二分算法的查找情况

二分算法原理比较简单&#xff0c;但是实际的算法模板却有很多&#xff0c;这一切都源于二分查找问题中的复杂情况和二分算法的边界处理&#xff0c;以下是博主对一些二分算法查找的情况分析。 需要说明的是&#xff0c;以下二分算法都是基于有序序列为升序有序的情况&#xf…...

VM虚拟机网络配置(ubuntu24桥接模式):配置静态IP

编辑-虚拟网络编辑器-更改设置 选择桥接模式&#xff0c;然后找到相应的网卡&#xff08;可以查看自己本机的网络连接&#xff09; windows连接的网络点击查看属性 编辑虚拟机设置更改网络配置&#xff0c;选择刚才配置的桥接模式 静态ip设置&#xff1a; 我用的ubuntu24桌…...

JVM 内存结构 详解

内存结构 运行时数据区&#xff1a; Java虚拟机在运行Java程序过程中管理的内存区域。 程序计数器&#xff1a; ​ 线程私有&#xff0c;程序控制流的指示器&#xff0c;分支、循环、跳转、异常处理、线程恢复等基础功能都依赖这个计数器完成。 ​ 每个线程都有一个程序计数…...

BLEU评分:机器翻译质量评估的黄金标准

BLEU评分&#xff1a;机器翻译质量评估的黄金标准 1. 引言 在自然语言处理(NLP)领域&#xff0c;衡量一个机器翻译模型的性能至关重要。BLEU (Bilingual Evaluation Understudy) 作为一种自动化评估指标&#xff0c;自2002年由IBM的Kishore Papineni等人提出以来&#xff0c;…...

Python 实现 Web 静态服务器(HTTP 协议)

目录 一、在本地启动 HTTP 服务器1. Windows 下安装 node.js1&#xff09;下载安装包2&#xff09;配置环境变量3&#xff09;安装镜像4&#xff09;node.js 的常用命令 2. 安装 http-server 服务3. 使用 http-server 开启服务1&#xff09;使用 http-server2&#xff09;详解 …...

华为OD最新机试真题-数组组成的最小数字-OD统一考试(B卷)

题目描述 给定一个整型数组,请从该数组中选择3个元素 组成最小数字并输出 (如果数组长度小于3,则选择数组中所有元素来组成最小数字)。 输入描述 行用半角逗号分割的字符串记录的整型数组,0<数组长度<= 100,0<整数的取值范围<= 10000。 输出描述 由3个元素组成…...