记一次vue“抽奖项目” -- 遇到的问题以及源码分享

GitHub源码: https://github.com/hannah-bingo/Myproject_lottery,直达可还行?
Gitee源码: https://gitee.com/two-two-two/myproject_lottery,再去看看去

前言:

  1. 前端项目放在了公网上:[抽奖活动] (http://yiyaobingo.3vkj.net/lottery/index.html#/)
  2. 目前后端提供的网址仅限局域网内访问,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文件,封装所有接口

项目调用两个接口

  1. 调用接口一的函数: get(), 在lottery-algorithm.js文件中使用接口给出的数据展示在随后弹出的卡片中

    异步的解决: 提前调用一次函数,getid第一次不为undefined即可,随后虽然请求数据会异步,但也不影响

  2. 调用接口二的函数: 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(文件中没有给出默认指示)。

关于页面讲解的补充:

  1. 奖品是由前端自己写好的json数据,从而渲染的页面
  2. 后端负责处理抽到奖品的概率问题(这随机数他不香嘛?非得搞到你听不懂后端在玩啥)
    在这里插入图片描述



写在最后,我随后问问后端的那位xd愿不愿意给我一个公网的接口,这样就能见识到项目的全貌了!当然,如果人家不原意,那我也只能:请添加图片描述

  • 1
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 3
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值