Skip to content

aa1049372051/webstack-vue-supabase

Repository files navigation

借鉴WebStack-vue

webstack

Project setup

yarn install

Compiles and hot-reloads for development

yarn serve

Compiles and minifies for production

yarn build

Lints and fixes files

yarn lint

vue2+supabase 实现网址导航,不需要服务器也能做支持管理的的导航网站,可在管理台添加更新导航数据

前端使用vue2+element-ui+supabase实现

可以将其部署到github page 或者vercel

本项目使用github page,每次push后自动更新

image

image

第一步

supabase官网注册账号,可以使用github账号登录,然后新建项目,复制项目url和service_role(不是anon,本来操作表anon是可以的,但是anon不能操作仓库)替换src/config.js中的

QQ截图20240508173702

image

image

image

第二步

复制sql/webstack-vue.sql中的内容到supabase完成表的创建

image

后台管理台默认用户名:admin,密码:123456

第三步

新建存储仓库用于保存网站logo,公共的,仓库名默认 webstack-vue ,可以在config.js中修改;

image

image

修改完成后yarn build就能得到编译好的代码,在dist目录,可以放在自己的服务器,也可以放在github page或vercel里面

第四步

大家可以fork我的项目,我写了脚本,每次push到主版本后github actions会自动编译并把编译好的内容提交的github pages中,大家可以去设置中找到page访问地址。 image

github actions脚本里面定义了一个变量PERSONAL_ACCESS_TOKEN,是github token,用于有权限将编译好的内容提交到分支中

github token设置方法,点击右上角图像=>settings=>打开的新页面=》Developer Settings=》Fine-grained tokens=》Generate new token 或者直接访问token设置地址 tokens image

image

填写token名称,选择有效期(token过期后自动更新脚本就会失效);仓库随便你选,但至少要包含你fork的仓库,权限这里都给可读可写最好,我没有一个个试,只要你不把token给别人就没问题,最后点生成 页面会生成一个token给你;复制 image

设置Actions secrets and variables 新建名为 PERSONAL_ACCESS_TOKE 的变量,值就是上一步新建的token image

如果你担心第一步supabase的url和key直接写在代码中不安全,也可以再新建两个变量 SUPABASE_URL 和 SUPABASE_KEY

image

一切完成后每次push到主版本就会自动更新了

第五步

在管理台=》我的里面还添加了添加测试数据的功能;数据来源是src/assets/data.json; 分类表的icon就是从data.json中取的,网站的logo也有; 大家可以直接修改data.json文件然后在管理台初始化数据

image

第六步

坑爹,跑了几天发现,supabase会将七天内不活动的project给暂停,必须去官网手动恢复(免费项目会被暂停,购买pro可以不担心被暂停),恢复后url和key就会更新 所以我单独写了一个js文件,访问数据库,把它放在服务器中用定时任务每天跑一次 cron/supabase.js

  • 1.安装依赖
  • npm install @supabase/supabase-js
  • 2.更新自己的url和key
  • 3.node supabase.js
  • 4.添加定时任务每天跑一次 我是在linux里面跑的 0 4 * * * node /projects/node-pro/cron-supabase/supabase.js

About

可后台管理的webstack,不需要搭建服务器环境

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published