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

锋哥原创的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.mfbz.cn/a/329535.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

【idea】idea插件编写教程,博主原创idea插件已上架idea插件市场 欢迎下载

前言&#xff1a;经常使用Objects.equals(a,b)方法的同学 应该或多或少都会因为粗心而传错参&#xff0c; 例如日常开发中 我们使用Objects.equals去比较 status(入参)&#xff0c;statusEnum(枚举), 很容易忘记statusEnum.getCode() 或 statusEnum.getVaule() &#xff0c;再比…

Java可视化物联网智慧工地综合云平台源码 私有化部署

智慧工地平台围绕建筑施工人、物、事的安全管理为核心&#xff0c;对应研发了劳务实名制、视频监控、扬尘监测、起重机械安全监测、安全帽监测等功能一体化管理的解决方案。 智慧工地是聚焦工程施工现场&#xff0c;紧紧围绕人、机、料、法、环等关键要素&#xff0c;综合运用…

docker安装运行CloudBeaver并设置默认语言为中文

1、CloudBeaver CloudBeaver 是一个开源的 Web 数据库管理工具&#xff0c;它提供了一个基于浏览器的用户界面&#xff0c;允许用户管理和操作各种类型的数据库。CloudBeaver 支持多种数据库系统&#xff0c;包括但不限于 PostgreSQL、MySQL、SQLite、Oracle、SQL Server 以及…

RabbitMQ入门精讲

1. 什么是消息队列 消息指的是两个应用间传递的数据。数据的类型有很多种形式&#xff0c;可能只包含文本字符串&#xff0c;也可能包含嵌入对象。 “消息队列(Message Queue)”是在消息的传输过程中保存消息的容器。在消息队列中&#xff0c;通常有生产者和消费者两个角色。…

【Java基础_01】Java运行机制及运行过程

【Java基础_01】Java运行机制及运行过程 文章目录 【Java基础_01】Java运行机制及运行过程1.Java 运行机制及运行过程1.1 Java 核心机制-Java 虚拟机 [JVM java virtual machine] 1.2 JDK&#xff0c;JRE1.3 JVM,JDK和JRE1.4 环境变量path1.4.1 为什么要配置path1.4.2 配置环…

【一步一步学】ROS软路由设置代理IP教程

申明&#xff1a;本文仅针对国内L2TP/PPTP&#xff0c;适用于国内的游戏加速或学术研究&#xff0c;禁止一切利用该技术的翻墙行为。 今天和大家分享的是ROS软路由如何设置分流的问题&#xff0c;很多做过工作室的小伙伴肯定很熟悉。 简单来讲&#xff0c;ROS软路由就是普通的路…

数模转换 120dB,192kHz DAC 音频转换芯片DP7398 软硬件兼容替代CS4398

数模转换芯片&#xff08;DAC&#xff09;是一种将数字信号转换为模拟信号的集成电路。它通过将数字数据转换为相应的模拟电压或电流输出&#xff0c;实现了数字系统与模拟系统之间的接口和互联。 DAC具有许多优势&#xff0c;使其在各种应用领域得到广泛应用。首先&#xff0c…

接口测试 01 -- 基础与原理

接口概述 什么是接口 接口是计算机系统中不同组件之间进行交流和互动的一种方式。 在软件开发中&#xff0c;接口通常指的是一组定义了输入、输出、功能和规范的方法、函数或协议。接口定义了组件之间的通信协议&#xff0c;使得它们可以相互协作&#xff0c;实现特定的功能。…

23.实战演练--个人主页

<?xml version"1.0" encoding"utf-8"?> <manifest xmlns:android"http://schemas.android.com/apk/res/android"xmlns:tools"http://schemas.android.com/tools"><applicationandroid:allowBackup"true"an…

【latex】参考文献排版前移,在最前面引用\usepackage{url}

【LaTeX】参考文献排版前移&#xff0c;在最前面引用\usepackage{url} 写在最前面完整解决步骤请教申申latex编译报错解决方案 写在最前面 参考文献从21开始排版前移了 解决方案&#xff1a;在最前面加一行 \usepackage{url}完整解决步骤 请教申申 申申yyds&#xff01;&am…

