代码拉取完成,页面将自动刷新
早在19年末,这种答题红包程序其实我就已经做过一次了,(详情参考此文:CSS3 制作的春节整蛊红包)当时的想法是通过QQ或微信的面对面红包二维码解码转换成链接,开始时没考虑太多,直接把问题答案设置在前端一个json中了,这就导致一些懂技术的朋友轻易的获得了满分,后面改为了前端设置问题后端请求答案,当正确率达到要求时就可以去领取红包。不过因为时间紧紧迫(技术不行),导致只能做一个简单页面就草草结束了。
那时候就萌生过一个想法想做一个有登录功能,每个人都有发布红包权限的网站,正好最近学习Vue,发现其特性简直就是为我这个想法量身打造的。说干就干,于是就参考QQ界面设计开发了本程序,但天不遂人愿,开发到一半发现QQ面对面红包规则早已经改了,通过后端解码无法访问,不甘心的我后来想到用支付宝口令的方式领取,虽然体验差了点,但至少最核心的功能红包算是保住了。
使用mockjs始终不是正途,于是尝试自己写API接口,后端是我用PHP写的,因为不是很了解,所以写的比较简单,如果需要使用建议自行对后端进行安全限制
下载地址: 红包API后台系统
php5.6+
Apache2.4.48
MySQL5.6
这仅仅是我目前的方案,此项目已做到前后端分离,你可以自行设计
由于Vue单页程序特性,所有页面入口都在index.html下,当我们部署后,会出现子路由及页面刷新404现象,解决办法是将所有路由入口都指向index.html文件,具体配置如下
// .htaccess
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^index\.html$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.html [L]
</IfModule>
// nginx
location / {
try_files $uri $uri/ /index.html;
}
// nginx
//修改前
server {
listen 80;
server_name testwx.wangshibo.com;
root /Data/app/xqsj_wx/dist;
index index.html;
access_log /var/log/testwx.log main;
}
// 修改后
server {
listen 80;
server_name testwx.wangshibo.com;
root /Data/app/xqsj_wx/dist;
index index.html;
access_log /var/log/testwx.log main;
// 从这里开始
location / {
try_files $uri $uri/ @router;
index index.html;
}
location @router {
rewrite ^.*$ /index.html last;
}
}
npm install
npm run serve
npm run build
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。