uniapp微信小程序投票系统实战 (SpringBoot2+vue3.2+element plus ) -投票创建后端实现

news2024/11/20 18:24:38

锋哥原创的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/新建Vote投票类:

package com.java1234.entity;

import com.baomidou.mybatisplus.annotation.TableField;
import com.baomidou.mybatisplus.annotation.TableName;
import com.fasterxml.jackson.annotation.JsonFormat;
import com.fasterxml.jackson.databind.annotation.JsonSerialize;
import lombok.Data;

import java.util.Date;
import java.util.List;

/**
 * 投票实体
 * @author java1234_小锋 (公众号:java1234)
 * @site www.java1234.vip
 * @company 南通小锋网络科技有限公司
 */
@TableName("t_vote")
@Data
public class Vote {

    private Integer id; // 编号

    private String title; // 标题

    private String explanation; // 投票说明

    private String coverImage; // 封面图片

    @JsonSerialize(using=CustomDateTimeSerializer.class)
    @JsonFormat(pattern = "yyyy-MM-dd HH:mm:ss", timezone = "GMT+8")
    private Date voteEndTime; // 投票结束时间

    private String openid; // 投票发起人openid

    @TableField(select=false,exist = false)
    private List<VoteItem> voteItemList;

    @TableField(select=false,exist = false)
    private WxUserInfo wxUserInfo;

    private Integer type=1; // 1 文字投票  2 图片投票

}

新建VoteItem投票选项类:

package com.java1234.entity;

import com.baomidou.mybatisplus.annotation.TableName;
import lombok.Data;

/**
 * 投票选项实体
 * @author java1234_小锋 (公众号:java1234)
 * @site www.java1234.vip
 * @company 南通小锋网络科技有限公司
 */
@TableName("t_vote_item")
@Data
public class VoteItem {

    private Integer id; // 编号

    private Integer voteId; // 投票ID

    private String name; // 投票选项名称

    private String image; // 投票选项图片

    private Integer number; // 票数

}

数据库新建t_vote投票表:

create table `t_vote` (
	`id` int (11),
	`title` varchar (600),
	`explanation` varchar (3000),
	`cover_image` varchar (600),
	`vote_end_time` datetime ,
	`openid` varchar (600),
	`type` int (11)
); 

数据库再新建t_vote_item投票选项表:

create table `t_vote_item` (
	`id` int (11),
	`vote_id` int (11),
	`name` varchar (600),
	`image` varchar (600),
	`number` int (11)
); 

新建VoteMapper:

/**
 * 投票Mapper接口
 */
public interface VoteMapper extends BaseMapper<Vote> {
}

新建VoteItemMapper:

/**
 * 投票选项Mapper接口
 */
public interface VoteItemMapper extends BaseMapper<VoteItem> {

}

新建IVoteService:

/**
 * 投票Service接口
 */
public interface IVoteService extends IService<Vote> {
    
}

新建IVoteItemService:

/**
 * 投票选项Service接口
 */
public interface IVoteItemService extends IService<VoteItem> {

}

新建IVoteServiceImpl:

@Service("voteService")
public class IVoteServiceImpl extends ServiceImpl<VoteMapper,Vote> implements IVoteService {

    @Autowired
    private VoteMapper voteMapper;

}

新建IVoteItemServiceImpl:

@Service("voteItemService")
public class IVoteItemServiceImpl extends ServiceImpl<VoteItemMapper, VoteItem> implements IVoteItemService {

    @Autowired
    private VoteItemMapper voteItemMapper;
    
}

VoteController添加add方法:

/**
 * 添加投票
 * @param vote
 * @return
 */
@RequestMapping("/add")
@Transactional
public R add(@RequestBody Vote vote, @RequestHeader String token){
    System.out.println("token="+token);
    Claims claims = JwtUtils.validateJWT(token).getClaims();
    System.out.println("openid="+claims.getId());
    vote.setOpenid(claims.getId());
    voteService.save(vote);
    // 存投票选项
    List<VoteItem> voteItemList=vote.getVoteItemList();
    for(VoteItem voteItem:voteItemList){
        voteItem.setVoteId(vote.getId());
        voteItem.setNumber(0);
        voteItemService.save(voteItem);
    }
    return R.ok();
}

前端验证以及提交:

