Skip to content

兔兔答题是一款面向移动端答题的前后端应用程序,可用于考试活动,企业内部考核,内部培训等考试刷题。

  • 前端采用图鸟UI开发,支持编译到多端。支持 微信小程序、公众号H5、APP(存在不完全适配)。

  • 后端采用Go和PHP开发,支持高并发、高性能等业务场景。

  • 管理端采用Element UI、Vue3和TypeScript,为前端等下流行技术栈。

  • 数据库采用MySQL持久化数据存储,Redis作为缓存服务提高系统性能,为当前互联网热门技术栈。

兔兔答题开源答题微信小程序

项目说明

整个项目分为管理端和用户端,管理端采用前后端分离的模式,用户端使用uniapp开发,同样也是前后端分离的模式。

1、管理端后端使用的ThinkPHP6框架提供api服务(PHP要求是8.0的版本),管理端使用Vue3+TypeScript+ElementUI开发。

2、用户端后端使用Golang(1.9x版本)开发,用户端前端使用uniapp+Vue2.x开发。

3、数据库层面使用到了MySQL和Redis。MySQL版本要求不能低于5.7(推荐8.0),Redis版本要求不能低于5.0(推荐使用Redis7.x)。

WARNING

获取代码的方式,你可以点击网站右上角的开源地址clone或者下载源码,根据开发安排,最新的代码转战到内部代码托管平台,可以联系小助理(微信wx_06282)进行获取。

资料准备

要使用程序,并发布到线上,需要准备以下资料:

1、域名:域名根据自己需要注册,进行备案,并解析到服务器IP地址。备案成功之后,需要解析两个域名,一个用于管理端,一个用于接口端。

2、服务器:服务器推荐在2C4G以上,最低不要低于这个配置。

3、SSL证书:SSL证书根据自己需要选择,推荐使用阿里云和腾讯云的免费证书。自己买证书确实蛮贵的,虽然有其他的方式使用免费的,但需要定期维护,挺麻烦的。

4、宝塔:宝塔是用来管理服务器,一键部署程序的,推荐使用宝塔,方便快捷。

5、微信小程序:微信小程序注册之后,需要备案。如果有企业的资质,最好使用企业账号。微信小程序在备案的时候最好别选择教育行业,选择工具类的会好审核一些。

等审核通过之后,在将小程序的运营类目选择为教育。

WARNING

如果看完本手册,还是没有一点思绪,请多看几遍,没有耐心或者实在不能解决,可以请开发者付费部署(为知识付费,是一种非常值得赞赏的行为)。

基础环境

本文部署的文档采用的宝塔搭建,宝塔本身使用也非常简单,可能会省略一些安装步骤(因编写该文档时,没有宝塔应用环境),请自行操作或者通过群反馈。这里就不演示宝塔如何安装环节。通过宝塔的软件商店,安装PHP(8.0)、MySQL(8.0)、Redis(7.0)、Nginx(1.x)。

INFO

记住MySQL的版本最低是5.7的版本,PHP的版本默认是不低于7.4的版本,推荐使用PHP8.0,允许最高版本是8.2版本。

在安装好上述的环境之后,还需要对PHP做一些配置,其他的软件采用默认的即可。在这里需要给PHP安装fileinfo和redis两个扩展。在软件应用商店,找到你安装的PHP服务,点击设置有一个扩展列表,直接点击安装即可。

Go环境安装

Go是作为用户端API的服务,需要你在本地安装Go的环境。Go的版本一定要选择1.9x的版本,不能高于这个版本。宝塔也有安装Go的功能,具体没使用过,不熟悉环境搭建的可以使用宝塔自带的工具安装Go环境。

shell
# 安装wget
yum install -y wget
# 在 ~ 下创建 go 文件夹,并进入 go 文件夹
mkdir /root && cd /root
# 下载的 go 压缩包
wget https://studygolang.com/dl/golang/go1.19.10.darwin-amd64.tar.gz

