锋哥原创的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 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 {
}
新建VoteItemMapper:
/**
* 投票选项Mapper接口
*/
public interface VoteItemMapper extends BaseMapper {
}
新建IVoteService:
/**
* 投票Service接口
*/
public interface IVoteService extends IService {
}
新建IVoteItemService:
/**
* 投票选项Service接口
*/
public interface IVoteItemService extends IService {
}
新建IVoteServiceImpl:
@Service("voteService")
public class IVoteServiceImpl extends ServiceImpl implements IVoteService {
@Autowired
private VoteMapper voteMapper;
}
新建IVoteItemServiceImpl:
@Service("voteItemService")
public class IVoteItemServiceImpl extends ServiceImpl 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 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:"投票发起成功!"
})
}
}