submitVote:async function(e){
    // 验证
    if(isEmpty(this.title)){
        uni.showToast({
            icon:"error",
            title:"请填写投票标题"
        })
        return;
    }
    // 投票选项片段 至少2个选项
    let resultOptions=this.options.filter(function(value,index,self){  // 过滤掉名称为空的投票选项
        console.log("value="+value.name)
        return !isEmpty(value.name)
    })
    console.log("xx"+JSON.stringify(resultOptions));
    console.log("length="+resultOptions.length)
    if(resultOptions.length<2){
        uni.showToast({
            icon:"error",
            title:"请至少填写两个投票选项"
        })
        return;
    }
    // 提交表单
    let form={
        title:this.title,
        coverImage:this.coverImageFileName,
        explanation:this.explanation,
        voteEndTime:this.voteEndTime,
        voteItemList:resultOptions,
        type:1
    }
    const result=await requestUtil({url:"/vote/add",data:form,method:"post"});
    if(result.code==0){
        console.log("发布成功")
        uni.showToast({
            icon:"success",
            title:"投票发起成功!"
        })
    }
}

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

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

相关文章

【39 Pandas+Pyecharts | 第七次人口普查数据分析可视化】

文章目录 &#x1f3f3;️‍&#x1f308; 1. 导入模块&#x1f3f3;️‍&#x1f308; 2. Pandas数据处理2.1 读取数据2.2 数据预览 &#x1f3f3;️‍&#x1f308; 3. Pyecharts数据可视化3.1 全国各省人口统计三维地图3.2 全国各地区人口数量分布地图3.3 全国人口性别比例3…

Make自动化构建程序工具介绍

Makefile是一种用来自动化构建程序的工具于&#xff0c;主要在UNIX和类UNIX系统上使用。它使用一种简单的语法来定义目标和依赖关系&#xff0c;从而实现自动化构建和管理项目的过程。 一个Makefile由一系列规则组成&#xff0c;每个规则包含一个目标和一组依赖文件。目标是要…

数十位大咖共话AI大模型落地,2024 AI 科技峰会前瞻 | 光锥智能

在ChatGPT带起的AI浪潮中&#xff0c;我们进入了一个科技狂奔的时代。 2023年&#xff0c;风云变幻中&#xff0c;我们见证了中国数百个大模型如雨后春笋般冒出&#xff0c;在多个重要版本的优化下&#xff0c;我们见证了大模型以光速迭代&#xff0c;在参数量、长文本、多模态…

Rancher2部署MySQL无法挂载Longhorn创建的pvc,怎么办?

转载说明&#xff1a;如果您喜欢这篇文章并打算转载它&#xff0c;请私信作者取得授权。感谢您喜爱本文&#xff0c;请文明转载&#xff0c;谢谢。 环境描述&#xff1a; rancher版本&#xff1a;v2.5.7 Longhorn版本&#xff1a;v1.1.1 MySQL版本&#xff1a;v5.7.26 问题描述…

基于Spring Boot框架的音乐平台

如今&#xff0c;互联网上的管理系统种类越来越多&#xff0c;人们思考将网站的使用运用到生活的方方面面&#xff0c;所以我联想到的是设计一个音乐平台&#xff0c;由于音乐平台的发展以及业务的提升&#xff0c;对音乐平台管理的要求越来越高&#xff0c;而一个稳定的音乐平…

AI人工智能虚拟现实行业发展分析

AI人工智能和虚拟现实是当今科技领域最受关注和研究的两个领域。这两项技术的迅速发展给各行各业带来了巨大的变革和机遇。在过去的几年里&#xff0c;AI和虚拟现实已经取得了显著的进展&#xff0c;并且有着广阔的发展前景。 AI人工智能作为一种模拟人类智能的技术&#xff0…

C#,数值计算,高斯消元法与列主元消元法的源代码及数据动态可视化

高斯消元法&#xff01; 一、高斯消元法 Gaussian Elimination 高斯消元法&#xff08;或译&#xff1a;高斯消去法&#xff09;&#xff0c;是线性代数中的一个常用算法&#xff0c;常用于求解线性方程组和矩阵的逆。 本程序的运行效果&#xff1a; 1、高斯消元法的动画演示…

成功解决使用git clone下载失败的问题: fatal: 过早的文件结束符(EOF) fatal: index-pack 失败

一.使用 http 可能出现的问题和解决 1.问题描述 ~$ git clone https://github.com/oKermorgant/ecn_baxter_vs.git 正克隆到 ecn_baxter_vs... remote: Enumerating objects: 13, done. remote: Counting objects: 100% (13/13), done. remote: Compressing objects: 100% (…

免费分享一套微信小程序扫码点餐(订餐)系统(uni-app+SpringBoot后端+Vue管理端技术实现) ,帅呆了~~

大家好&#xff0c;我是java1234_小锋老师&#xff0c;看到一个不错的微信小程序扫码点餐(订餐)系统(uni-appSpringBoot后端Vue管理端技术实现) &#xff0c;分享下哈。 项目视频演示 【免费】微信小程序扫码点餐(订餐)系统(uni-appSpringBoot后端Vue管理端技术实现) Java毕…

