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/

新建我创建的投票页面:

	{"path": "pages/createVoteList/createVoteList","style": {"navigationBarTitleText": "我创建的投票"}}

个人中心页面,加下 点击 “我创建的投票”跳转列表页面:

		goVoteList:function(){uni.navigateTo({url:"/pages/createVoteList/createVoteList"})}

后端:

/*** 获取指定用户创建的投票* @param token* @return*/
@RequestMapping("/listOfUser")
public R listOfUser(@RequestHeader String token){Claims claims = JwtUtils.validateJWT(token).getClaims();System.out.println("openid="+claims.getId());List<Vote> voteList = voteService.list(new QueryWrapper<Vote>().eq("openid", claims.getId()).orderByDesc("vote_end_time"));Map<String,Object> resultMap=new HashMap<>();resultMap.put("voteList",voteList);return R.ok(resultMap);
}

前端:

<template><view class="create_vote_list"><view class="vote_list"><block v-for="(value,index) in voteList" :key="index"><view class="vote_item" ><view v-if="value.type==2" class="vote_item_pic"/><view v-if="value.type==1" class="vote_item_word"/><view class="vote_item_body"><view class="vote_item_title">{{value.title}}</view><view v-if="judgeDate(value.voteEndTime)>=0" class="vote_item_status_over">已结束</view><view v-if="judgeDate(value.voteEndTime)<0" class="vote_item_status_progressive">进行时</view></view></view></block></view></view>
</template><script>import {getBaseUrl, requestUtil} from "../../utils/requestUtil.js"import {isEmpty} from "../../utils/stringUtil.js"import {judgeDate} from "../../utils/dateUtil.js"export default{data(){return{voteList:[]}},onLoad() {this.getVoteList();},methods:{getVoteList:async function(){const result=await requestUtil({url:"/vote/listOfUser",method:"get"});this.voteList=result.voteList;},judgeDate:function(toDate){return judgeDate(toDate);}}}
</script><style lang="scss">@import "/common/css/iconfont.css";.create_vote_list{padding: 10px;.vote_list{.vote_item{border-radius: 5px;background-color: white;display: flex;width: 100%;flex-direction: row;margin-bottom: 15px;.vote_item_pic{background: url("../../static/image/pic.png") no-repeat center;width: 3.0rem;height: 3.0rem;margin-right: 0.425rem;background-size:cover;margin: 30rpx;}.vote_item_word{background: url("../../static/image/word.png") no-repeat center;width: 3.0rem;height: 3.0rem;margin-right: 0.425rem;background-size:cover;margin: 30rpx;}.vote_item_body{height: auto;display: flex;flex: 1;flex-direction: column;justify-content: space-around;align-items: flex-start;overflow: hidden;.vote_item_title{font-size: 1.2rem;overflow: hidden;width: 100%;font-weight: bolder;padding-top: 10px;}.vote_item_status_progressive{display: flex;flex-direction: row;justify-content: space-between;width: 100%;line-height: 1.1375rem;font-size: 0.9rem;padding-bottom: 10px;color: blue;}.vote_item_status_over{display: flex;flex-direction: row;justify-content: space-between;width: 100%;line-height: 1.1375rem;font-size: 0.9rem;padding-bottom: 10px;color: gray;}}}}}
</style>

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

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

相关文章

GitLab clone 地址 不对

1丶问题描述 2丶解决方案 解决方案&#xff1a; 找到挂载到宿主机配置文件&#xff1a;gitlab.rb vi gitlab.rb 改成自己的ip 重启容器 docker restart gitlab 如果发现容器一直重启&#xff0c;可采用粗暴的方法&#xff0c;直接干掉当前容器&#xff0c;重新运行一个 …

SpringMVC-异常处理及常用组件

异常处理器 1.基于配置的异常处理 springmvc提供了一个处理控制器方法执行过程中所出现的异常的接口: HandlerExceptionResolver HandlerExceptionResolver接口的实现类有: DefaultHandlerExceptionResolver和SimpleMappingExceptionResolver springmvc提供了自定义的异常处…

Apache Doris (六十二): Spark Doris Connector - (2)-使用

🏡 个人主页:IT贫道-CSDN博客 🚩 私聊博主:私聊博主加WX好友,获取更多资料哦~ 🔔 博主个人B栈地址:豹哥教你学编程的个人空间-豹哥教你学编程个人主页-哔哩哔哩视频 目录 1. 将编译jar包加入本地Maven仓库

全版本Windows RCE漏洞复现CVE-2023-36025

漏洞简介 CVE-2023-36025是微软于11月补丁日发布的安全更新中修复Windows SmartScreen安全功能绕过漏洞。攻击者可以通过诱导用户单击特制的URL来利用该漏洞&#xff0c;对目标系统进行攻击。成功利用该漏洞的攻击者能够绕过Windows Defender SmartScreen检查及其相关提示。该漏…

2024年【R2移动式压力容器充装】考试资料及R2移动式压力容器充装理论考试

题库来源&#xff1a;安全生产模拟考试一点通公众号小程序 R2移动式压力容器充装考试资料根据新R2移动式压力容器充装考试大纲要求&#xff0c;安全生产模拟考试一点通将R2移动式压力容器充装模拟考试试题进行汇编&#xff0c;组成一套R2移动式压力容器充装全真模拟考试试题&a…

Node.js和npm

