空痕博客 - 编程技术分享

全新任务管理平台(流量主变现系统)开源

KongHen02
10月9日发布 /正在检测是否收录...

项目简介

项目结构

  1. 接口管理:PHP + Mysql
  2. 后台管理系统:Vue3 + ts + TDesign
  3. 任务单页:Vue3
  4. 小程序:uniapp + Vue2

变现说明

  1. 基础流程:
  • 后台创建任务
  • 复制任务链接
  • 分享到社群或私域
  • 用户打开任务页面
  • 跳转到小程序观看广告
  • 观看广告
  • 下发奖励
  1. 收入说明
  • 微信小程序官方广告收入
  • 其他推广/广告收入

系统演示

演示站点

空痕任务管理系统

后台数据为静态演示数据,无法更改

演示图片

  1. 管理后台

控制台

  1. 任务单页

任务单页

  1. 小程序

小程序

安装教程

管理后台

  1. 安装依赖
npm install
  1. 构建项目
npm run build
  1. 新建站网站及数据库
  • 推荐:PHP 8.0
  • 推荐:Mysql 5.7
  • 开启SSL(必须)
  • 配置伪静态

    location / {
      try_files $uri $uri/ /index.html;
    }
    
    location /api/ {
      if (!-e $request_filename) {
          rewrite ^/(.*)$ /$1.php last;
      }
    }
  • 配置跨域

配置跨域教程 请参考第1种解决方法

  1. 导入数据库
  • 导入/后台/数据库/task_dev_xma_run.sql到Mysql数据库
  1. 修改/后台/api/config.php
  • 管理账户密码
  • JWT配置(密钥、过期时间)
  • 数据库配置
  1. 上传后台代码
  • 上传/后台/dist目录中的全部文件到网站根目录
  • 上传/后台/api目录到网站根目录

任务单页

  1. 安装依赖
npm install
  1. 修改/任务单页/src/App.vue中的接口信息
  • 修改后台地址
  • 修改视频教程地址
  1. 构建项目
npm run build
  1. 新建网站
  • 静态网站
  • 开启SSL(必须)
  1. 上传任务单页代码
  • 上传/任务单页/dist目录中的全部文件到网站根目录

小程序

  1. 使用HbuildX打开小程序
  2. manifest.json中获取新AppID
  3. 修改/pages/user/view中的后台地址
  4. 修改/pages/user/work中的二维码
  5. 发行到微信小程序
  6. 在微信开发者工具中上传代码
  7. 登录微信小程序后台配置
  • 配置request合法域名

    https://task.dev.xma.run(更改为自己的后台地址)
    https://www.duitang.com
  • 配置downloadFile合法域名

    https://c-ssl.duitang.com
  • 配置明文scheme拉起此小程序

    pages/user/view;pages/user/work

代搭建/教学

请联系微信:KongHen02

项目地址

GitHub

© 版权声明
THE END
喜欢就支持一下吧
点赞 2 分享 收藏
评论 共4条
取消
  1. 头像
    qwe123
    Windows 7 · QQ Browser

    管理后台安装步骤都操作完了config.php文件就改了数据库信息,后台登录弹消息登录失败,控制台报错Ct {message: 'Request failed with status code 404', name: 'AxiosError', code: 'ERR_BAD_REQUEST',

    回复
    1. 头像
      KongHen02 作者
      Windows 10 · Google Chrome
      @ qwe123

      后台安装有漏掉步骤,对照安装步骤看看自己缺了哪一步

      回复
  2. 头像
    qwe123
    Windows 10 · Google Chrome

    你好单页访问https://xx.com/api/web/的时候会报错cors和405,需要续怎么解决呢

    回复
    1. 头像
      KongHen02 作者
      Windows 10 · Google Chrome
      @ qwe123

      安装教程里有说明

      回复
易航博客