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投票类:

java 复制代码

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投票选项类：

java 复制代码

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投票表：

sql 复制代码

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投票选项表：

sql 复制代码

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

新建VoteMapper：

java 复制代码

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

新建VoteItemMapper：

java 复制代码

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

}

新建IVoteService：

java 复制代码

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

新建IVoteItemService：

java 复制代码

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

}

新建IVoteServiceImpl：

java 复制代码

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

    @Autowired
    private VoteMapper voteMapper;

}

新建IVoteItemServiceImpl：

java 复制代码

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

    @Autowired
    private VoteItemMapper voteItemMapper;
    
}

VoteController添加add方法:

java 复制代码

/**
 * 添加投票
 * @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();
}

前端验证以及提交：

javascript 复制代码

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:"投票发起成功!"
        })
    }
}