etcd跨主机通信与Flannel

跨主机通信 Docker 默认的网络环境下 , 单台主机上的 Docker 容器可以通过 docker0 网桥直接通信 , 而不同主机上的 Docker 容器之间只能通过在主机上做端口映射进行通信。 这种端口映射方式对很多集群应用来说极不方便。 如果能让 Docker 容器之间直接使用自己的 IP 地址进…

如何通过UMC进行产品升级

随着互联网、云计算技术的深入发展&#xff0c;为降低企业大规模云应用建设的难度和成本&#xff0c;支持云应用开发、运行与运维一体化的云应用平台软件应运而生。在数通家族中对公司集成套件的云平台开发、部署、管理、运维进行统一管理&#xff0c;实现数据集成和共享的平台…

FFmpeg获取音视频流信息

文章目录 前言一、需求二、源码三、运行结果 前言 本文记录用 FFmpeg 获取视频流音频流的信息&#xff08;编码格式、分辨率、帧率、播放时长…&#xff09;&#xff0c;所用的工程基于上个博客编译成功的工程&#xff1a;使用FFmpeg4.3.1的SDK官方开发包编译ffmpeg.c 一、需求…

HTML5网站小游戏源码系统:各种各样小游戏集合,你想要的这里都有+完整的安装代码包以及搭建教程

现如今&#xff0c;科技的不断发展&#xff0c;HTML5技术逐渐成为网页游戏开发的主流。为了满足广大游戏爱好者的需求&#xff0c;罗峰给大家推荐一款基于HTML5的网站小游戏源码系统。这款系统集成了众多经典小游戏&#xff0c;涵盖了各种类型&#xff0c;无论您是寻找休闲益智…

centos7安装ES

1.JDK安装 因为我这里安装的ES版本是7.9.3 因为项目用的1.8的JDK, 7.9.3又兼容1.8&#xff0c;我在这装了1.8的JDK 支持一览表的IP 支持一览表 | Elastic 先将jdk的tar.gz 文件拷入系统 tar -zxvf jdk-8u351-linux-x64.tar.gz 解压压缩包 配置环境变量 vim /etc/profile …

Burp Suite拦截信息或返回数据中文乱码,解决不显示中文

1.点击User options->Display。 2.点击change font&#xff0c;选择宋体。Charater sets选择UTF-8&#xff08;如果还是乱码&#xff0c;看一下请求或响应字符集 charserxxx&#xff09;。

美信科技盘古信息智能车间项目成功验收,打造电子元器件数字化工厂标杆

作为一家深耕于磁性元器件领域近二十年的制造企业&#xff0c;广东美信科技股份有限公司&#xff08;以下简称“美信科技”&#xff09;始终秉承着“为电磁赋能&#xff0c;创工业至美”的企业使命&#xff0c;为中国制造卓越发展贡献力量。在当今数字化时代&#xff0c;制造企…

orangepi 4lts 无线网卡wlan0隔几个小时自动掉线解决

发现问题&#xff1a;最近使用orangepi 4lts有线(内网&#xff09;和无线&#xff08;外网&#xff09;&#xff0c;同时连接&#xff0c;无线都是隔半天就掉线&#xff0c;不能自动重连 无线网卡关闭节能模式 1、查看无线网卡的运行状态 sudo iwconfig wlan0 状态说明&…

063:vue中一维数组与三维数组联动,类似购物车增减

第063个 查看专栏目录: VUE ------ element UI javascript 一维数组与三维数组联动,一维数组转换为三为数组,源文件下载 .zip 专栏目标 在vue和element UI联合技术栈的操控下,本专栏提供行之有效的源代码示例和信息点介绍,做到灵活运用。 (1)提供vue2的一些基本操作:安…

常见的http状态码及其含义,以及状态码的分类

常见状态码及其含义&#xff1a; 状态码分类&#xff1a; HTTP状态码由三个十进制数字组成&#xff0c;第一个十进制数字定义了状态码的类型&#xff0c;后两个数字没有分类的作用。HTTP状态码共分为5种类型&#xff1a; 200&#xff1a;表示请求成功&#xff0c;服务器响应正…

适用于 Windows 的 4 个最佳免费数据恢复软件

计算机最重要的是用户数据。除了您的数据之外&#xff0c;关于计算机的其他一切都是可替换的。这三个是数据丢失的最常见原因&#xff1a; 文件/文件夹删除 丢失分区 损坏的分区 文件/文件夹删除是最常见的数据丢失类型。大多数时候&#xff0c;由于不小心删除文件/文件夹而…