注意:这里有amd64、arm64,具体看你的操作系统架构去下载。

  • 解压并配置系统环境。
shell
# 解压到/usr/local目录
tar -C /usr/local -zxvf go1.19.10.darwin-amd64.tar.gz
# 重命名文件目录名称
mv go1.19.10.darwin-amd64 go
# 配置系统环境变量
vi /etc/profile
# 在/etc/profile最后一行添加
export GOROOT=/usr/local/go
export PATH=$PATH:$GOROOT/bin
# 重新加载环境变量
source /etc/profile
  • 设置Go代理。默认的代理,安装包会非常的慢,推荐使用下面这个代码。https://goproxy.io/zh/
shell
# 配置 GOPROXY 环境变量
export GOPROXY=https://goproxy.io,direct
  • 安装包,进入user_api目录,使用如下的命令安装包。
shell
cd user_api
go mod tidy
  • 运行程序,当安装包结束之后,并且配置完数据库和Redis等信息。就可以使用下面的名称启动程序。
shell
cd user_api 
go run main

node环境

不管是管理端还是用户端,都会涉及到npm的操作,因此你需要安装node.js环境,node的环境推荐使用16.x的版本,不管是宝塔还是node.js都提供了非常方便的node环境搭建文档,根据你自己的需要选择搭建方式,如果你是用的宝塔,并且会涉及多个版本比较推荐你使用宝塔提供的node安装方式。

项目配置

兔兔答题开源版涉及到多端,后端的服务就有PHP和Go,配置需要注意一些。

管理端配置

管理端api(admin_api)配置,在代码目录下面,创建一个.env文件,下面的内容直接年黏贴进去。

shell
APP_DEBUG = "1"
[APP]
DEFAULT_TIMEZONE = "Asia/Shanghai"
URL=https://api.demo.com/ #这里改成你实际的域名

[DATABASE]
TYPE = "mysql"
HOSTNAME = "127.0.0.1"
DATABASE = "数据库名称"
USERNAME = "数据库账号"
PASSWORD = "数据库密码"
HOSTPORT = "3306"
CHARSET = "utf8"
DEBUG = "1"
PREFIX = "数据库前缀"

[LANG]
default_lang = "zh-cn"

[PROJECT]
UNIQUE_IDENTIFICATION = "64e0"
DEMO_ENV = ""

[Redis] # Redis直接使用默认的就可以了。
REDIS_HOST=127.0.0.1
REDIS_PORT=6379
REDIS_PASSWORD=
REDIS_DB=0

数据库如何创建,就不操作了。直接通过宝塔phpmyadmin创建即可。数据库文件在代码包里面的xxx.sql文件。如果发现不全,可以通过首页联系小助理,获取最新的数据库和代码包。

用户端配置

用户端api(user_api)配置,在代码目录user_api/config/下面,创建一个config.yml文件,下面的内容直接年黏贴进去。

yaml
app:
  mame: "service_middleware"
  host: "127.0.0.1"
  port: 8083 #这里的端口一定要和上面api域名配置的8083保持一致,你也改成其他没有被使用的端口。
  debug: false
  state: true
mongodb: # 这里的信息不用管,目前还没有用到mongodb
  host: "192.168.2.100"
  port: 3306
  user: "root"
  password: "123456"
  db: "exam_sys_log"
mysql: 
  host: "127.0.0.1"
  port: 3306 # 数据库端口,默认MySQL是3306
  user: "root" # 数据库账号
  password: "" # 数据库密码
  db: "" # 数据库名称
redis: # 这里的Redis配置和上面管理端api的配置保持一致即可。
  host: "127.0.0.1"
  port: 6379
  user: ""
  password: ""
  db: 0

自此,部署环境基本就是这样的。有什么问题,可以添加客服微信:wx_06282进行咨询。

域名配置

管理端后端、管理端api和用户端api都需要域名配置,域名解析只需要解析两个就可以了。假设解析的域名为:

