# red-envelope

**Repository Path**: inkgn/red-envelope

## Basic Information

- **Project Name**: red-envelope
- **Description**: 一款QQ风格界面，H5答题红包程序
- **Primary Language**: JavaScript
- **License**: MIT
- **Default Branch**: master
- **Homepage**: http://119.3.62.20:8083/
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2021-03-27
- **Last Updated**: 2022-06-18

## Categories & Tags

**Categories**: Uncategorized

**Tags**: Vue, Vuex, Axios, vue-router, CSS3

## README


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


## 想法与创意

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

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

----

## 技术栈
- Vue全家桶
- axios
- Sass
- mockjs
- FrozenUI


## 页面及功能介绍

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

##### 首页&个人中心

![图片](https://gzh-1253246719.cos.ap-chengdu.myqcloud.com/envelope%2F2)

----
##### 红包发布&红包删除

![图片](https://gzh-1253246719.cos.ap-chengdu.myqcloud.com/envelope%2F4)
----
##### 红包界面&答题页面

![图片](https://gzh-1253246719.cos.ap-chengdu.myqcloud.com/envelope%2F3)

----
##### 答题成功&答题失败

![图片](https://gzh-1253246719.cos.ap-chengdu.myqcloud.com/envelope%2F1)


## 注意事项

### 后端API
使用mockjs始终不是正途，于是尝试自己写API接口，后端是我用PHP写的，因为不是很了解，所以写的比较简单，如果需要使用建议自行对后端进行安全限制
> 下载地址： [红包API后台系统](https://gitee.com/inkgn/envelope_-api)

### 运行环境

- php5.6+

- Apache2.4.48

- MySQL5.6

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

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


### Apache
```js
// .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

```js
// nginx

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

```

### Vue history模式下nginx

```js
// 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
```