uniapp微信小程序投票系统实战 (SpringBoot2+vue3.2+element plus ) -投票帖子排行实现

news2024/11/30 10:37:32

锋哥原创的uniapp微信小程序投票系统实战:

uniapp微信小程序投票系统实战课程 (SpringBoot2+vue3.2+element plus ) ( 火爆连载更新中... )_哔哩哔哩_bilibiliuniapp微信小程序投票系统实战课程 (SpringBoot2+vue3.2+element plus ) ( 火爆连载更新中... )共计21条视频,包括:uniapp微信小程序投票系统实战课程 (SpringBoot2+vue3.2+element plus ) ( 火爆连载更新中... )、第2讲 投票项目后端架构搭建、第3讲 小程序端 TabBar搭建等,UP主更多精彩视频,请关注UP账号。icon-default.png?t=N7T8https://www.bilibili.com/video/BV1ea4y137xf/

后端:

/**
 * 投票选型Controller控制器
 * @author java1234_小锋 (公众号:java1234)
 * @site www.java1234.vip
 * @company 南通小锋网络科技有限公司
 */
@RestController
@RequestMapping("/voteItem")
public class VoteItemController {
   
    @Autowired
    private IVoteItemService voteItemService;

    /**
     * 获取指定投票的投票项排名
     * @param voteId
     * @return
     */
    @GetMapping("/rank/{voteId}")
    public R getRankByVoteId(@PathVariable(value = "voteId")Integer voteId){
        List<VoteItem> voteItemList = voteItemService.list(new QueryWrapper<VoteItem>().eq("vote_id", voteId).orderByDesc("number"));
        Map<String,Object> map=new HashMap<>();
        map.put("voteItemList",voteItemList);
        return R.ok(map);
    }

}

新建rank页面:

{
			"path": "pages/rank/rank",
			"style": {
				"navigationBarTitleText": "票数排行"
			}
		}
<template>
	<view class="rank">
		<view class="voteItem" v-for="item in voteItemList">
			<view class="itemName">
				{{item.name}}
			</view>
			<view class="number">
				{{item.number}}票
			</view>
		</view>
	</view>
</template>

<script>
import {getBaseUrl, requestUtil} from "../../utils/requestUtil.js"
	export default{
		data(){
			return{
				voteItemList:{}
			}
		},
		onLoad(e) {
			console.log(e.id)
			this.getRankByVoteId(e.id)
		},
		methods:{
			getRankByVoteId:async function(voteId){
				const result=await requestUtil({url:"/voteItem/rank/"+voteId,method:"get"});
				console.log(result)
				this.voteItemList=result.voteItemList
			}
		}
	}
	
</script>

<style lang="scss">
	.rank{
		padding: 15px;	
		background-color: white;
		.voteItem{
			display: flex;
			justify-content: space-between;
			border-radius: 10px;
			background-color: #f4f5f7;
			padding: 15px;
			margin-bottom: 10px;
			.itemName{
				
			}
			.number{
				
			}
		}
	}
</style>

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

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

相关文章

LNMP环境下综合部署动态网站

目录 LNMP部署--nginx 搭建mysql数据库 安装mysql的过程&#xff1a; 部署PHP&#xff1a; ​编辑​编辑php的配置文件在哪 wordpress程序安装 LNMP部署--nginx 纯净--联网状态 环境变量中没有nginx 安装形式的选择&#xff1a; yum安装&#xff1a;自动下载安装包及…

C++ 最短路总结 朴素Dijkstra算法 || 模版题,求最短路

算法选择&#xff1a; 稠密图用邻接矩阵写&#xff0c;稀疏图用邻接表写。 朴素dijkstra&#xff1a; 给定一个 n 个点 m 条边的有向图&#xff0c;图中可能存在重边和自环&#xff0c;所有边权均为正值。 请你求出 1 号点到 n 号点的最短距离&#xff0c;如果无法从 1 号点…