目录 01_Node.js01.什么是 Node.js目标讲解小结 02.fs模块-读写文件目标讲解小结 03.path模块-路径处理目标讲解小结 04.案例-压缩前端html目标讲解小结 05.认识URL中的端口号目标讲解小结 06.http模块-创建Web服务目标讲解小结 07.案例-浏览时钟目标讲解小结 02_Node.js模块化…

02-python的基础语法-01python字面量/注释/数据类型/数据类型转换

字面量 在代码中&#xff0c;被写下来的固定的值&#xff0c;被称为字面量。 python中哪些值是可以被写出来的呢?又该如何写呢&#xff1f; 字符串&#xff1a;又称文本&#xff0c;是由任意数量的字符如中文&#xff0c;英文&#xff0c;各类符号&#xff0c;数字组成。 这…

ES-极客学习第二部分ES 入门

基本概念 索引、文档、节点、分片和API json 文档 文档的元数据 需要通过Kibana导入Sample Data的电商数据。具体参考“2.2节-Kibana的安装与界面快速浏览” 索引 kibana 管理ES索引 在系统中找到kibana配置文件&#xff08;我这里是etc/kibana/kibana.yml&#xff09; vim /…

esp32UART串口外设(Arduino)

通用异步接收器/发送器 &#xff08;UART&#xff09; 介绍 通用异步接收器/发送器 &#xff08;UART&#xff09; 是一种硬件功能&#xff0c;它使用广泛采用的异步串行通信接口&#xff08;如 RS232、RS422 和 RS485&#xff09;处理通信&#xff08;即时序要求和数据成帧&…

Vue-9、Vue事件修饰符

1、prevent 阻止默认事件 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><title>事件修饰符</title><!--引入vue--><script type"text/javascript" src"https://cdn.jsdeliv…

用html和css实现一个加载页面【究极简单】

要创建一个简单的加载页面&#xff0c;你可以使用 HTML 和 CSS 来设计。以下是一个基本的加载页面示例&#xff1a; HTML 文件 (index.html): <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta name"…

JavaScript中解锁Map和Set的力量

&#x1f9d1;‍&#x1f393; 个人主页&#xff1a;《爱蹦跶的大A阿》 &#x1f525;当前正在更新专栏&#xff1a;《VUE》 、《JavaScript保姆级教程》、《krpano》 ​ ​ ✨ 前言 ES6带来了Map和Set两个新的数据结构 - 它们分别用于存放键值对和唯一值。Map和Set提供了更…

深入浅出Go语言:匿名函数的原理和实践案例

深入浅出Go语言&#xff1a;匿名函数的原理和实践案例 引言匿名函数的基础实际应用案例一实际应用案例二性能考虑最佳实践与常见错误结语 引言 在Go语言的世界里&#xff0c;有一个功能强大且灵活的编程元素值得每位开发者深入了解——匿名函数。作为Go语言核心特性之一&#…

AI论文润色平台一览,让你的论文更加流畅易懂!

之前其实比较犹豫&#xff0c;是否应该整理一篇关于可辅助论文写作的在线平台的文章。因为论文这个事情&#xff0c;更重要的是要有个人的思考&#xff0c;要亲自动手写&#xff0c;这涉及到诚信的问题。然而&#xff0c;通过AI直接生成的论文可能很难通过查重和AI检测&#xf…

计算机二级WPS Office考试须知、如何备考、备考建议

本文从计算机二级考试须知、如何备考、备考建议以及考试的注意事项等方面进行讲述&#xff0c;认认真真看&#xff0c;对你受益匪浅。 一、计算机二级考试须知 2021年3月27日至29日将举办第60次全国计算机等级考试&#xff08;NCRE&#xff09;&#xff0c;从今年起&#xff0…

40-特殊运算符delete,new,.getDate,.setDate,运算符优先级

1.delete删除. 数组 // 可以删除数组元素&#xff0c;可以删除对象键值对// 删除数组的值&#xff0c;数组长度保持不变// 删掉的值变成emptyvar arr [1,2,3,4,5];delete arr[0];console.log(arr); 对象 var obj {"a":"aa","b":"bb&quo…

什么是云安全?如何保护云资源

云计算允许组织通过互联网按需向其客户、合作伙伴或员工提供关键业务应用程序、服务和资源。换句话说&#xff0c;不再需要物理维护资源。每当您通过 Internet 从计算机访问文件或服务时&#xff0c;您都是在访问云。 迁移到云可以帮助企业增强安全性、简化运营并降低成本。企…

理解接雨水算法

一、IDEA注释显示图片 在做题时&#xff0c;需要对照这图片&#xff0c;才能更好的梳理思路。 首先&#xff0c;注释里添加<img/>标签 之后&#xff0c;将鼠标光标放置在需要以阅读模式预览注释的地方&#xff0c;然后按快捷键CtrlAltQ即可 二、接雨水算法 先看接雨水…

【Spring实战】27 统一异常处理最佳实践

文章目录 1. 自定义异常2. 统一异常处理3. 配置4. 应用5. 启动类6. 启动服务7. 验证8. 优点总结 在 Spring 项目中&#xff0c;有效的异常处理是确保应用程序稳定性和用户体验的关键因素之一。通过实现统一异常处理&#xff0c;我们能够更好的管理和响应应用程序中的各种异常情…

Phi-2小语言模型QLoRA微调教程

前言 就在不久前&#xff0c;微软正式发布了一个 27 亿参数的语言模型——Phi-2。这是一种文本到文本的人工智能程序&#xff0c;具有出色的推理和语言理解能力。同时&#xff0c;微软研究院也在官方 X 平台上声称&#xff1a;“Phi-2 的性能优于其他现有的小型语言模型&#…