GitHub源码: https://github.com/hannah-bingo/Myproject_lottery,直达可还行？
Gitee源码： https://gitee.com/two-two-two/myproject_lottery,再去看看去
前言：
- 前端项目放在了公网上：[抽奖活动] (http://yiyaobingo.3vkj.net/lottery/index.html#/)
- 目前后端提供的网址仅限局域网内访问，so源码最重要，大家看到的只是前端获取到undefined之后的保底机制，从第一张抽取到最后一张（样式还是很炫酷的！！！）
插一句： 关于免费域名的领取，直达click here ： 拥有免费域名，放置小小项目，欢迎点赞关注多多交流哦！
一、 准备工作以及页面相关文件讲解：
1、 开启项目前的准备工作：
- 执行
npm install安装包管理 - 执行
npm run serve运行项目
2、相关文件的说明：
lottery.vue为根组件views/lottery文件夹下放置页面的可视区 以及 球体旋转的js动画，页面的样式等- 请求后端数据的文件放置在
plugins下
二、 抽奖活动的进行【害怕网址之后失效，先贴上图片】
1、 打开页面点击“开始抽奖”， 触发lotteryStart事件，开启旋转动画
2、 点击“停止”，动画结束，接收后端数据弹出相应卡片（项目中的网址仅是局域网址，朋友们接收到的数据将会是undefined，触发保底机制）；
3、 点击“点击此处展示奖项”，由球状展示为“table”状态。
三、 遇到的较大的问题以及解决方案：
1、本次使用的是vueCli集成axios插件
Axios 是一个基于promise的HTTP库，可以用在浏览器和node.js中，先贴一下axios的官网
第一次完全实现前后端对接，调用后台的数据还是相当激动的！遇到的问题也是相当多的呀！
-
第一步： 控制台输入
vue add axios- 出现
vue : 无法加载文件 D:\nodejs\node_global\vue.ps1，因为在此系统上禁止运行脚本 win+x后点击：
- 打开PowerShell之后输入
set-ExecutionPolicy RemoteSigned,下一步选y -----------------> 输入get-ExecutionPolicy,状态变为RemoteSigned即可
- 出现
-
第二步：src下多了plugins文件夹
- 对照axios.js文件进行相应的修改，将后端的网址封装在axios.js文件中；
- 该文件夹下新建一个api.js文件，封装所有接口
项目调用两个接口
-
调用接口一的函数：
get()， 在lottery-algorithm.js文件中使用接口给出的数据展示在随后弹出的卡片中异步的解决： 提前调用一次函数，getid第一次不为undefined即可，随后虽然请求数据会异步，但也不影响
-
调用接口二的函数：
get3(), 在刷新页面的时候向后端请求，由后台来强刷json数据，减少页面的展示数据
2、跨域请求:
- 将
axios.js文件中的withCredentials: false, // Check cross-site Access-Control改成false即可
3、异步:
前面提到的解决的异步问题就不说了。一定要学好ES
3d-card-element.js中获取后端返回的剩余卡片的数据持续空数组- 回调函数处理后页面瞬间混乱
三、关于部署上服务器：
1.、 执行npm run build进行项目的打包，生成dist文件，将该文件进行相应的部署即可【没有服务器的小可爱可以试试辣个方法，在上面哦】
2、 在打包上线第二个项目之后，我指出个小问题哈！
- 记得将
vue.config.js文件路径改成./,如下：
- 步骤都正确，但就是无法显示，记得在自己的域名后面加上
/index.html（文件中没有给出默认指示）。
关于页面讲解的补充：
- 奖品是由前端自己写好的json数据，从而渲染的页面
- 后端负责处理抽到奖品的概率问题（这随机数他不香嘛？非得搞到你听不懂后端在玩啥）
写在最后，我随后问问后端的那位xd愿不愿意给我一个公网的接口，这样就能见识到项目的全貌了！当然，如果人家不原意，那我也只能：