基于若依开发公网访问项目

        通过该项目的开发，我们可以深入了解若依框架的使用和扩展，同时也可以提升自己的开发技能和经验。本文将介绍该项目的背景、目的、功能特点以及开发过程中遇到的挑战和解决方案，以及最终的成果和展望。通过这个项目，我们将全面展示如何利用若依框架快速构建一个实用的公网访问系统，并帮助读者更好地理解和应用该框架。

1、环境准备

提示：采用Sealos的DevBox远程开发，无需本地安装多余环境

Region Switching

1.后端项目新建：

使用IDEA远程连接后端项目

最后效果如下：

2.前端项目新建：

使用Trae远程连接前端项目

3.数据库部署：

2、若依框架导入

提示：这里可以添加技术整体架构

1.SQL表创建：

2.后端Rouyi导入：

RuoYi-Vue: 🎉 基于SpringBoot，Spring Security，JWT，Vue & Element 的前后端分离权限管理系统，同时提供了 Vue3 的版本

修改如下：

成功运行：

3.前端Vue3导入

RuoYi-Vue3: 🎉 (RuoYi)官方仓库 基于SpringBoot，Spring Security，JWT，Vue3 & Vite、Element Plus 的前后端分离权限管理系统

项目成功启动：

如果验证码接口提示错误，可能是依赖库缺少，解决如下：

sudo -i

apt-get update

apt-get install -y libfreetype6 fontconfig

3、项目开发

1.页面创建

步骤都是重复的，不再演示页面添加步骤

2.OSS文件存储

使用x-file-storage来实现图片存储，简化开发

注意：依据业务环境选择对应的存储平台，本项目使用的为阿里云OSS

X File Storage

yml配置文件：

修改通用的图片上传接口：

3.批量Excel文件导入

页面效果：

Vue代码：

    <el-dialogv-model="importVisible"title="数据导入"width="500":before-close="handleClose"><div class="upload-container"><div class="upload-title"><span>选择文件:</span><el-uploadref="uploadRef"class="upload-demo":action="uploadUrl":headers="headers":auto-upload="false":on-success="handleUploadSuccess":on-error="handleUploadError":before-upload="handleBeforeUpload"accept=".xls,.xlsx"><el-button type="primary" icon="Upload">上传文件</el-button></el-upload><div class="upload-tip">支持扩展名：xls、xlsx</div></div><div class="button-container"><el-button @click="cancelImport">取消</el-button><el-button type="primary" @click="submitUpload">上传</el-button></div></div></el-dialog>

/*** * 批量导入excel * * */
function handleImport() {importVisible.value = true;
}function submitUpload() {uploadRef.value.submit()
}
// 上传成功回调
function handleUploadSuccess(res, file) {if (res.code === 200) {proxy.$modal.msgSuccess("上传excel文件成功");importVisible.value = false;getList();} else {proxy.$modal.msgError(res.msg);}uploadRef.value.clearFiles();proxy.$modal.closeLoading();
}
// 上传失败
function handleUploadError() {console.log("上传失败");proxy.$modal.msgError("上传文件失败");proxy.$modal.closeLoading();
}const props = defineProps({modelValue: [String, Object, Array],// 大小限制(MB)fileSize: {type: Number,default: 1,},// 文件类型fileType: {type: Array,default: () => ["xls", "xlsx"],},// 是否显示提示isShowTip: {type: Boolean,default: true},
});// 上传前loading加载
function handleBeforeUpload(file) {let isImg = false;if (props.fileType.length) {let fileExtension = "";if (file.name.lastIndexOf(".") > -1) {fileExtension = file.name.slice(file.name.lastIndexOf(".") + 1);}isImg = props.fileType.some(type => {if (file.type.indexOf(type) > -1) return true;if (fileExtension && fileExtension.indexOf(type) > -1) return true;return false;});} else {isImg = file.type.indexOf("image") > -1;}if (!isImg) {proxy.$modal.msgError(`文件格式不正确, 请上传${props.fileType.join("/")}格式文件!`);return false;}if (props.fileSize) {const isLt = file.size / 1024 / 1024 < props.fileSize;if (!isLt) {proxy.$modal.msgError(`上传excel文件大小不能超过 ${props.fileSize} MB!`);return false;}}proxy.$modal.loading("正在上传excel文件，请稍候...");
}

<style scoped>
.upload-container {display: flex;flex-direction: column;align-items: center;padding: 24px;border-radius: 12px;background: #f8f9fa;box-shadow: 0 4px 12px rgba(0,0,0,0.05);transition: all 0.3s ease;
}.upload-title {display: flex;flex-direction: column; /* 改为垂直布局 */align-items: flex-start; /* 左对齐 */width: 100%;padding: 0 20px;margin-bottom: 24px;
}.upload-title span {margin-bottom: 12px; /* 增加底部间距 */font-weight: 600;color: #2c3e50;font-size: 16px;
}.upload-demo {width: 100%; /* 让上传按钮填满容器 */
}.upload-tip {margin-top: 8px; /* 调整与按钮的间距 */font-size: 14px;color: #6c757d;line-height: 1.6;display: flex;align-items: center;gap: 8px;
}.upload-tip::before {content: "📁";font-size: 1.2em;
}.button-container {display: flex;justify-content: center;gap: 16px;width: 100%;padding: 0 20px;margin-top: 24px;
}
</style>

Java代码：

/*** 导出商品管理列表(Apache poi)*/@PreAuthorize("@ss.hasPermi('manage:sku:export')")@Log(title = "商品管理", businessType = BusinessType.EXPORT)@PostMapping("/export")public void export(HttpServletResponse response, Sku sku){List<Sku> list = skuService.selectSkuList(sku);ExcelUtil<Sku> util = new ExcelUtil<Sku>(Sku.class);util.exportExcel(response, list, "商品管理数据");}/*** 导入商品管理列表(Apache poi)*/@PreAuthorize("@ss.hasPermi('manage:sku:add')")@Log(title = "商品管理", businessType = BusinessType.IMPORT)@PostMapping("/import")public AjaxResult excelImport(MultipartFile file) throws IOException {ExcelUtil<Sku> util = new ExcelUtil<Sku>(Sku.class);List<Sku> skuList = util.importExcel(file.getInputStream());skuList.forEach( sku -> {skuService.insertSku(sku);});return success();}/*** 导出商品管理列表(Easy)*/@PreAuthorize("@ss.hasPermi('manage:sku:export')")@Log(title = "商品管理", businessType = BusinessType.EXPORT)@PostMapping("/exportEasy")public void exportEasy(HttpServletResponse response, Sku sku){List<Sku> list = skuService.selectSkuList(sku);ExcelUtil<Sku> util = new ExcelUtil<Sku>(Sku.class);util.exportEasyExcel(response, list, "商品管理数据");}/*** 导入商品管理列表(Easy)*/@PreAuthorize("@ss.hasPermi('manage:sku:add')")@Log(title = "商品管理", businessType = BusinessType.IMPORT)@PostMapping("/importEasy")public AjaxResult excelImportEasy(MultipartFile file) throws Exception {ExcelUtil<Sku> util = new ExcelUtil<Sku>(Sku.class);List<Sku> skuList = util.importEasyExcel(file.getInputStream());skuList.forEach( sku -> {skuService.insertSku(sku);});return success();}

后端代码集成了easy： EasyExcel官方文档 - 基于Java的Excel处理工具 | Easy Excel 官网

若依的集成插件文档：插件集成 | RuoYi

项目基本开发完成

4、发布上线

1.SH文件创建

2.发版

3.上线

4.公网访问

帝可得管理系统 (sealoshzh.site)