shell
admin.demo.com 用作管理端端域名
api.demo.com 用作管理端api和用户端api

API域名配置

1、api.demo.com:用作管理端api和用户端api的域名。

2、配置文件操作,域名配置结束之后,还需要对配置文件做一些修改,主要是解决跨域和支持管理端和用户端调用。将下面的内容添加到站点配置文件。

shell
# 管理端重写
location /adminapi {
    if (!-e $request_filename){
        rewrite  ^(.*)$  /index.php?s=$1  last;   break;
    }
}
# 用户端API
location /api {
  proxy_pass  http://127.0.0.1:8083;
  proxy_set_header  X-Real-IP         $remote_addr;
  proxy_set_header  X-Forwarded-For   $proxy_add_x_forwarded_for;
}

# 开启cookie传输
add_header Access-Control-Allow-Credentials true;
# 允许跨域的域名
add_header Access-Control-Allow-Origin * always;
#允许跨域的方法
add_header Access-Control-Allow-Methods 'GET, POST, PUT, DELETE, OPTIONS';
# 允许跨域的头
add_header Access-Control-Allow-Headers 'DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,
X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Authorization,Version,token';
if ($request_method = 'OPTIONS') {
    return 204;
}

注意这里的127.0.0.1:8083是用户端api的地址,8083是相应的端口号,需要根据实际情况修改。只要和user_api/config/config.yml中的aap.port端口号一致即可。

3、用户端api启动。通过宝塔终端工具,进入到如下截图的目录,然后执行如下命令nohup ./main &。由于go在启动时,会检测MySQL和Redis的可用性,因此需要先配置MySQL和Redis,然后在执行该命令。

管理端域名配置

1、需要在前端代码中复制.env.production.example.env.production,并将里面的域名改成你实际的后端API域名,然后执行npm build打包成正式环境的静态文件。如果是在本地开发,并非线上环境,.env.development.example为.env.development,将里面的域名改成你后端的实际域名,然后执行npm run dev

2、admin.demo.com:用作管理端后端。这里省略掉宝塔添加域名操作流程,注意在添加域名时,根目录指向admin_client即可。添加完域名之后,需要在伪静态中添加一条规则。

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

ssl证书配置

ssl证书上面提到了,可以在哪些平台申请,这里就不多说了。申请通过之后,在宝塔里面配置一下就可以了。

常见问题

  • 问题1: 如果你在运行管理端前端(admin_client)时,遇到这个错误信息:ould not load /Users/tutudati/Desktop/admin_clients_source/src/api/user_member (imported by src/views/user_member/edit.vue?vue&type=script&setup=true&name=userMemberEdit&lang.ts): ENOENT: no such file or directory

这个问题可以尝试将src/views/user_member/文件目录给删除,或者对user_member目录下的两个文件,关于引入了api/user_member的地方都是给注释掉。

javascript
# edit.vue文件,找到下面这行代码给注释掉。

// import { apiUserMemberAdd, apiUserMemberEdit, apiUserMemberDetail } from '@/api/user_member'

# index.vue文件,找到下面这行代码给注释掉。

// import { apiUserMemberLists, apiUserMemberDelete } from '@/api/user_member'
  • 管理端默认密码

在部署好系统之后,默认的超级管理员的账号是:admin,但密码需要你配置一下(这主要是考虑到有的用户在部署时,针对管理端的.env配置不同,所以这里提供一个通用的教程)。

第一步,找到管理端的配置文件,也就是在admin_api/.env文件,确认下面的提到的配置和你的配置是否一样,不一样以下面的配置为准。

shell
[PROJECT]
UNIQUE_IDENTIFICATION="64e0"

第二步,打开你的数据库,找到admin数据表,将该段字符(bbc71ba99c234cedabb5c9f00613c144)修改到password字段中,这时候你用账号admin和密码123456就可以登录了。