news 2026/8/9 20:59:26

搭后台还在从零敲代码?SoybeanAdmin 让你 5 分钟出原型,别被局域网耽误事!

作者头像

张小明

前端开发工程师

1.2k 24
文章封面图
搭后台还在从零敲代码?SoybeanAdmin 让你 5 分钟出原型,别被局域网耽误事!

SoybeanAdmin 是一款基于 TypeScript、Vue3 的后台管理模板,核心功能是帮开发者快速搭建规范且美观的管理系统。它适合前端开发团队、企业 IT 部门,甚至前端新手 —— 模块化设计像拼积木一样拼接页面,自动化路由减少重复工作,TypeScript 全栈支持还能提前规避代码错误。相比从零开发,它能节省 90% 的基础配置时间,移动端自适应布局更是解决了 “老板突然要手机端查看” 的紧急需求。

实际用下来,SoybeanAdmin 的规范度很赞,pnpm monorepo 能统一团队依赖配置,避免多人开发时 “代码风格像开盲盒” 的问题。不过要注意,使用前得先装好 git、node.js 和 pnpm,克隆项目后记得切换到 example 分支,不然可能看不到完整的演示效果。

但它默认只能在本地局域网运行,这就有点麻烦了:比如团队成员不在同一办公室,想远程协作调试得反复传代码;客户想实时看后台效果,只能发截图不够直观;甚至自己在家加班,想调一下公司电脑上的项目都没辙。

这时候如果结合 cpolar 内网穿透就不一样了。不用买云服务器,也不用配置公网 IP,简单几步就能把本地的 SoybeanAdmin 服务映射到公网,生成一个可远程访问的链接。团队异地能实时查看进度,客户能直接操作演示界面提意见,自己出差也能随时改代码,协作效率提了不少。

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

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 打破局域网限制,不管是团队协作还是客户演示都能更顺畅。这样的组合,让后台开发从 “繁琐配置” 变成 “专注功能”,适合需要高效出成果的开发场景。

cpolar就像给你的设备装了个“隐形的公网翅膀”,无论你是搞开发、做安防、玩NAS,还是单纯想和异地朋友开黑打游戏——只要有端口在跑,立刻获得全球访问权限。从此告别局域网束缚,实现真正的“万物互联自由”!

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

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

LLM动态预测药物反应减少副作用

📝 博客主页:Jax的CSDN主页 LLM动态预测药物反应:构建个性化用药安全网目录LLM动态预测药物反应:构建个性化用药安全网 引言:药物副作用的全球性挑战 一、技术应用场景:从静态指南到动态安全网 1.1 临床全流…

作者头像 李华
网站建设 2026/7/31 7:10:11

Java核心语法:从变量到流程控制

Java 的核心语法是学习 Java 编程的起点,主要包括变量与数据类型、运算符、流程控制(条件判断 循环)等基础内容。下面从最基础的部分开始,系统地讲解这些核心语法,并配以清晰的示例和流程图参考。 1. 变量与数据类型…

作者头像 李华
网站建设 2026/8/9 20:25:10

制作一个简单的HTML个人网页

以下是一个简单却新颖的单页个人网页设计示例(2026 年流行趋势向),采用纯 HTML CSS(无框架、无 JS 依赖),体积小、加载快、手机友好。 核心创意点: 不对称分块布局 微妙的渐变悬停&#xff…

作者头像 李华
网站建设 2026/7/31 7:09:33

操作系统进程间通信(IPC)的庖丁解牛

操作系统进程间通信(IPC, Inter-Process Communication)是 多进程系统中协调、同步与数据交换的核心机制。它解决了 进程隔离性 与 协作需求 之间的根本矛盾。理解 IPC,是掌握高并发、分布式系统、安全模型的基石。一、为什么需要 IPC&#x…

作者头像 李华
网站建设 2026/8/9 10:22:41

【大数据毕设源码分享】基于springboot+数据可视化用户信用评估系统的设计与实现(程序+文档+代码讲解+一条龙定制)

博主介绍:✌️码农一枚 ,专注于大学生项目实战开发、讲解和毕业🚢文撰写修改等。全栈领域优质创作者,博客之星、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java、小程序技术领域和毕业项目实战 ✌️技术范围:&am…

作者头像 李华