实现一个在线抽奖系统,就算是个小白看了也能做出来(附源码)

该博客详细介绍了如何设计并实现一个在线抽奖系统,包括用户注册登录、奖项设置、抽奖人员管理、抽奖功能等功能。使用的技术栈包括Spring、SpringBoot、Mybatis等。此外,还涉及了数据库设计、前后端接口实现、会话管理、异常处理和代码设计等方面,提供了完整的代码源码链接。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

1、项目介绍:

(1)功能介绍:

主要业务:为公司活动(如年会等)提供在线抽奖功能,满足奖品、抽奖人员的管理,及抽奖活动的需要。

  • 用户注册
  • 用户登录、会话管理
  • 抽奖设置:奖品管理,抽奖人员管理
  • 人员抽奖

(2)开发环境与技术栈:

  • windows
  • Maven
  • Lombok
  • Spring、SpringMVC、SpringBoot
  • MySQL、Mybatis、Druid

(3)项目演示:

用户登录:

在这里插入图片描述

用户注册:

在这里插入图片描述

奖项设置:

在这里插入图片描述

抽奖人员设置:

在这里插入图片描述

抽奖:

在这里插入图片描述

2、项目准备:

(1)代码框架:(源码)

在这里插入图片描述

全部代码源码 Github链接:

https://github.com/JACK-QBS/Project

(2)数据库设计:

数据库表关系图:
在这里插入图片描述
(业务上一对一)

为什么要有设置表?

  • 1对1关联的表,其实可以只使用1张表保存所有字段;但是在一些可能出现的业务扩展,方便系统扩展使用,所以设计表时,考虑1对1设计。
  • 拓展业务 ,一个用户进来设置,当多个用户进来设置的时候(多个用户属于同一公司),如果是只有用户表的话,及无法支撑业务,用户表关联公司,设置表在关联公司

3、后端对前端接口的实现:

要实现功能,需要先明确前后端约定好的接口。需要说明的是,接口的定义一般是前后端约定好的,所以也和前端代码息息相关,前端需要什么数据,需要什么格式的数据,也会在接口中体现。

接口主要体现在:

  • 请求需要的信息:请求方法,请求路径,请求数据
  • 响应数据

(1)用户的登录、注册、注销

用户登录:

在这里插入图片描述

前端请求:

POST api/user/login (请求路径)
Content-Type: application/json
{username: “qbs”, password: “123”}

响应:

{ “success” : true }

后端实现接口:

在这里插入图片描述

用户注册:

在这里插入图片描述

前端请求:

POST api/user/register (请求路径)
Content-Type: multipart/form-data; boundary=----
WebKitFormBoundarypOUwkGIMUyL0aOZT

username: qbs
password: 123
nickname: 帅哥
email: 666@163.com
age: 18
headFile: (binary)

响应:

{ “success” : true }

后端实现:

在这里插入图片描述

用户注销:

在这里插入图片描述

前端请求:

POST api/user/login (请求路径)

后端实现:

在这里插入图片描述

(2)查询奖项设置、修改抽奖人数:

查询奖项设置:

在这里插入图片描述
前端请求:

GET api/setting/query(请求路径)

后端实现:

在这里插入图片描述

修改抽奖人数:

在这里插入图片描述

前端请求:

GET api/setting/update?batchNumber=5(请求路径)
(接口对应抽奖设置页面中,点每次抽奖人数下拉菜单切换时修改)

后端实现:
在这里插入图片描述

(3)新增、修改、删除奖项:

在这里插入图片描述

新增奖项:

前端请求:

POST api/award/add (请求路径)
Content-Type: application/json

{name: “特等奖”, count: 1, award: “全球旅行7日游”}

后端实现:

在这里插入图片描述

修改奖项:

前端请求:

POST api/award/update (请求路径)
Content-Type: application/json

后端响应:
在这里插入图片描述

删除奖项:

前端请求:

GET api/award/delete/4(请求路径)

最后的数字4,对应奖项的id

后端实现:

在这里插入图片描述

(4)新增、修改、删除抽奖人员:

在这里插入图片描述

新增抽奖人员:

前端请求:

POST api/member/add (请求路径)
Content-Type: application/json

后端实现:

在这里插入图片描述

修改抽奖人员

前端请求:

POST api/member/update
Content-Type: application/json

后端实现:
在这里插入图片描述

删除抽奖人员

前端请求:

GET api/member/delete/97
(最后的数字为抽奖人员的id)

后端实现:
在这里插入图片描述

(5)抽奖、删除获奖人员:

抽奖:

在这里插入图片描述
前端请求:

POST api/record/add/3
Content-Type: application/json
(以上路径中最后的数字代表奖项id,请求数据为抽奖人员id组成的数组)

后端实现:

抽奖后端只是插入记录(人员id、奖项id),具体的抽奖是前端实现的,而且也是简单的实现方式,没有任何算法。(只是在当前奖项剩余名额中,每次抽奖人数,在所有未中奖的人员列表中,随机抽取)

评论 64
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值