news 2026/5/3 16:21:25

告别重复造轮子!SoybeanAdmin+cpolar 让后台开发效率翻倍

作者头像

张小明

前端开发工程师

1.2k 24
文章封面图
告别重复造轮子!SoybeanAdmin+cpolar 让后台开发效率翻倍

SoybeanAdmin 作为开箱即用的后台管理模板,适配 Windows、macOS、Linux 等开发环境,兼容所有现代浏览器,核心搭载 TypeScript、Vue3 等技术栈,模块化的设计能适配企业级后台开发、小型项目管理系统搭建等多种场景,对前端开发人员而言,其统一的代码规范和内置 UI 组件库,能大幅减少重复编码工作,即使是新手也能快速上手搭建规范的管理界面,这是它最核心的优势。

实际使用中发现,SoybeanAdmin 虽然上手快,但首次部署时需确保 git、node.js、pnpm 等环境版本匹配,否则易出现依赖安装失败的情况,且移动端自适应虽能快速配置,却需根据实际业务调整样式,避免适配后界面元素错位,这些细节需要开发者提前留意。

仅在局域网内使用 SoybeanAdmin 时,会遇到诸多不便:比如异地团队协作时,设计师无法实时查看后台界面效果,只能靠截图沟通;给客户演示新功能时,必须在公司内网环境下操作,若客户不在现场,就无法直观展示功能交互,甚至远程调试时,开发人员只能局限在固定办公区域,灵活性大打折扣。

而将 SoybeanAdmin 与 cpolar 内网穿透结合后,这些问题都能解决:只需简单配置隧道,就能把本地部署的后台服务映射到公网,异地同事可直接访问公网地址查看、测试界面,客户也能随时随地通过链接体验后台功能,无需受限于局域网,既提升了协作效率,也让后台演示、远程调试变得灵活便捷。

专注做最靓后台的教程已经安排好喽!

1、本地部署SoybeanAdmin步骤

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

打开命令行先克隆项目

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

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

gitcheckout example

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

pnpmi

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

pnpmdev

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

2、简单使用SoybeanAdmin

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

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

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

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

3、安装cpolar内网穿透

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

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

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

4、配置公网地址

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

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

点击创建:

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

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

小结

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

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

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

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

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

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

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

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

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

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

点击更新

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

总结:

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

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

SoybeanAdmin 的模块化设计降低了后台开发门槛,搭配 cpolar 内网穿透则打破了局域网的使用限制,二者结合能让开发、协作流程更顺畅。只需简单的部署和配置步骤,就能兼顾开发效率与使用灵活性,适合各类规模的后台开发场景。

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

版权声明: 本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若内容造成侵权/违法违规/事实不符,请联系邮箱:809451989@qq.com进行投诉反馈,一经查实,立即删除!
网站建设 2026/5/1 14:47:50

零基础玩转Minecraft:极简启动器配置全攻略

零基础玩转Minecraft:极简启动器配置全攻略 【免费下载链接】PCL2 项目地址: https://gitcode.com/gh_mirrors/pc/PCL2 你是否曾遇到下载了Minecraft却不知如何安装模组?是否因启动器界面复杂而放弃体验?本文将用极简配置方案&#x…

作者头像 李华
网站建设 2026/4/30 21:27:01

iPad Air提速攻略:旧设备重生之iOS系统回退完全指南

iPad Air提速攻略:旧设备重生之iOS系统回退完全指南 【免费下载链接】Legacy-iOS-Kit An all-in-one tool to downgrade/restore, save SHSH blobs, and jailbreak legacy iOS devices 项目地址: https://gitcode.com/gh_mirrors/le/Legacy-iOS-Kit 你是否遇…

作者头像 李华
网站建设 2026/5/3 6:01:00

OFD.js前端解析工具:从零基础到企业级应用的完整指南

OFD.js前端解析工具:从零基础到企业级应用的完整指南 【免费下载链接】ofd.js 项目地址: https://gitcode.com/gh_mirrors/of/ofd.js 在数字化转型加速的今天,企业和开发者面临着电子文档处理的诸多挑战。如何在浏览器中直接解析OFD文件&#xf…

作者头像 李华
网站建设 2026/5/1 12:57:28

Z-Image-Turbo为何推荐CFG=7.5?引导强度实验数据解析

Z-Image-Turbo为何推荐CFG7.5?引导强度实验数据解析 1. 什么是CFG,它到底在控制什么? 你可能已经注意到,在Z-Image-Turbo WebUI的参数面板里,CFG引导强度(Classifier-Free Guidance Scale)那个…

作者头像 李华