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

本文主要是介绍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账号。https://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; // 投票IDprivate 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 {@Autowiredprivate VoteMapper voteMapper;}

新建IVoteItemServiceImpl：

@Service("voteItemService")
public class IVoteItemServiceImpl extends ServiceImpl<VoteItemMapper, VoteItem> implements IVoteItemService {@Autowiredprivate 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:"投票发起成功!"})}
}

这篇关于uniapp微信小程序投票系统实战 (SpringBoot2+vue3.2+element plus ) -投票创建后端实现的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---