锋哥原创的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:"投票发起成功!"})}
}