VsCode插件开发之ChatGPT实战

基础介绍&#x1f5e3;︎ VSCode 是采用了 Electron开发的跨平台的桌面应用&#xff0c;它兼容 Mac、Windows 和Linux&#xff0c;可以构建出三个平台的应用程序&#xff0c;基于VSCode开发的插件&#xff0c;同样也能在多个平台同时运行。 VSCode布局&#xff1a; 插件开发&…

IDEA插件中的postman,你试试

Postman是大家最常用的API调试工具&#xff0c;那么有没有一种方法可以不用手动写入接口到Postman&#xff0c;即可进行接口调试操作&#xff1f;今天给大家推荐一款IDEA插件&#xff1a;Apipost Helper&#xff0c;写完代码就可以调试接口并一键生成接口文档&#xff01;而且还…

JAVA方法及练习

目录 Java方法的定义以及调用 带返回值方法的定义和调用 方法的重载 方法大练习 练习1 练习2 练习3 练习4 Java方法的定义以及调用 方法练习package java方法;public class fangfa1 {public static void main(String[] args) {xuexi();}//定义一个方法public static vo…

UG全参数化建模

在UG全参数化建模中&#xff0c;可以先创建表达式再设计图形&#xff0c;也可先设计图形再关联表达式 UG表达式类型有&#xff1a;数字&#xff0c;字符串&#xff0c;布尔&#xff0c;整数&#xff0c;点&#xff0c;矢量&#xff0c;列表 数字&#xff1a;在数字类型中&…

【Python学习】Python学习20- 面向对象(3)

目录 【Python学习】Python学习20- 面向对象&#xff08;1&#xff09; 前言类属性与方法类的私有属性类的私有方法实例 单下划线、双下划线、头尾双下划线说明&#xff1a;参考 文章所属专区 Python学习 前言 本章节主要说明Python的面向对象的处理最后一部分。 类属性与方…

【已解决】fatal: Authentication failed for ‘https://github.com/.../‘

文章目录 异常原因解决方法 异常原因 在 Linux 服务器上使用git push命令&#xff0c;输入用户名和密码之后&#xff0c;总会显示一个报错&#xff1a; fatal: Authentication failed for https://github.com/TianJiaQi-Code/Linux.git/ # 致命&#xff1a;无法通过验证访问起…

.NET国产化改造探索(三)、银河麒麟安装.NET 8环境

随着时代的发展以及近年来信创工作和…废话就不多说了&#xff0c;这个系列就是为.NET遇到国产化需求的一个闭坑系列。接下来&#xff0c;看操作。 上一篇介绍了如何在银河麒麟操作系统上安装人大金仓数据库&#xff0c;这篇文章详细介绍下在银河麒麟操作系统上安装.NET8环境。…

MySQL入门篇:约束(主键,外键),多表查询(连接查询,联合查询,子查询)

目录 1.约束1.约束分类2.演示3.外键约束1.语法2.删除/更新行为 2.多表查询1.多表关系2.多表查询分类1.连接查询1.内连接2.外连接1.左外连接2.右外连接 3.自连接 2.联合查询(union)3.子查询1.标量子查询2.列子查询3.行子查询4.表子查询 1.约束 ①概念:约束是作用于表中字段上的规…

Python4Delphi安装及编译

1.下载或直接克隆python4delphi组件资源到指定目录,我这里下载到Components文件夹下,并对下载的文件夹进行了重命名为(P4D),重命名不是必须的 下载地址:https://github.com/pyscripter/python4delphi 2.安装 2.1在已下载的目录下进入Install文件夹,双击MultiInstaller.exe…

如何快速打造属于自己的接口自动化测试框架

1 接口测试 接口测试是对系统或组件之间的接口进行测试&#xff0c;主要是校验数据的交换&#xff0c;传递和控制管理过程&#xff0c;以及相互逻辑依赖关系。 接口自动化相对于UI自动化来说&#xff0c;属于更底层的测试&#xff0c;这样带来的好处就是测试收益更大&#xff…
最新文章