leaflet基本使用

leaflet&#xff1a;一个开源并且对移动端友好的交互式地图 JavaScript 库 中文文档&#xff1a;https://leafletjs.cn/reference.html 官网&#xff08;英文&#xff09;&#xff1a;https://iclient.supermap.io/examples/leaflet/examples.html#iServer 该项目基于vue3ts搭…

【CSP】2023年12月真题练习(更新到202312-2)

试题编号&#xff1a;202312-1试题名称&#xff1a;仓库规划时间限制&#xff1a;1.0s内存限制&#xff1a;512.0MB问题描述&#xff1a; 问题描述 西西艾弗岛上共有 n 个仓库&#xff0c;依次编号为 1⋯n。每个仓库均有一个 m 维向量的位置编码&#xff0c;用来表示仓库间的物…

[zabbix] zabbix监控其他

一、温习zabbix自定义监控 二、zabbix 自动发现与自动注册 2.1 zabbix 自动发现 //zabbix 自动发现&#xff08;对于 agent2 是被动模式&#xff09; zabbix server 主动的去发现所有的客户端&#xff0c;然后将客户端的信息登记在服务端上。 缺点是如果定义的网段中的主机数…

各种版本对应关系:SpringCloudAlibaba——SpringCloud——SpringBoot——SpringFramework——JDK

SpringCloudAlibaba——SpringCloud——SpringBoot——SpringFramework——JDK 一般情况&#xff0c;在https://github.com/项目/wiki目录下有发布信息及对应的要求其他依赖的版本信息SpringCloudAlibaba——SpringCloud——SpringBootSpringBoot和SpringFramework的版本对应关…

新版K8s:v1.28拉取Harbor仓库镜像以及本地镜像(docker弃用改用containerd,纯纯踩坑)

这里写目录标题 一、项目概述二、环境三、项目样式Harborkuboard运行样式 四、核心点Harbor安装config.toml文件修改(containerd)ctr、nerdctl相关命令kuboard工作负载 五、总结 一、项目概述 使用Kuboard作为k8s集群的管理平台&#xff0c;Harbor作为镜像仓库&#xff0c;拉取…

LeetCode 41 缺失的第一个正数

题目描述 缺失的第一个正数 给你一个未排序的整数数组 nums &#xff0c;请你找出其中没有出现的最小的正整数。 请你实现时间复杂度为 O(n) 并且只使用常数级别额外空间的解决方案。 示例 1&#xff1a; 输入&#xff1a;nums [1,2,0] 输出&#xff1a;3示例 2&#xff…

中科院自动化所:基于关系图深度强化学习的机器人多目标包围问题新算法

摘要&#xff1a;中科院自动化所蒲志强教授团队&#xff0c;提出一种基于关系图的深度强化学习方法&#xff0c;应用于多目标避碰包围(MECA)问题&#xff0c;使用NOKOV度量动作捕捉系统获取多机器人位置信息&#xff0c;验证了方法的有效性和适应性。研究成果在2022年ICRA大会发…

【目标检测】YOLOv7算法实现(一):模型搭建

本系列文章记录本人硕士阶段YOLO系列目标检测算法自学及其代码实现的过程。其中算法具体实现借鉴于ultralytics YOLO源码Github&#xff0c;删减了源码中部分内容&#xff0c;满足个人科研需求。   本篇文章在YOLOv5算法实现的基础上&#xff0c;进一步完成YOLOv7算法的实现。…

yum仓库以及NFS共享

yum实现过程 1.光驱里自带yum 2.网络下载到本地 3.直接通过网络 如何实现安装服务 yum客户端找到yum服务端&#xff0c;找到yum的仓库位置&#xff0c;下载元信息&#xff0c;因为里面有软件的位置&#xff0c;因此可以找到软件包的位置&#xff0c;然后下载到本地 仓库的类…

Matlab 求解非刚性微分方程(ode45)

