前言
本文仅做学习记录用,在学习过程中借鉴了很多相关资料来源已不可考,目的是以小白的身份按照流程操作就能复现
为了方便理解,部分关键词以中文方式展现,并不代表代码中一定就能用中文字符!
前端(ruoyi-ui目录下)
参考位置1:
src/views/模参_生成模块名_/模参_生成业务名_/index.vue
文件中
在新增+修改+删除的按钮后添加
<!-- [导入]第一步:添加一个导入的按钮↓-->
<el-col :span="1.5">
<!-- v-hasPermi =权限字符 ,在数据库 sys_menu 内补足展示按钮以及权限字符:daoru 即可限制哪些角色有权限使用该按钮-->
<!-- @click="dianji_daoru" 中的 dianji_daoru 为点击按钮产生的事件 可以自行修改事件名称-->
<el-button
v-hasPermi="['模参_生成模块名_:模参_生成业务名_:daoru']"
icon="el-icon-upload2"
size="mini"
type="info"
@click="dianji_daoru"
>导入
</el-button>
</el-col>
<!-- [导入]第一步:添加一个导入的按钮↑-->参考位置2:
src/views/模参_生成模块名_/模参_生成业务名_/index.vue
文件中
<!-- 添加或修改XXX对话框 -->
XXX
<el-button type="primary" @click="submitForm">确 定</el-button>
<el-button @click="cancel">取 消</el-button>
</div>
</el-dialog>
段落后
<!-- [导入]第二步]设计弹窗样式↓ -->
<el-dialog :title="upload.title" :visible.sync="upload.open" append-to-body width="400px">
<el-upload
ref="upload"
:action="upload.url + '?updateSupport=' + upload.updateSupport"
:auto-upload="false"
:disabled="upload.isUploading"
:headers="upload.headers"
:limit="1"
:on-progress="handleFileUploadProgress"
:on-success="handleFileSuccess"
accept=".xlsx, .xls"
drag
>
<i class="el-icon-upload"></i>
<div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
<div slot="tip" class="el-upload__tip text-center">
<!-- 注释掉这段代码则是因为我在实用中没有设计为导入的表格覆盖原数据,意味着如果导入的表格中有部分关键项内的数据跟原数据有重复的话是会报错处理的,这部分根据各位的实际情况自行调整-->
<!-- <div slot="tip" class="el-upload__tip">-->
<!-- <el-checkbox v-model="upload.updateSupport"/>-->
<!-- 是否更新已经存在的用户数据-->
<!-- </div>-->
<!-- 注释掉这段代码则是因为我在实用中没有设计为导入的表格覆盖原数据,意味着如果导入的表格中有部分关键项内的数据跟原数据有重复的话是会报错处理的,这部分根据各位的实际情况自行调整-->
<span>仅允许导入xls、xlsx格式文件。</span>
<el-link :underline="false" style="font-size:12px;vertical-align: baseline;" type="primary"
@click="xiazaidaorumuban">下载模板
</el-link>
<!-- @click="xiazaidaorumuban"> 中的 xiazaidaorumuban 是调用函数 如果此处做了修改那么后续函数名也要对应修改-->
</div>
</el-upload>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="queren_daoru">确 定</el-button>
<!-- @click="queren_daoru"> 中的 queren_daoru 也是事件名 如果此处做修改 后续也需要对应修改-->
<el-button @click="upload.open = false">取 消</el-button>
</div>
</el-dialog>
<!-- [导入]第二步]设计弹窗样式↑ -->参考位置3:
src/views/模参_生成模块名_/模参_生成业务名_/index.vue
文件中
export default {
上方添加
// [导入]第三步: 添加import↓
import {getToken} from "@/utils/auth";
// [导入]第三步: 添加import↑参考位置4:
src/views/模参_生成模块名_/模参_生成业务名_/index.vue
文件中
export default {
下
data() {
return {
的return中添加
// [导入]第四步:设置导入弹窗相关↓
upload: {
// 是否显示弹出层（用户导入）
open: false,
// 弹出层标题（用户导入）
title: "导入表格",
// 是否禁用上传
isUploading: false,
// 是否更新已经存在的用户数据
updateSupport: 0,
// 设置上传的请求头部
headers: {Authorization: "Bearer " + getToken()},
// 上传的地址
url: process.env.VUE_APP_BASE_API + "/模参_生成模块名_/模参_生成业务名_/importData"
},
// [导入]第四步:设置导入弹窗相关↑参考位置5:
src/views/模参_生成模块名_/模参_生成业务名_/index.vue
文件中
created() {
this.getList();
},
methods: {
后添加
// [导入]第五步:配置对应的事件函数↓
/** 导入按钮操作 */
dianji_daoru() {
this.upload.title = "表格导入";
this.upload.open = true;
},
/** 下载模板操作 */
xiazaidaorumuban() {
this.download('模参_生成模块名_/模参_生成业务名_/importTemplate', {}, `表格_${new Date().getTime()}.xlsx`) // 表格_${new Date().getTime()}.xlsx 代表下载的模板的表格名字可以自己修改
},
// 文件上传中处理
handleFileUploadProgress(event, file, fileList) {
this.upload.isUploading = true;
},
// 文件上传成功处理
handleFileSuccess(response, file, fileList) {
this.upload.open = false;
this.upload.isUploading = false;
this.$refs.upload.clearFiles();
this.$alert("<div style='overflow: auto;overflow-x: hidden;max-height: 70vh;padding: 10px 20px 0;'>" + response.msg + "</div>", "导入结果", {dangerouslyUseHTMLString: true});
this.getList();
},
// 提交上传文件
queren_daoru() {
this.$refs.upload.submit();
},
// [导入]第五步:配置对应的事件函数↑到此为止前端的vue文件内的修改就已经完成,后面是对于后端文件的修改
后端(\ruoyi-admin\src\main 目录下)
因为后端部分量名涉及到大小写问题
故在这里说明一下后续代码所使用的名称,方便在后面的代码中知道哪些是可以自行修改的
表名称:a_fenpei
实体类名称:AFenpei
生成包路径:com.ruoyi.system
生成模块名:mokuaiming
生成业务名:yewuming
参考位置1:
src/main/java/com/ruoyi/模参_生成模块名_/controller/模参_实体类名称_Controller.java
文件末尾添加(注意在代码最后是在位与最后的}前面的)
/**
* [导入]第六步:处理Excel文件导入
*/
@Log(title = "表格导入", businessType = BusinessType.IMPORT) // todo
@PostMapping("/importData")
public AjaxResult importData(MultipartFile file, boolean updateSupport) throws Exception
{
ExcelUtil<AFenpei> util = new ExcelUtil<>(AFenpei.class); // todo
List<AFenpei> linshiList = util.importExcel(file.getInputStream()); // todo
String operName = getUsername();
String message = aFenpeiService.importUser(linshiList, updateSupport, operName); // todo
return AjaxResult.success(message);
}
//处理模板导出↓
@PostMapping("/importTemplate")
public void importTemplate(HttpServletResponse response)
{
ExcelUtil<AFenpei> util = new ExcelUtil<>(AFenpei.class);
util.importTemplateExcel(response, "表格模板");
}
//处理模板导出↑
// [导入]第六步:处理Excel文件导入参考位置2:
src/main/java/com/ruoyi/mokuaiming/service/IAFenpeiService.java
末尾添加(该部分涉及到导入表格时数据覆盖相关的操作根据自己情况作修改,如果跟我一样不需要这覆盖数据的话 就只需要作一下量名修改后粘贴过去备用就行)
/**
* [导入]第七步:更新现有表格数据相关↓
*
* @param linshiList 用户数据列表
* @param isUpdateSupport 是否更新支持，如果已存在，则进行更新数据
* @param operName 操作用户
* @return 结果
*/
public String importUser(List<AFenpei> linshiList, Boolean isUpdateSupport, String operName);
// [导入]第七步:更新现有表格数据相关↑参考位置3:
src/main/java/com/ruoyi/mokuaiming/service/impl/AFenpeiServiceImpl.java
文件中
@Service
public class
后添加
// [导入]第八步↓
@Autowired
private ISysConfigService configService;
//[导入]第八步↑参考位置4:
src/main/java/com/ruoyi/mokuaiming/service/impl/AFenpeiServiceImpl.java
文件中
/**
* 新增任务
*
* @param XXX 任务
* @return 结果
*/
@Override
public int
内修改(这部分增加对新增按钮的相关数据的补充验证,目的是在新增的时候也判断新增的数据是否在数据库内有重复的,根据自己的需求选择是否增加)
// [导入]第九步:在增加按钮上增加对数据重复性的验证↓
AFenpei tempSearch = new AFenpei();
// 需要验证数据库里哪个字段就把setXXX和getXXX的XXX改为对应的字段↓
tempSearch.set姓名(aFenpei.get姓名());
tempSearch.set学号(aFenpei.get学号());
// 需要验证数据库里哪个字段就把setXXX和getXXX的XXX改为对应的字段↑
List<AFenpei> us = aFenpeiMapper.selectAFenpeiList(tempSearch);
if (us != null && us.size() > 0) {
throw new ServiceException("数据已存在");
} else {
// 把原return放进来
}
// [导入]第九步:在增加按钮上增加对数据重复性的验证↑参考位置5:
src/main/java/com/ruoyi/mokuaiming/service/impl/AFenpeiServiceImpl.java
末尾加
/**
* [导入]第十步:导入数据
*
* @param userList 用户数据列表
* @param isUpdateSupport 是否更新支持，如果已存在，则进行更新数据
* @param operName 操作用户
* @return 结果
*/
@Override
public String importUser(List<AFenpei> userList, Boolean isUpdateSupport, String operName) {
if (StringUtils.isNull(userList) || userList.size() == 0) {
throw new ServiceException("导入用户数据不能为空！");
}
int successNum = 0;
int failureNum = 0;
StringBuilder successMsg = new StringBuilder();
StringBuilder failureMsg = new StringBuilder();
String password = configService.selectConfigByKey("sys.user.initPassword");
for (AFenpei user : userList) {
try {
// 验证是否存在这个用户
AFenpei tempSearch = new AFenpei();
tempSearch.set学号(user.get学号());
tempSearch.set姓名(user.get姓名());
List<AFenpei> us = aFenpeiMapper.selectAFenpeiList(tempSearch);
AFenpei u = null;
if (us != null && us.size() > 0) {
u = us.get(0);
}
// AFenpei u = aFenpeiMapper.selectAFenpeiById(user.getId());
if (StringUtils.isNull(u)) {
// 这部分注释掉的代码是跟验证token权限有关的,根据自己的需求后续自行去修改即可↓
// BeanValidators.validateWithException(validator, user);
// user.setPassword(SecurityUtils.encryptPassword(password));
// 这部分注释掉的代码是跟验证token权限有关的,根据自己的需求后续自行去修改即可↑
user.setCreateBy(operName);
// 设置数据库中的某些字段在导入的时候不管导入的表格内这个字段是否有数据都会在导入后变成空值↓
user.set备注(null);
// 设置数据库中的某些字段在导入的时候不管导入的表格内这个字段是否有数据都会在导入后变成空值↑
aFenpeiMapper.insertAFenpei(user);
successNum++;
successMsg.append("<br/>" + successNum + "、姓名 " + user.getId() + " 导入成功");
} else if (isUpdateSupport) {
// 这部分注释掉的代码是跟验证token权限有关的,根据自己的需求后续自行去修改即可↓
// BeanValidators.validateWithException(validator, user);
// checkUserAllowed(u);
// checkUserDataScope(u.getUserId());
// user.setUserId(u.getUserId());
// user.setUpdateBy(operName);
// 这部分注释掉的代码是跟验证token权限有关的,根据自己的需求后续自行去修改即可↑
// 设置数据库中的某些字段在导入的时候不管导入的表格内这个字段是否有数据都会在导入后变成空值↓
user.set备注(null);
// 设置数据库中的某些字段在导入的时候不管导入的表格内这个字段是否有数据都会在导入后变成空值↑
aFenpeiMapper.updateAFenpei(user);
successNum++;
// 后面的(successMsg.append)可以自定义修改提示的文本 在其后面修改样式即可
successMsg.append("<br/>" + successNum + "、姓名 " + user.get姓名() + user.get学号() + " 更新成功");
} else {
failureNum++;
failureMsg.append("<br/>" + failureNum + "、姓名 " + user.get姓名() + user.get学号() + " 已存在");
}
} catch (Exception e) {
failureNum++;
String msg = "<br/>" + failureNum + "、姓名 " + user.get姓名() + user.get学号() + "导入失败：";
failureMsg.append(msg + e.getMessage());
// log.error(msg, e);
}
}
if (failureNum > 0) {
failureMsg.insert(0, "导入成功" + successNum + "条" + "<br/>" + "导入失败" + failureNum + " 条，失败原因如下：");
throw new ServiceException(failureMsg.toString());
} else {
successMsg.insert(0, "恭喜您，数据已全部导入成功！共 " + successNum + " 条，数据如下：");
}
return "恭喜您，数据已全部导入成功！共 " + successNum + " 条";
}
// [导入]第十步:导入数据结束
截止于此整个修改流程已经全部写完,本文章的目的是给[完全不懂vue跟java相关的小白]一个傻瓜式的流程图,不涉及任何语法之类的知识.如果后续有兴趣的话可以自己去查询资料吃透这些流程以及进行更自定义化的修改
如果有错误也可以留言指正
