Java实战系列-前端VUE代码开发及接口流程设计(1)

#Vue.js# #济宁头条#

第四日，项目实战系列终结篇（1）。

之前文章关联阅读

Java实战系列-项目简介、技术选型 、JNA身份证读卡踩坑

Java实战系列-小票打印机格式化打印 docx转pdf打印

Java实战系列-格式化打印 docx转pdf打印（下）

一、开发任务分析

1、设计登录页面，同事之前登录页面已经做好，这里主要是美工设计界面，图片等资源替换。

2、人员信息管理界面。人员信息按村进行管理，设计左侧组织架构选择组件，右侧为人员管理界面，界面上设计 查询条件，查询按钮、新增、导入、导出、修改、删除等功能点。

3、登记管理界面。人员登记也参考人员信息管理的界面布局，左右结构，左侧为组织机构，右侧为管理界面。 功能主要包括查询条件，查询按钮，手动登记、刷身份证登记、导出、补打印几个主要功能。

二、功能实现

先介绍一下我们用的开发环境。我们用的是最新的#jeecg# boot版本，前端是基于 Ant Design of Vue 阿里巴巴前端团队出品，质量和美观度都不错! 这里给积极做开源的公司团队点个赞！当然也希望大家能给我这个知识的搬运工，热衷分享的老程序员一个关注，点个赞！

给没有太多接触过前端的朋友介绍一下vue的开发思路，有些类似于Java的类的概念，将功能、数据、展现、样式整体封装成一个可以重复使用的组件，如果一个公司在同一套代码上长期积累的话，能形成很好的一个整体代码风格，前端展示风格，大大提高开发效率，技术栈该更新要更新，跟上时代的步伐才不容易被淘汰。

1、登录界面设计

2、人员信息管理界面

这个界面我采用了两个组件来组合开发的，一个组织机构的导航组件，一个业务组件，导航组件可以在需要的地方重复使用，开源系统中的系统管理模块中就有，直接重复利用，提高效率。另外一个组件主体代码可以由代码生成器生成出来，根据业务需求再进行调整即可。

2.1 导入功能实现

前端默认有生成的导入控件，这里主要我需要多传一个村的参数到后台就可以。主要修改代码如下：departId 是由选择组织的组件传参到我这个业务组件的，用prop参数进行接收就可以了，对参数传参方式不了解的，建议读官方文档，也可以买书籍进行全面了解。

importExcelUrl: function(){
  return `${window._CONFIG['domianURL']}/${this.url.importExcelUrl}?departId=${this.departId}`;
},

后端处理逻辑：这里用到的主要框架为jxls 2.5.1 ，支持格式化导出，格式化导入的功能，网上也能查询到相关介绍，我这里也不多说了。

<dependency>
    <groupId>org.jxls</groupId>
    <artifactId>jxls</artifactId>
    <version>2.5.1</version>
</dependency>

<dependency>
    <groupId>org.jxls</groupId>
    <artifactId>jxls-poi</artifactId>
    <version>1.1.0</version>
</dependency>

<dependency>
    <groupId>org.jxls</groupId>
    <artifactId>jxls-reader</artifactId>
    <version>2.0.6</version>
</dependency>

读取电子表格需要设计一个导入配置参数文件peopleImport.xml,文件内容如下：

<?xml version="1.0" encoding="ISO-8859-1"?>
<workbook>
    <worksheet idx="0">
        <section startRow="0" endRow="2"></section>
        <loop startRow="3" endRow="3" items="peopleList" var="people" varType="org.jeecg.modules.sqxf.people.entity.SqxfPeople">
            <section startRow="3" endRow="3">
                <mapping row="3" col="0">people.no</mapping>
                <mapping row="3" col="1">people.familyNo</mapping>
                <mapping row="3" col="2">people.name</mapping>
                <mapping row="3" col="3">people.familyMain</mapping>
                <mapping row="3" col="4">people.cardId</mapping>
            </section>
            <loopbreakcondition>
                <rowcheck offset="0">
                    <cellcheck offset="2"></cellcheck>
                </rowcheck>
            </loopbreakcondition>
        </loop>
    </worksheet>
</workbook>

这个框架的主要好处是可以通过配置文件来对应列和实体中的字段，能灵活地进行配置，如果新增列或调整列的话，几乎不用调整程序相关内容。

接口端代码如下：

MultipartHttpServletRequest multipartRequest = (MultipartHttpServletRequest) request;
Map<String, MultipartFile> fileMap = multipartRequest.getFileMap();

List<SqxfPeople> peopleList = new ArrayList();
for (Map.Entry<String, MultipartFile> entity : fileMap.entrySet()) {
    //获取上传文件对象
    MultipartFile file = entity.getValue();

    org.springframework.core.io.Resource resource = new ClassPathResource("peopleImport.xml");
    InputStream in = resource.getInputStream();
    XLSReader mainReader = ReaderBuilder.buildFromXML(in);
    in.close();

    List<SqxfPeople> itemList = new ArrayList();
    Map beans = new HashMap();
    beans.put("peopleList", itemList);
    XLSReadStatus readStatus = mainReader.read(file.getInputStream(), beans);

    if (readStatus.isStatusOK()) {
       
        for(SqxfPeople item: itemList ){
          
          // 这里使用Hutool 中的身份证校验的工具类，也推荐一下
          boolean isvalid = IdcardUtil.isValidCard(item.getCardId());

           // 此处省略部分业务代码，有业务处理代码可以在这里添加
          
            peopleList.add(item);
        }
    }

}

message = "读取" + sum.getOrDefault("total", 0) + "行，";
message += "导入" + sum.getOrDefault("succ", 0) + "行，";
message += "错误" + sum.getOrDefault("error", 0) + "行，";
message += "小于18岁人员" + sum.getOrDefault("lt18", 0) + "行。";

sqxfPeopleService.deleteByDepartId(departId);

// 这里也强调一下  批量提交数据提交导入效率！
sqxfPeopleService.saveBatch(peopleList, 500);

return Result.ok(message);

这里也强调一下 批量提交数据提交导入效率！

sqxfPeopleService.saveBatch(peopleList, 500);

这里使用Hutool 中的身份证校验的工具类，也推荐一下，这个工具类功能强大，建议多了解一下，很多东西拿来就用，也能提高效率。

文章比较长了，后面的内容后面文章继续分享吧。

关注我，持续技术、方案分享！至少也点赞分享一下，鼓励鼓励，谢谢！