后端开发提速50%,SoybeanAdmin + cpolar让你的后台搭建如同搭积木般简单

AgenticAI·十月创作之星挑战赛 10w+人浏览 1k人参与

前言

SoybeanAdmin作为一款基于Vue3和TypeScript的后台管理系统,核心优势在于其模块化设计与低代码开发模式。它内置40+常用组件(表格、表单、图表等),支持主题动态切换和响应式布局,能帮助开发者跳过重复的UI搭建工作,直接聚焦业务逻辑。无论是创业公司快速迭代产品后台,还是企业内部系统开发,这款工具都能显著降低开发门槛——甚至非专业前端也能通过其可视化配置生成基础界面。

然而在传统开发流程中,本地部署的后台系统只能在局域网内访问,导致客户演示需额外部署测试环境,团队协作则依赖代码提交记录。这种模式不仅延长项目周期,还可能因环境差异引发兼容性问题。某外包团队反馈,使用SoybeanAdmin后开发效率提升40%,但远程协作仍存在瓶颈,直到接入cpolar内网穿透服务。

通过cpolar生成的公网地址,开发者可实时将本地开发环境暴露给客户和测试团队。例如在需求评审会上,客户提出修改意见后,开发者现场调整组件布局,客户通过手机即可查看更新效果,整个过程比传统流程节省2小时沟通成本。对于分布式团队,这种实时协作模式更是将联调效率提升3倍以上。

1、关于 SoybeanAdmin

SoybeanAdmin 是一款集优雅、高效与一身的后台管理系统。它基于 Vue3, Vite5, TypeScript, Pinia 和 UnoCSS 构建,不仅拥有前沿的技术栈,还内置了丰富的主题配置和组件,让你轻松应对各种需求变化。

独特之处:

  • 技术前沿:采用最新的前端技术栈。
  • 架构清晰:使用 pnpm monorepo 架构,结构优雅易懂。
  • 代码规范:集成eslint, prettier 和 simple-git-hooks,保证代码质量。
  • 类型检查:支持严格的 TypeScript 类型检查。
  • 多主题配置:内置多种主题风格,与 UnoCSS 完美结合。
  • 国际化方案:轻松实现多语言支持。
  • 自动化路由系统:自动生成路由导入、声明和类型。
  • 权限管理:灵活的前端静态路由和后端动态路由。
  • 丰富组件:内置403、404、500页面,以及布局组件、标签组件等。
  • 命令行工具:高效的 git 提交、删除文件、发布等操作。
  • 移动端适配:完美支持移动端自适应布局。

2、本地部署SoybeanAdmin步骤

需要准备好git、node.js、pnpm

打开命令行先克隆项目

git clone https://github.com/soybeanjs/soybean-admin.git

image-20250623175634559

接着输入这行命令更换样例版分支

git checkout example

image-20250623175643861

进入到项目目录中,继续安装依赖

pnpm i

image-20250623175711550

最后启动项目,启动后会自动打开浏览器

pnpm dev

image-20250623175722978

就能看到SoybeanAdmin的登录界面了,

image-20250623175738648

3、简单使用SoybeanAdmin

登录进去后能看到界面很美观,右侧可以配置主题,

image-20250623175749995

左侧还有各种各样的设置,比如标签页、异常页、各种插件等等

image-20250623175811866

现在你就可以在本地去开发你的后台管理系统了,但在开发之前,先要把后台样式效果发给客户确认一下。

我会使用cpolar把本地部署的服务发布到公网,把公网地址发给用户!你肯定会问,为什么不直接发截图呢?发截图肯定没有实时动态操作的后台模版更有冲击力呀!

4、安装cpolar内网穿透

访问cpolar官网: https://www.cpolar.com 点击免费使用注册一个账号,并下载最新版本的Cpolar。

img

登录成功后,点击下载Cpolar到本地并安装(一路默认安装即可)本教程选择下载Windows版本。

image-20240319175308664

Cpolar安装成功后,在浏览器上访问http://localhost:9200,使用cpolar账号登录,登录后即可看到Cpolar web 配置界面,结下来在web 管理界面配置即可。

img

5、配置公网地址

登录cpolar web UI管理界面后,点击左侧仪表盘的隧道管理——创建隧道:

  • 隧道名称:可自定义,本例使用了:soybean,注意不要与已有的隧道名称重复
  • 协议:http
  • 本地地址:9527
  • 域名类型:随机域名
  • 地区:选择China Top
  • 点击高级:选择host头域,填写IP地址+端口号:localhost:9527

点击创建:

image-20250624094124932

创建成功后,打开左侧在线隧道列表,可以看到刚刚通过创建隧道生成了两个公网地址,接下来就可以在其他电脑或者移动端设备(异地)上,使用任意一个地址在浏览器中访问即可。

image-20250624093704759

我们随意复制一个打开,能看到我们成功打开了soybeanadmin的页面

image-20250624093748494

小结

为了方便演示,我们在上边的操作过程中使用cpolar生成的HTTP公网地址隧道,其公网地址是随机生成的。这种随机地址的优势在于建立速度快,可以立即使用。然而,它的缺点是网址是随机生成,这个地址在24小时内会发生随机变化,更适合于临时使用。

如果有长期使用SoybeanAdmin,或者异地访问与使用其他本地部署的服务的需求,但又不想每天重新配置公网地址,还想让公网地址好看又好记并体验更多功能与更快的带宽,那我推荐大家选择使用固定的二级子域名方式来配置公网地址。

6、配置固定二级子域名公网地址

使用cpolar为其配置二级子域名,该地址为固定地址,不会随机变化。

注意需要将cpolar套餐升级至基础套餐或以上,且每个套餐对应的带宽不一样。【cpolar.cn已备案】

点击左侧的预留,选择保留二级子域名,地区选择china top,然后设置一个二级子域名名称,我这里演示使用的是soybean,大家可以自定义。填写备注信息,点击保留。

image-20250624093932200

保留成功后复制保留的二级子域名地址:

image-20250624093952734

登录cpolar web UI管理界面,点击左侧仪表盘的隧道管理——隧道列表,找到所要配置的隧道soybeanadmin,点击右侧的编辑

image-20250624094207410

修改隧道信息,将保留成功的二级子域名配置到隧道中

  • 域名类型:选择二级子域名
  • Sub Domain:填写保留成功的二级子域名
  • 地区: China Top

点击更新

image-20250624094225032

更新完成后,打开在线隧道列表,此时可以看到随机的公网地址已经发生变化,地址名称也变成了保留和固定的二级子域名名称。

image-20250624094313612

总结:

是不是超级简单?只需要几条命令,你就拥有了一个功能强大、高颜值的后台管理系统。

而且,它的代码规范非常严格,集成了多种开发工具和插件,让你的开发工作更加高效

以上就是如何在本地windows系统快速部署soybeanadmin,并安装cpolar内网穿透工具配置固定不变的二级子域名公网地址,实现随时随地远程访问的全过程,感谢您的观看,有任何问题欢迎留言交流。

结语

低代码开发+远程协作,SoybeanAdmin重新定义后台搭建效率!从本地开发到远程演示,全流程无缝衔接,项目交付周期缩短60%,客户满意度显著提升。

cpolar官网-安全的内网穿透工具 | 无需公网ip | 远程访问 | 搭建网站

评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

程思扬

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值