【青训营】- 抽奖小Demo 实现技术分析

相关链接

云函数列表

luoming（luoming） / 抽奖 - 轻服务 (qingfuwu.cn)

仓库地址

llhongwei/LuckyDraw (github.com)

线上地址

抽奖小Demo

项目亮点

• 后端接口全部使用由轻服务提供的云函数
• 使用由轻服务提供的数据库进行数据管理
• 提供奖池管理和奖品配置的后台
• 项目使用 Vue + Router + axios 技术
• 使用有轻服务提供的页面托管功能

数据库分析

本项目使用了亖张表：

1. lotteryItem 存储奖品信息，具有如下字段：

   lotteryItem
   id:Number	id
   name:String	物品名称
   weight:Number	权重
   enable:Bollean	是否启用

2. lotteryConfig 存储抽奖配置，具有如下字段：

   lotteryConfig
   costOre:Number	单次抽奖花费

3. user 存储用户信息，具有如下字段：

   user
   username:String	用户名
   passwordHash:String	密码哈希值
   oreNum:Number	用户矿石数量

4. file 存储奖品图片，具有如下字段：

   file
   name:String	图片名称
   size:Number	图片大小
   url:String	URL地址

云函数分析

围绕数据表以及功能需求，我们配置了 11 个云函数，并在命名上做到了见名知意，具体代码可在这里查看

前端代码分析

1. 使用了 Vue 单文件组件，并利用 Router 进行导航
2. 页面由 Header 导航以及 <router-view/> 组成
3. 在登录的前提下，出现奖品配置按钮，可以使用 v-if 指令实现
4. 将 axios 封装，使用时只需要从 api.js 导入相应函数即可，提高代码利用率

不足：

1. 前后代码风格稍有不一致，最开始不是很熟练写了一些笨办法
2. 纯函数较少，函数副作用多，维护难度增加

页面部署

使用 build 脚本，生成 dist 文件夹，压缩成 zip 格式，丢到 轻服务 页面托管中即可

经过如上傻瓜式操作后我们点几个确定，轻服务就会自动分配一个可访问的 HTTPS 独立域名给你。