# ByteDanceTask

**Repository Path**: anecdotes_0_admin/ByteDanceTask

## Basic Information

- **Project Name**: ByteDanceTask
- **Description**: 节前端青训营大作业（仿掘金抽奖系统）

​ vite + vue3 + ElementPlus 仿写掘金抽奖系统
- **Primary Language**: JavaScript
- **License**: MulanPSL-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 2
- **Forks**: 0
- **Created**: 2023-01-29
- **Last Updated**: 2024-09-28

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# ByteDanceTask

### 字节前端青训营大作业（仿掘金抽奖系统）

​	**vite + vue3  + ElementPlus 仿写掘金抽奖系统**

### v  1.0.0

- [x] 手工设置奖品池
- [x] 每个奖品的中奖概率
- [x] 起始矿石数和每次消耗矿石数
- [x] 给出中奖结果
- [x] 显示中奖品列表

#### 安装与使用

```
git clone git@github.com:changlin2569/ByteDanceTask.git

cd ./juejin_luck

npm install

npm run dev

```

#### 设置奖品池与中奖概率

**在src/utils/prizeList.js文件中**

##### 修改奖池

```
修改上述文件中数组中的元素，注意不要修改id！！！
```



##### 中奖概率修改

```
修改上述文件数组中的对应的probability属性，支持0-100之间的数，代表其中奖的概率为百分之XX
```



#### 每次抽奖矿石数

```
在src/utils/prizeList.js文件中找到 id 为 8 的元素，修改其price属性值(代表每次抽奖所消耗的矿石数量)
```



#### 起始矿石数

```
目前第一版其实矿石数是写死的（400），修改src/components/LuckDraw/LuckDraw/.vue文件中的count值

后期会进行起始矿石数的改进
```

### v 2.0.0

- [x] 服务端实现奖池
- [x] 奖池配置，单价修改，获取抽抽奖结果，获取矿石数等接口
- [x] 前端手写axios实现网络请求
- [x] 自定义hooks实现获取奖池等数据

#### 安装与使用（服务端）

```
cd ./luck_server

npm i

npm run dev
```

#### 更新内容

后端采用egg框架，编写整个抽奖接口，分别是

- 获取奖池列表
- 修改奖池
- 修改单价
- 获取抽奖结果
- 获取矿石数

**由于没有用数据库，所以所有的数据都是以私有变量的形式暴露，后期会进行改进**

### v 2.1.0

更新内容

- 引入MySQL数据库，建立奖池表
- 后端重写调取接口方法以对接数据库
- 解决抽奖按钮重复点击问题
- 解决获取抽奖列表不按顺序排列问题
- react+antd实现抽奖管理系统模板（未完成）

### v 2.2.0

更新内容

- 完善后台管理系统
- 实现奖池奖品修改
- 价格修改

*写到最后发现自己仿写的axios有点问题，所以换了官方原装的，后期我会进行改进*

使用（后台管理系统）

```
cd ./luck_manage

npm i

npm start
```

**请提前打开服务器**



**项目是赶制出来的，有很多不足的地方，望多多包涵谢谢(　o=^•ェ•)o　┏━┓**