若依非分離版-第五十七章：使用者資料導入前後端源碼拆解

、界面操作

1、點選左側菜單，選擇使用者管理，點選右側工作區的導入

2、下載下傳的資料模版

3、配置好上傳資料模版後，選擇檔案

4、導入成功

實作代碼拆解

1、導入按鈕代碼

<a class="btn btn-info" onclick="$.table.importExcel()" shiro:hasPermission="system:user:import">
    <i class="fa fa-upload"></i> 導入
</a>           

具體路徑截圖：

// 導入資料
importExcel: function(formId, width, height) {
    table.set();
    var currentId = $.common.isEmpty(formId) ? 'importTpl' : formId;
    var _width = $.common.isEmpty(width) ? "400" : width;
    var _height = $.common.isEmpty(height) ? "230" : height;
    top.layer.open({
        type: 1,
        area: [_width + 'px', _height + 'px'],
        fix: false,
        //不固定
        maxmin: true,
        shade: 0.3,
        title: '導入' + table.options.modalName + '資料',
        content: $('#' + currentId).html(),
        btn: ['<i class="fa fa-check"></i> 導入', '<i class="fa fa-remove"></i> 取消'],
        // 彈層外區域關閉
        shadeClose: true,
        btn1: function(index, layero){
            var file = layero.find('#file').val();
            if (file == '' || (!$.common.endWith(file, '.xls') && !$.common.endWith(file, '.xlsx'))){
                $.modal.msgWarning("請選擇字尾為 “xls”或“xlsx”的檔案。");
                return false;
            }
            var index = top.layer.load(2, {shade: false});
            $.modal.disable();
            var formData = new FormData(layero.find('form')[0]);
            $.ajax({
                url: table.options.importUrl,
                data: formData,
                cache: false,
                contentType: false,
                processData: false,
                type: 'POST',
                success: function (result) {
                    if (result.code == web_status.SUCCESS) {
                       $.modal.close(index);
                        $.modal.closeAll();
                        $.modal.alertSuccess(result.msg);
                        $.table.refresh();
                    } else if (result.code == web_status.WARNING) {
                       $.modal.close(index);
                        $.modal.enable();
                        $.modal.alertWarning(result.msg)
                    } else {
                        $.modal.close(index);
                        $.modal.enable();
                        $.modal.alertError(result.msg);
                    }
                },
                complete: function () {
                   layero.find('#file').val('');
                }
            });
        }
    });
},           

如上述，是具體導入執行函數。

如上述代碼第7行top.layer.open。打開一個層，其中層的大小通過如下兩段代碼設定

var _width = $.common.isEmpty(width) ? "400" : width;

var _height = $.common.isEmpty(height) ? "230" : height;

如上述代碼第19行，綁定送出按鈕方法。具體處理邏輯：

1、判斷檔案字尾是否為 “xls”或“xlsx”的檔案。

2、設定遮罩層。

3、将檔案上傳到背景。其中背景的路徑配置是url: table.options.importUrl,

importUrl的配置在user.html裡面的options配置裡面

java 背景處理方法

上傳的處理函數的檔案處理路徑入下截圖：

@Log(title = "使用者管理", businessType = BusinessType.IMPORT)
@RequiresPermissions("system:user:import")
@PostMapping("/importData")
@ResponseBody
public AjaxResult importData(MultipartFile file, boolean updateSupport) throws Exception
{
    ExcelUtil<SysUser> util = new ExcelUtil<SysUser>(SysUser.class);
    List<SysUser> userList = util.importExcel(file.getInputStream());
    String message = userService.importUser(userList, updateSupport, getLoginName());
    return AjaxResult.success(message);
}           

MultipartFile file： 讀取上傳檔案的資料。

ExcelUtil:初始化execl處理的工具類

util.importExcel(file.getInputStream());讀取execl檔案，并傳回List<SysUser>對象

userService.importUser：将清單資料插入到資料庫表裡面。

資料庫表模型

CREATE TABLE `sys_user` (
  `user_id` bigint(20) NOT NULL AUTO_INCREMENT COMMENT '使用者ID',
  `dept_id` bigint(20) DEFAULT NULL COMMENT '部門ID',
  `login_name` varchar(30) NOT NULL COMMENT '登入賬号',
  `user_name` varchar(30) DEFAULT '' COMMENT '使用者昵稱',
  `user_type` varchar(2) DEFAULT '00' COMMENT '使用者類型（00系統使用者 01注冊使用者）',
  `email` varchar(50) DEFAULT '' COMMENT '使用者郵箱',
  `phonenumber` varchar(11) DEFAULT '' COMMENT '手機号碼',
  `sex` char(1) DEFAULT '0' COMMENT '使用者性别（0男 1女 2未知）',
  `avatar` varchar(100) DEFAULT '' COMMENT '頭像路徑',
  `password` varchar(50) DEFAULT '' COMMENT '密碼',
  `salt` varchar(20) DEFAULT '' COMMENT '鹽加密',
  `status` char(1) DEFAULT '0' COMMENT '帳号狀态（0正常 1停用）',
  `del_flag` char(1) DEFAULT '0' COMMENT '删除标志（0代表存在 2代表删除）',
  `login_ip` varchar(128) DEFAULT '' COMMENT '最後登入IP',
  `login_date` datetime DEFAULT NULL COMMENT '最後登入時間',
  `pwd_update_date` datetime DEFAULT NULL COMMENT '密碼最後更新時間',
  `create_by` varchar(64) DEFAULT '' COMMENT '建立者',
  `create_time` datetime DEFAULT NULL COMMENT '建立時間',
  `update_by` varchar(64) DEFAULT '' COMMENT '更新者',
  `update_time` datetime DEFAULT NULL COMMENT '更新時間',
  `remark` varchar(500) DEFAULT NULL COMMENT '備注',
  PRIMARY KEY (`user_id`)
) ENGINE=InnoDB AUTO_INCREMENT=5 DEFAULT CHARSET=utf8 COMMENT='使用者資訊表';           

未來計劃

1、ruoyi非分離版本拆解

2、ruoyi-vue-pro：講解工作流

3、ruoyi-vue-pro：支付子產品，電商子產品

4、基于ruoyi-vue-pro項目開發

5、JEECG低代碼開發平台

請關注我，本星球會持續推出更多的開源項目代碼解析，如有更好的意見請留言回複或者私信。