克隆/下载
贡献代码
同步代码
取消
提示: 由于 Git 不支持空文件夾,创建文件夹后会生成空的 .keep 文件
Loading...
README
MIT

一款QQ风格界面,H5答题红包程序

想法与创意

早在19年末,这种答题红包程序其实我就已经做过一次了,(详情参考此文:CSS3 制作的春节整蛊红包)当时的想法是通过QQ或微信的面对面红包二维码解码转换成链接,开始时没考虑太多,直接把问题答案设置在前端一个json中了,这就导致一些懂技术的朋友轻易的获得了满分,后面改为了前端设置问题后端请求答案,当正确率达到要求时就可以去领取红包。不过因为时间紧紧迫(技术不行),导致只能做一个简单页面就草草结束了。

那时候就萌生过一个想法想做一个有登录功能,每个人都有发布红包权限的网站,正好最近学习Vue,发现其特性简直就是为我这个想法量身打造的。说干就干,于是就参考QQ界面设计开发了本程序,但天不遂人愿,开发到一半发现QQ面对面红包规则早已经改了,通过后端解码无法访问,不甘心的我后来想到用支付宝口令的方式领取,虽然体验差了点,但至少最核心的功能红包算是保住了。


技术栈

  • Vue全家桶
  • axios
  • Sass
  • mockjs
  • FrozenUI

页面及功能介绍

  • 首页红包大厅
  • 个人信息
  • 红包展示
  • 红包详情
  • 红包领取
  • 答题分数
  • 红包发布
  • 红包删除
  • 用户登录
  • 用户全屏

UI界面

首页&个人中心

图片


红包发布&红包删除

图片

红包界面&答题页面

图片


答题成功&答题失败

图片

注意事项

后端API

使用mockjs始终不是正途,于是尝试自己写API接口,后端是我用PHP写的,因为不是很了解,所以写的比较简单,如果需要使用建议自行对后端进行安全限制

下载地址: 红包API后台系统

运行环境

  • php5.6+

  • Apache2.4.48

  • MySQL5.6

这仅仅是我目前的方案,此项目已做到前后端分离,你可以自行设计

部署上线

由于Vue单页程序特性,所有页面入口都在index.html下,当我们部署后,会出现子路由及页面刷新404现象,解决办法是将所有路由入口都指向index.html文件,具体配置如下

Apache

// .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

// nginx

location / {
  try_files $uri $uri/ /index.html;
}

Vue history模式下nginx

// 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
MIT License Copyright (c) 2021 yinks Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

简介

一款QQ风格界面,H5答题红包程序 展开 收起
JavaScript 等 4 种语言
MIT
取消

发行版

暂无发行版

贡献者

全部

近期动态

不能加载更多了
马建仓 AI 助手
尝试更多
代码解读
代码找茬
代码优化