语法 1、[t,y] ode45(odefun,tspan,y0) 2、[t,y] ode45(odefun,tspan,y0,options) 3、[t,y,te,ye,ie] ode45(odefun,tspan,y0,options) 4、sol ode45(___)描述 [t,y] ode45(odefun,tspan,y0) 其中&#xff0c;tspan [t0 tf] 为微分方程 odefun 的积分区间&#xff0c;y…

mobi文件怎么转换成pdf?

mobi文件怎么转换成pdf&#xff1f;在数字化时代&#xff0c;电子书籍成为了越来越受欢迎的阅读方式。我们可以通过多种格式的电子书来获取知识和娱乐&#xff0c;其中一种常见的格式就是Mobi文件。Mobi文件是亚马逊公司开发的一种电子书格式&#xff0c;它主要用于Kindle设备和…

Maven 依赖传递和冲突、继承和聚合

一、依赖传递和冲突 1.1 Maven 依赖传递特性 1.1.1 概念 假如有三个 Maven 项目 A、B 和 C&#xff0c;其中项目 A 依赖 B&#xff0c;项目 B 依赖 C。那么我们可以说 A 依赖 C。也就是说&#xff0c;依赖的关系为&#xff1a;A—>B—>C&#xff0c; 那么我们执行项目 …

从零开发短视频电商 PaddleOCR Java推理 (三)优化文本检测模型输入和输出

背景 PaddleOCR提供了一系列测试图片&#xff0c;你可以通过点击这里来下载。 值得注意的是&#xff0c;PaddleOCR的模型更新速度远远快于DJL&#xff0c;这导致了一些DJL的优化滞后问题。因此&#xff0c;我们需要采取一些策略来跟上PaddleOCR的最新进展。 针对文本检测模型…

Postgresql 12.2 + PostGIS 3.0.1 安装部署

参考文档&#xff1a; 按照该文档安装即可&#xff0c;如果遇到报错&#xff0c;可以参考下文&#xff1a; https://blog.csdn.net/weixin_41166785/article/details/127674169 所需的安装包 在资源里面&#xff08;我看下怎么可以不用积分下载&#xff09; 1、no acceptable…

项目01——《3D滚球跑酷》

布局通常2 by 3 接下来我们布置场景&#xff0c;我们的预期结果&#xff08;功能分析&#xff09;是&#xff1a; 游戏中中的小球会以恒定速度向前移动&#xff0c;而玩家控制着小球左右移动来躲避跑道中的红色障碍物&#xff0c;如果玩家能控制小球在跑到上移动一定距离则视为…

从CISC到RISC-V:揭开指令集的面纱

对于大多数同学来说&#xff0c;计算机或智能手机的运行似乎就像魔法一样神奇。你可能知道它们内部都是一些复杂的电子组件&#xff0c;比如CPU、内存等等&#xff0c;但这些组件是如何协同工作&#xff0c;让我们可以在电脑上打字&#xff0c;或者在手机上看视频呢&#xff1f…

基于SSM的在线宠物商城设计与实现

末尾获取源码 开发语言&#xff1a;Java Java开发工具&#xff1a;JDK1.8 后端框架&#xff1a;SSM 前端&#xff1a;Vue、HTML 数据库&#xff1a;MySQL5.7和Navicat管理工具结合 服务器&#xff1a;Tomcat8.5 开发软件&#xff1a;IDEA / Eclipse 是否Maven项目&#xff1a;是…

Tide Quencher 7.1WS azide,TQ7.1WS N3,适用于多种荧光物质的分析

您好&#xff0c;欢迎来到新研之家 文章关键词&#xff1a;Tide Quencher 7.1WS 叠氮&#xff0c;TQ7.1WS 叠氮&#xff0c;Tide Quencher 7.1WS azide&#xff0c;TQ7.1WS N3&#xff0c;TQ7.1WS azide&#xff0c;Tide Quencher 7.1WS N3 一、基本信息 产品简介&#xff1…