hap开始之旅

2019-12-23 本文已影响0人格雷福豪

title: hap开始之旅
date: 2019-08-19
categories: 后端
tags:

写在前面：hap是什么？贴张图：

hap架构.png

其实用的就是SSM框架，实现了组织管理、权限管理等。学习hap的目的是一些小项目用不到hzero这么大的架构。

开发环境

主要进行一些配置，如git、maven、mysql等的配置，环境版本：

JDK 1.8+
redis 3.0+
maven 3.3+
Tomcat 7+
MySQL 5.6+

新建数据库

建表：如果手写建表语句，注意其中的schema，别手快写成了scheam

create schema hap_dev default character set utf8;
create schema hap_prod default character set utf8;

创建用户hap_dev，设置密码为hap_dev

CREATE USER hap_dev@'%' IDENTIFIED BY 'hap_dev';
CREATE USER hap_dev@'localhost' IDENTIFIED BY 'hap_dev';

将hap_dev和hap_prod的权限全部赋予用户hap

GRANT ALL PRIVILEGES ON hap_dev.* TO hap_dev@'%';
GRANT ALL PRIVILEGES ON hap_dev.* TO hap_dev@'localhost';
GRANT ALL PRIVILEGES ON hap_prod.* TO hap_dev@'%';
GRANT ALL PRIVILEGES ON hap_prod.* TO hap_dev@'localhost';

flush privileges;

数据源配置

hap默认使用JNDI来配置数据源。数据源的配置独立于项目配置。默认的JNDI name为jdbc/hap_dev，tomcat需要配置context.xml。

嗯，之前学的ssm中没有了解过JNDI是个什么东东。JNDI，我老是写成JDNI...哈哈；JNDI 全称：java naming and directory interface，如果是JDNI，那就是：java directory and naming interface好像也差不多哦。

JNDI的作用是完成从服务器中查询数据源，和JDBC的使用不太相同。JNDI的作用帮我们完成了JDBC获取connection对象的步骤。JDBC获取的是一个连接对象，但是JNDI帮我们获取一个数据池，数据池中有多个连接，我们可以获取其中任意一个连接，所以JNDI在完成数据库连接时能够提供数据库连接一个限定等配置。

话不多说，如何配置？先整一个tomcat7版本好吧，进入conf目录下的context.xml文件，在<\Context>标签中配置：把url修改为自己的地址。

<Resource 
      auth="Container" 
      driverClassName="com.mysql.jdbc.Driver" 
      url="jdbc:mysql://192.168.15.78:3306/hap_dev"
      name="jdbc/hap_dev" 
      type="javax.sql.DataSource" 
      username="hap_dev" 
      password="hap_dev"/>

新建项目

先了解下maven命令的标签：

groupId 本项目代号，比如汉得的 BI 产品，代号为 hbi
artifactId 本项目的顶层目录名称，使用项目代号(第一个字母大写) + Parent，如 HbiParent
package 包名称，使用项目代号 + core ,如 hbi.core
archetypeVersion 对应依赖的archetype版本

新建3.0项目

使用如下命令创建一个maven项目，如果出现版本问题，参照文档点击

mvn archetype:generate -D archetypeGroupId=hap -D archetypeArtifactId=hap-webapp-archetype -D archetypeVersion=3.1-SNAPSHOT -D groupId=hbi -D artifactId=HbiParent -D package=hbi.core  -D archetypeRepository=http://nexus.saas.hand-china.com/content/repositories/rdcsnapshot

上面时官网的运行命令，下面是视频中的运行命令：

mvn archetype:generate -D archetypeGroupId=hap -D archetypeArtifactId=hap-webapp-archetype -D archetypeVersion=3.1-SNAPSHOT -D groupId=com.demo -D artifactId=hapDemo -D package=demo  -D hap.version=3.0-SNAPSHOT -D archetypeRepository=http://nexus.saas.hand-china.com/content/repositories/rdcsnapshot

项目结构解释：

.
├── README.md (项目README，请在此处写上项目开发的注意信息，方便团队协同)
├── core（功能实现项目）
│   ├── pom.xml （子项目core的pom.xml文件）
│   └── src
│       └── main
│           ├── java
│           │   ├── hbi
│           │   │   └── core（前面的包名称）
│           │   │       │
│           │   │       ├── controllers（Controller包）
│           │   │       │   └── DemoController.java（Controller类）
│           │   │       ├── db（数据表结构，数据初始化入口文件）
│           │   │       │   └── liquibase.groovy
│           │   │       ├── dto（Dto包）
│           │   │       │   └── Demo.java（Dto实现类）
│           │   │       ├── mapper（Mapper包）
│           │   │       │   ├── DemoMapper.java（Mapper接口）
│           │   │       └── service（Service包）
│           │   │           ├── IDemoService.java
│           │   │           └── impl（Service实现）
│           │   │               └── DemoServiceImpl.java
│           │   └── resources（项目配置文件目录）
│           │       ├── mapper
│           │       │   └── DemoMapper.xml（Mapper xml文件）
│           │       ├── spring （spring配置文件目录）
│           │       ├── config.properties
│           │       └── logback.xml（日志配置文件）
│           └── webapp（Webapp目录）
│               ├── lib（UI 资源库目录）
│               └── WEB-INF
│                   ├── web.xml（Web.xml配置）
│                   └── view（页面文件目录）
│                       └── demo（DEMO页面文件目录）
├── core-db（数据库脚本及初始化数据项目）
│   ├── pom.xml
│   └── src
│       └── main
│           └── java
│               └── hbi
│                   └── core
│                       └── db
│                           ├── data（数据文件）
│                           │   └── (init-data)
│                           └── table（数据库表结构管理）
│                               └── 2016-06-01-init-migration.groovy
└── pom.xml

确定使用的数据库类型

目前已经测试过支持的数据库有Mysql,Oracle,SqlServer 请修改 HbiParent/core/src/main/java/hbi/core/db/liquibase.groovy 以适配不同的数据库
确定好数据库后，按照 [Oracle,MySql,Sqlserver数据库配置]修改项目配置文件。（配置JNDI）
修改配置文件后，按照 [创建数据库]中的步骤创建数据库

编译整个项目

在项目HbiParent根目录下执行：mvn clean install -Dmaven.test.skip=true这个步骤有点慢，花了3分多钟，需要耐心等待
继续在HbiParent根目录下执行：mvn process-resources -D skipLiquibaseRun=false -D db.driver=com.mysql.jdbc.Driver -D db.url=jdbc:mysql://192.168.15.78:3306/hap_dev -Ddb.user=root -Ddb.password=root需要注意替换一下中间数据库的地址（如果用的是虚拟机的的话）

修改redis地址

我开始的时候只修改了core包下配置文件的redis的ip，但是发现运行还是报错；最后结果发现在release包下也有这些配置，所以我直接搜索redis.ip把他们全改了。现在就能运行了，不过页面的中文全为？乱码。
找了半天原因，怀疑是idea的问题、tomcat的问题；修改各种配置还是一样，最后发现，问题出在MySQL的配置文件上，除了更改大小写之外，还要增加character_set_server=utf8和max_connections=500。
看文档的时候还是不够细心啊，要严格按照文档写的内容执行的咯!就按照他写的文档来配置。

观看HAP环境搭建视频

记录一下讲的一些需要留意的知识。

包结构

controllers
dto
mapper
service

各个包下面的类命名要和spring中的配置一致，比如以ServiceImpl结尾的是配置了aop的，service和components是配置了扫描路径的；他这个controllers是配置了扫描路径的，为啥加s，咋不知道，也不敢问。

创建类继承

所有的controller都要继承BaseController，主要是BaseController中有一些"高级方法"，如checkToken之类。service继承IBaseService和ProxySelf。serviceImpl继承BaseServiceImpl。不过mapper继承的是Mapper，不是BaseMapper。实体类继承BaseDTO

实体类中有些字段在数据库中不存在的要加上@Transient注解。@Colum是用来指定数据库中表的列名。

idea中Mybatis的插件可以安装：Free MyBatis plugin和Mybatis Tools

ssm

Spring MVC

注解
数据绑定 400 BadRequest，参数传的不对
数据验证
Spring
依赖注入 Autowired 根据类型根据名称
事件发布和监听
AOP配置，大概原理 cglib JDKProxy
Mybatis
只有接口和配置文件
quartz
activiti

定时器

基于quartz，开发时基本不需要进行application配置；我们创建一个job包，在其中创一个定时任务类并且继承AbstractJob类，重写safeExecute方法；在重写的方法里面就写我们想要执行的任务就ok了。这个也不需要什么注解，就这样创建一个类，再在web端计划任务中配置一个简单任务，并且把类的相对路径拷贝一份填入web端就行。
这是idea中的代码

hap定时任务.png

这是web端的配置：注意其中的任务类名就是类的相对路径

hap定时任务web端.png

这是执行结果：

hap定时任务结果.png

webService

先看一下包结构和类名：其中类名ws结尾，有一个components包其中类以Consumer结尾

hapwebService结构.png

上代码：HelloWs，先来@WebService注解

@WebService
public interface HelloWs {
    String publishHello(String message);
}

HelloWsImpl：同样是@WebService注解，不过要配置endpointInterface的值为类的相对路径

@WebService(endpointInterface = "demo.ws.HelloWs",serviceName = "hello")
public class HelloWsImpl implements HelloWs {
    @Autowired
    private IMessagePublisher publisher;

    @Override
    public String publishHello(String message) {
        publisher.publish("demo:hello","我想问"+message);
        return "success";
    }
}

HelloMessageConsumer：这里加@Component和@TopicMonitor注解，主要是监听impl类中的publish方法中定义的channel，两个值得相同

@Component
@TopicMonitor(channel = "demo:hello")
public class HelloMessageConsumer implements IMessageConsumer<String> {
    @Override
    public void onMessage(String message, String pattern) {
        System.out.println("---------------");
        System.out.println(message);
        System.out.println("----------------");
    }
}

以为到此为止了吗？还没有，我们还需要在applicationContext-beans.xml中配置bean，才能生效：

<bean id="helloService" class="demo.ws.HelloWsImpl"/>
    <jaxws:endpoint id="hello12211" implementor="#helloService" address="/hello">
    </jaxws:endpoint>

到此为止才是真的结束

logger打印信息到控制台

ILoggerFactory iLoggerFactory = LoggerFactory.getILoggerFactory();
        Logger abc = iLoggerFactory.getLogger("abc");
        abc.info("我是打印");

hap定时任务log打印.png

好吧，hap4.0更新了，该学4.0了

先来开发环境：

hap4.0开发工具.png

数据库配置：

环境配置：

lower_case_table_names=1  
character_set_server=utf8mb4  
max_connections=500  
default-storage-engine=INNODB  
innodb_large_prefix=on

数据库配置：数据库字符集为utf8mb4

CREATE SCHEMA hap_dev DEFAULT CHARACTER SET utf8mb4;  
CREATE USER hap_dev@'%' IDENTIFIED BY 'hap_dev';  
GRANT ALL PRIVILEGES ON hap_dev.* TO hap_dev@'%';  
FLUSH PRIVILEGES;

新建项目

项目结构：和3.0的hap架构后端是差不多，不过前端换成了react开发了

.
├── README.md (项目README，请在此处写上项目开发的注意信息，方便团队协同)
├── charts ()
│   └── hap-demo
│         ├── templates
│         │    ├── _helpers.tpl
│         │    ├── deployment.yaml
│         │    ├── ingress.yaml
│         │    ├── pre-config-config.yaml
│         │    ├── pre-config-db.yaml
│         │    └── service.yaml
│         ├── .helmignore
│         ├── Chart.ymal
│         ├── README.md
│         └── values.yaml
├── docker
│    └── Dockerfile
├── src（后端开发目录）
│    └── main
│         └── java
│             ├── hapdemo
│             │   └── core（前面的包名称）
│             │       │
│             │       ├── controllers（Controller包）
│             │       │   └── DemoController.java（Controller类）
│             │       ├── dto（Dto包）
│             │       │   └── Demo.java（Dto实现类）
│             │       ├── mapper（Mapper包）
│             │       │   ├── DemoMapper.java（Mapper接口）
│             │       └── service（Service包）
│             │           ├── IDemoService.java
│             │           └── impl（Service实现）
│             │               └── DemoServiceImpl.java
│             └── resources（项目配置文件目录）
│                 ├── script.db
│                 │    ├── data
│                 │    │    └── hapdemo-core-init-data.xlsx（excel初始化数据）
│                 │    └── hapdemo-core-init-table-migration.groovy（groovy建表数据）
│                 ├── hapdemo.core.grid.mapper
│                 ├── META-INF
│                 │    └── spring.factories
│                 └── application.yml (spring boot 配置文件)
├── react（前端开发目录 ）
│    ├── src
│    │     └── main
│    │           └── module
│    │                 ├── strores（定义的Dataset文件）
│    │                 ├── view(页面和业务逻辑)
│    │                 ├── index.scss(自定义css样式)
│    │                 └── index.js (页面入口文件)
│    ├── config.js
│    └── RouteIndex.js（React访问路由配置）
├── .gitingore
├── .gitlab-ci.yml (gitlab CI 文件)
├── package.json（node组件依赖）
└── pom.xml

确定本项目使用到的数据库

修改application.yml中db.type和mybatis.identity配置,默认为mysql数据库配置。我们就不用修改了。

#db.type property is used for activiti
db:
  type: mysql
  #type: oracle
#mybatis.identity property is userd for mybatis Self-increasing primaryKey strategy
mybatis:
  identity: JDBC
  #identity: SEQUENCE

初始化数据和表结构

新建一个init-databases.sh脚本：主要修改一下数据库地址，用户名和密码我们之前新建的用户就是这个hap_dev,他有对hap_dev_4.0的操作权

#!/usr/bin/env bash
MAVEN_LOCAL_REPO=$(cd / && mvn help:evaluate -Dexpression=settings.localRepository -q -DforceStdout)
TOOL_GROUP_ID=io.choerodon
TOOL_ARTIFACT_ID=choerodon-tool-liquibase
TOOL_VERSION=0.11.1.RELEASE
TOOL_JAR_PATH=${MAVEN_LOCAL_REPO}/${TOOL_GROUP_ID/\./\/}/${TOOL_ARTIFACT_ID}/${TOOL_VERSION}/${TOOL_ARTIFACT_ID}-${TOOL_VERSION}.jar
mvn org.apache.maven.plugins:maven-dependency-plugin:get \
 -Dartifact=${TOOL_GROUP_ID}:${TOOL_ARTIFACT_ID}:${TOOL_VERSION} \
 -Dtransitive=false

mvn clean package spring-boot:repackage

java -Dspring.datasource.url="jdbc:mysql://192.168.15.78/hap_dev_4.0?useUnicode=true&characterEncoding=utf-8&useSSL=false" \
-Dspring.datasource.username=hap_dev \
-Dspring.datasource.password=hap_dev \
-Ddata.mode=all \
-Ddata.drop=false -Ddata.init=true \
-Ddata.jar=target/hap-demo.jar \
-jar ${TOOL_JAR_PATH}

后端开发

先说开发规范：

DTO定义

BaseDTO类包含了常规 DTO 类的所有公共特性。_token 防篡改验证标准 WHO 字段扩展属性字段，一般用于防止当前登录用户修改其他用户数据的情形。如果没有特殊情况，当新建一个 DTO 类时，应当继承 BaseDTO 类，不要把重复的内容写到每一个类中。

@EnableExtensionAttribute//是否启用扩展字段，不加该注解表示不启用
@Table(name = "hap_grid_demo_b")
@MultiLanguage//多语言表标记
public class GridDemo extends BaseDTO {

    @Id//表中的主键，如果是联合主键，需要都加上@Id@Column(可选)
    @GeneratedValue(generator = GENERATOR_TYPE)
    @Where//根据Criteria中的参数拼接sql中where语句
    private Long id;

    @NotEmpty
    @Where
    @Length(max = 50)
    @Column
    @MultiLanguageField//多语言字段标记
    private String name;
    // TODO
}

Mapper层

自定义的 Mapper 接口继承 io.choerodon.mybatis.common.Mapper：和hap3.0很像，不是继承BaseMapper。它的Mapper接口继承了BaseMapper

public interface GridDemoMapper extends Mapper<GridDemo> {
}

Service层

新建的服务都需要定义一个继承 IBaseService<\T> 的接口,服务实现类实现自己定义的接口,之后在实现类上添加 @Dataset 注解,并实现 IDatasetService<\T> 接口的 quiese 和 mutations 方法.

如果是改造现有服务,只需要在对应的服务实现类上添加 @Dataset 注解,并实现 IDatasetService<\T> 接口的 quiese 和 mutations ：

@Service
@Transactional(rollbackFor = Exception.class)
@Dataset("gridDemo")
public class GridDemoServiceImpl extends BaseServiceImpl<GridDemo> implements IGridDemoService, IDatasetService<GridDemo> {
 
    @Override
    public List queries(Map<String, Object> body, int page, int pageSize, String sortname, boolean isDesc) {
        try {
            GridDemo gridDemo = new GridDemo();
            BeanUtils.populate(gridDemo, body);
            Criteria criteria = new Criteria(gridDemo);
            return super.selectOptions(null,gridDemo,criteria ,page, pageSize);
        } catch (Exception e) {
            throw new DatasetException("dataset.error", e);
        }
    }


    @Override
    public List<GridDemo> mutations(List<GridDemo> submitItems) {
        for (GridDemo item : submitItems) {
            switch (item.get__status()) {
                case ADD:
                    this.insertSelective(null, item);
                    break;
                case DELETE:
                    this.deleteByPrimaryKey(item);
                    break;
                case UPDATE:
                    this.updateByPrimaryKeySelective(null, item);
                    break;
            }
        }
        return submitItems;
    }
}

前端开发

这个4.0项目必须要启动前端，才能看见前端页面的控制台；只跑后台只有登录界面。
前端开发的准备：

根目录运行mvn package
同样根目录运行npm install --registry https://nexus.choerodon.com.cn/repository/choerodon-npm/
运行npm start

我的npm命令执行第二步骤的时候，出现什么需要安装node-gyp；大致原因是因为没有Python，我一开始去按了node-gyp，还是不能用；我就卸载了，再在官网上下载了Python2.7.12，然后默认步骤安装，选择加入path路径，就OK了。

npm install --global --production windows-build-tools

npm install -g node-gyp

DEMO开发

好了，我已经完成了demo的部分开发了。真的是心累，昨晚给的开发任务，从昨晚到今天下午都特么卡在项目创建mapper之后跑不了的困局之中。好在最后终于解决了，不过我也知道了为什么会出现这些问题；下面给出遇到的问题

项目结构问题

我根据数据库表的属性，在hap源码中找到了一个类似模块，就是hap-core下的iam包；然后一看结构，这不是DDD吗？

hap的demo结构1.png
好了，我也照猫画虎来了一个同样的ddd结构，结构是有了，实体类、mapper等等都创建好了，就等着启动了呢？好来一手mvn clean package和mvn spring-boot:run结果就是直接报tk.mybatis出错，创建不了bean，而且是空指针。我一开始是以为，mapper.xml的目录不对，因为它提示找不见mapper，后来移动文件到新文件夹也没用；又以为是哪里注解没加，因为扫描不出来，结果并不是注解少了。就这样，自己瞎猜问题原因，没有仔细想问题出现的本质。
他不是报找不见mapper吗？这个框架把扫描的路径给写死了，我创建的目录结构是扫描不到的；service也是扫描不到的。最后，还是推倒重建，按着已有的目录来创建；经过实践，确实问题就是出在扫描不到上。下面是新的目录结构：

hap的demo结构2.png
这个结构必须是这样的四个包，controllers必须有s。
下面给出效果图：

hap的demo效果图1.png

项目创建步骤

要实现这样的效果，要经历如下步骤：

1.创建实体类Header和Line；并且根据数据库中属性来决定是否加注解。实体类继承BaseDTO是因为有objectVersionNumber createdBy creationDate lastUpdatedBy lastUpdateDate属性；没有加上@EnableExtensionAttribute是因为我的数据库中并不是完全有BaseDTO的10多种属性，执行mapper的插入调用的是默认的方法，就不会提示其他属性对应数据库表的列不存在的情况。还有没有加@MultiLanguage的原因是，我在页面上进行插入或者保存操作时，我不会保存语言属性到_tl的表中（因为没有创建该表，会报插入失败），还有需要注意的是，@MultiLanguage注解不加在类上，类的属性也不能加此注解，否则会报tk.mybatis异常。

@Table(name = "htrain_application_header")
public class Header extends BaseDTO{

    @Id
    @Column
    @GeneratedValue(strategy = GenerationType.IDENTITY)
    private Long applicationHeaderId;

    @NotEmpty(message = "应用名不为空")
    @Size(min = 1, max = 200)
    @Column
    private String applicationName;

    @NotEmpty(message = "应用编码不为空")
    @Size(min = 1, max = 100)
    @Column
    private String applicationCode;

    @Size(min = 1, max = 500)
    @Column
    private String applicationDesc;

    @Column(name = "is_enabled")
    private Long enabled;

    //省略getter和setter

光这个实体的注解都有好几层意思，一定要知道什么情况下该怎么用。

2.开发mapper，mapper上不用加@Mapper注解，不过需要继承Mapper，继承的是猪齿鱼的Mapper。

public interface HeaderMapper extends Mapper<Header> {
    /**
     * 利用dto类的属性查询，返回一个Header对象
     * @param headerDTO
     * @return
     */
    List<Header> listHeadersByDTO(@Param("headerDTO") HeaderDTO headerDTO);
}

这里的DTO是我自己提取Header属性出来的。页面上查询传入的属性不完全是Header类的属性

public class HeaderDTO {
    private String applicationName;

    private String applicationCode;

    private String applicationDesc;

    private Long enabled;
    //省略getter和setter
}

3.开发HeaderService，需要继承IBaseService和ProxySelf，继承的第一个主要是可以用默认的一些crud方法，第二个字面意思代理自己，不太清它的作用。

public interface HeaderService extends IBaseService<Header>, ProxySelf<Header> {
    /**
     * 查询Header
     * @param headerDTO
     * @return
     */
    List<Header> listHeaders(HeaderDTO headerDTO);
}

4.开发Controller，需要继承BaseController，源码中提示能分页和校验，这个框架下，idea不会高亮类名

@RestController
@RequestMapping("/log-warn")
public class LogWarnController extends BaseController {

    @Autowired
    private HeaderService headerService;

    @Autowired
    private LineService lineService;

    @GetMapping("/headers")
    public List<Header> listHeaders(HeaderDTO headerDTO) {
        return headerService.listHeaders(headerDTO);
    }

    @GetMapping("/{headerId}/lines")
    public List<Line> listHeaders(@PathVariable Long headerId) {
        return lineService.listLinesByHeaderId(headerId);
    }
}

5.开发Mapper.xml，提一句Free mybatis plugin这个idea插件挺好用的

<?xml version="1.0" encoding="UTF-8" ?>

<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd" >
<mapper namespace="hap.demo.core.grid.mapper.HeaderMapper">

    <select id="listHeadersByDTO" resultType="hap.demo.core.grid.dto.Header">
        SELECT *,
        header.is_enabled enabled FROM
        htrain_application_header header
        <where>
            <if test="headerDTO.enabled != null">
                header.is_enabled = #{headerDTO.enabled}
            </if>
            <if test="headerDTO.applicationName != null">
                <bind name="pattern" value="'%' + headerDTO.getApplicationName + '%'"/>
                and header.application_name like #{pattern}
            </if>
            <if test="headerDTO.applicationCode != null">
                <bind name="pattern" value="'%' + headerDTO.getApplicationCode + '%'"/>
                and header.application_code like #{pattern}
            </if>
            <if test="headerDTO.applicationDesc != null">
                <bind name="pattern" value="'%' + headerDTO.getApplicationDesc + '%'"/>
                and header.application_desc like #{pattern}
            </if>
        </where>
    </select>
</mapper>

6.开发serviceImpl，需要继承BaseServiceImpl，并实现service；这里的Dataset注解我们先不用管

@Service
@Transactional(rollbackFor = Exception.class)
@Dataset("HeaderDemo")
public class HeaderServiceImpl extends BaseServiceImpl<Header> implements HeaderService, IDatasetService<Header> {

    @Autowired
    private HeaderMapper headerMapper;

    @Override
    public List<Header> listHeaders(HeaderDTO headerDTO) {
        return headerMapper.listHeadersByDTO(headerDTO);
    }

    @Override
    public List<?> queries(Map<String, Object> body, int page, int pageSize, String sortname, boolean isDesc) {
        try {
            HeaderDTO headerDTO = new HeaderDTO();
            BeanUtils.populate(headerDTO, body);
            PageHelper.startPage(page, pageSize);
            return headerMapper.listHeadersByDTO(headerDTO);
        } catch (Exception e) {
            throw new DatasetException("dataset.error", e);
        }
    }

    @Override
    public List<Header> mutations(List<Header> list) {
        for (Header header : list) {
            switch (header.get__status()) {
                case ADD:
                    headerMapper.insert(header);
                    break;
                case DELETE:
                    headerMapper.delete(header);
                    break;
                case UPDATE:
                    headerMapper.updateByPrimaryKey(header);
                    break;
                default:
                    break;
            }
        }
        return list;
    }
}

前端开发

到此为止，后端的逻辑是不是差不多了呢？是的，不过光有逻辑还不行，需要和前端进行交互，那我们就还要开发前端。前端的结构如下：我们就需要在红框中的三个文件中操作即可

hap的demo前端1.png

1.第一个文件HeaderDataSet.js：值得注意的是其中primaryKey是对应表主键字段，fields中type的类型有string和number，lookupCode是对应前端自己创建的系统设置中的代码维护。这些name对应实体类的属性名

// stores/GridDataSet.js

export default {
    //主键字段名，一般用作级联行表的查询字段
    primaryKey: 'applicatioin_header_id',
    autoQuery: true,
    pageSize: 20,
    //对应后台ds的name，自动生成约定的submitUrl, queryUrl, tlsUrl
    name: 'HeaderDemo',
    //与后端对应的列的描述
    fields: [
        {name: 'applicationCode', type: 'string', label: '应用编码', require: true},
        {name: 'applicationName', type: 'string', label: '应用名称'},
        {name: 'applicationDesc', type: 'string', label: '应用描述'},
        {name: 'enabled', type: 'string', label: '是否启用', lookupCode: 'HEADER.ENABLED'},
    ],
    //查询字段，自动生成查询组件
    queryFields: [
        {name: 'applicationCode', type: 'string', label: '应用编码'},
        {name: 'applicationName', type: 'string', label: '应用名称'},
        {name: 'applicationDesc', type: 'string', label: '应用描述'},
        {name: 'enabled', type: 'string', label: '是否启用', lookupCode: 'HEADER.ENABLED'},
    ],
};

2.开发index.js注意其中column标签的editor属性对应我们在前端操作的是输入还是选择

import {DataSet, IntlField, Select, Table} from "choerodon-ui/pro";
import {Content} from "@choerodon/boot";
import HeaderDataSet from "../app/stores/HeaderDataSet";
import React, { PureComponent } from 'react';

const {Column} = Table;

export default class Header extends PureComponent {
    headerDataSet = new DataSet(HeaderDataSet);

    render() {
        return (
            <Content>
                <Table buttons={['add', 'save', 'delete']} dataSet={this.headerDataSet} border={false} queryFieldsLimit={4}>
                    <Column name="applicationCode" editor={<IntlField />} />
                    <Column name="applicationName" editor={<IntlField />} />} />
                    <Column name="applicationDesc" editor={<IntlField />} />
                    <Column name="enabled" editor={<Select />} />
                </Table>
            </Content>
        );
    }
}

3.开发RouteIndex.js，注意其中path对应的路径是加上/log-war/headers因为这是我自己写的controller对应的路径。

import React, { Component } from 'react';
import CacheRoute, { CacheSwitch } from 'react-router-cache-route';
import { asyncRouter, nomatch } from '@choerodon/boot';

const Grid = asyncRouter(() => import('./src/grid'));
const Header = asyncRouter(() => import('./src/app'))

export default ({ match }) => (
  <CacheSwitch>
    <CacheRoute exact path={`${match.url}/grid`} cacheKey={`${match.url}/grid`} component={Grid} />
    <CacheRoute exact path={`${match.url}/log-warn/headers`} cacheKey={`${match.url}/log-warn/headers`} component={Header} />
    <CacheRoute path="*" component={nomatch} />
  </CacheSwitch>
);

4.配置xlsx文件，加上自己在路由中配置的路径；注意路径对应自己的路由配置

hap的demo前端xlsx1.png

总结

其实开发后端不难，就是必须要依据它的框架来开发。

Demo再开发

由于上面开发的demo只是一个操作单表的，没有前端的开发基础，只能仿照编码规则的前端结构来写（在源码code.rule包下）。大致要做出的效果就是这样：
头的：

demo重新开发前端头1.png
行的：

demo重新开发前端行.png

项目结构

前端：

react
- src
  - logwarn
    - store
    - view

后端：

demo
- controllers
- dto
- mapper
- service

贴图：

demo重新开发前后端结构.png

后端开发

在上面的demo上继续整理，更加完善对hap的注解理解。

pom文件及前端config.js修改

修改pom文件中的依赖

<dependency>
            <groupId>io.choerodon</groupId>
            <artifactId>hap-core</artifactId>
        </dependency>
        <dependency>
            <groupId>io.choerodon</groupId>
            <artifactId>hap-security-standard</artifactId>
        </dependency>

修改config.js

 modules: [
    '../target/generate-react/choerodon-fnd-util',
    '../target/generate-react/hap-core',
  ],

实体类

Header类：注意其中已经指出了@Where @Children等注解的作用了，我在这里就不提出来叙述了。

@Table(name = "htrain_application_header")
public class Header extends BaseDTO{

    /**
     * 指定属性对应的常量，方便service和controller调用组合出查询筛选条件
     */
    public static final String FIELD_APPLICATION_HEADER_ID = "applicationHeaderId";
    public static final String FIELD_APPLICATION_HEADER_CODE = "applicationCode";
    public static final String FIELD_APPLICATION_HEADER_NAME = "applicationName";
    public static final String FIELD_APPLICATION_HEADER_DESC = "applicationDesc";
    public static final String FIELD_APPLICATION_HEADER_ENABLED = "enabled";


    /**
     * @Id 指定id
     * @Column 指定这是表的列，如果属性名不满足驼峰规则，需要给注解加name属性指定表中列名
     * @Where 标志这是一个可以用作筛选条件的属性
     * @GeneratedValue 它的属性strategy 中有四种值：TABLE SEQUENCE IDENTITY AUTO
     *             分别对应的意思是：TABLE 使用一个特定的数据库表格来保存主键
     *                            SEQUENCE 根据底层数据库的序列来生成主键，条件时数据库支持序列
     *                            IDENTITY 主键由数据库自动生成（主要是自动增长型）
     *                            AUTO 主键由程序控制
     * @Transient 此注释指定属性或字段为不持久。它用于注释属性或字段实体类、映射超类或可嵌入类
     * @Children 加在 DTO 的某个 field 上,表示这个 field 是用存放子节点信息.
     *           头行结构中行的标记,也可以用作单个对象的子属性标记
     *
     *
     */
    @Id
    @Column
    @Where
    @GeneratedValue(strategy = GenerationType.IDENTITY)
    private Long applicationHeaderId;

    @NotEmpty(message = "应用名不为空")
    @Size(min = 1, max = 200)
    @Where
    @Column
    private String applicationName;

    @NotEmpty(message = "应用编码不为空")
    @Size(min = 1, max = 100)
    @Where
    @Column
    private String applicationCode;

    @Size(min = 1, max = 500)
    @Where
    @Column
    private String applicationDesc;

    @Column(name = "is_enabled")
    @Where
    private Long enabled;


    @Transient
    @Children
    private List<Line> lines;
    
    省略getter和setter方法
}

Line类的属性上加的注解根据自己的需要添加：

@Table(name = "htrain_application_line")
public class Line extends BaseDTO{

    @Id
    @GeneratedValue(strategy = GenerationType.IDENTITY)
    @Column
    private Long applicationLineId;

    @Column
    @Where
    private Long applicationHeaderId;

    @NotEmpty(message = "日志路径不为空")
    @Size(min = 1,max = 2000)
    @Column
    private String logFilePath;

    @NotEmpty(message = "ip地址不为空")
    @Size(min = 1,max = 100)
    @Column
    private String ipAddress;

    @NotEmpty(message = "规则编码不为空")
    @Column
    private Long ruleId;

    @Column
    private Long enableGrok;

    @Size(min = 1,max = 2000)
    @Column
    private String grokPattern;

    @Size(min = 1,max = 2000)
    @Column
    private String builtInPattern;

    @Column(name = "is_enabled")
    private Long enabled;
    
    省略getter和setter
}

创建Mapper类及Service和它的实现类

这一部分的开发与上面类似。hap提供了单表的crud，其实在这里不需要写mapper中方法的。
hpa中@Where注解的作用就是提供数据库查询筛选条件。

下面是mapper的定义：

public interface HeaderMapper extends Mapper<Header>{}

public interface LineMapper extends Mapper<Line>

这是service的定义：

public interface LineService extends IBaseService<Line>, ProxySelf<Line> {}

public interface HeaderService extends IBaseService<Header>, ProxySelf<Header>

service和mapper的接口开发在这里都不需要写方法的，我在我的demo中写了没有删（有点懒）

下面是service的实现类：其中最需要注意的就是多表crud用hap默认的mapper提供的方法如何实现。多表的操作方法都是要重新写的。

/**
 * 注意这里的三个注解@Service @Transactional @Dataset
 */
@Service
@Transactional(rollbackFor = Exception.class)
@Dataset("HeaderDemo")
public class HeaderServiceImpl extends BaseServiceImpl<Header> implements HeaderService, IDatasetService<Header> {

    @Autowired
    private HeaderMapper headerMapper;

    @Autowired
    private LineMapper lineMapper;


    /**
     * 该方法未用到
     * @param headerDTO
     * @return
     */
    @Override
    public List<Header> listHeaders(HeaderDTO headerDTO) {
        return headerMapper.listHeadersByDTO(headerDTO);
    }


    /**
     * 该类实现了IDatasetService<Header>接口，重写了queries方法
     * 在其中自己组合了where查询条件，调用父类的查询方法
     * @param body
     * @param page
     * @param pageSize
     * @param sortname
     * @param isDesc
     * @return
     */
    @Override
    public List<?> queries(Map<String, Object> body, int page, int pageSize, String sortname, boolean isDesc) {
        try {
            Header header = new Header();
            BeanUtils.populate(header,body );
            Criteria criteria = new Criteria(header);
            criteria.where(new WhereField(Header.FIELD_APPLICATION_HEADER_ID),
                    new WhereField(Header.FIELD_APPLICATION_HEADER_CODE, Comparison.LIKE),
                    new WhereField(Header.FIELD_APPLICATION_HEADER_NAME,Comparison.LIKE),
                    new WhereField(Header.FIELD_APPLICATION_HEADER_DESC,Comparison.LIKE),
                    new WhereField(Header.FIELD_APPLICATION_HEADER_ENABLED,Comparison.LIKE));
            return super.selectOptions(header,criteria,page,pageSize );
        } catch (Exception e) {
            throw new DatasetException("dataset.error", e);
        }
    }

    /**
     * 自写插入方法
     * 头行结构，因为前段保存的时候回操作两张表，我们需要自己组合写方法
     * @param header
     * @return
     */
    private Header insertHeader(Header header) {
        List<Line> lines = header.getLines();
        headerMapper.insertSelective(header);
        if (lines.size() != 0) {
            for (Line line:lines
            ) {
                line.setApplicationHeaderId(header.getApplicationHeaderId());
                lineMapper.insert(line);
            }
        }
        return header;
    }

    /**
     * 自写更新方法
     * @param header
     * @return
     */
    private Header updateHeader(Header header) {
        List<Line> lines = header.getLines();
        headerMapper.updateByPrimaryKey(header);
        if (lines.size() != 0 ) {
            for (Line line: lines
                 ) {
                if (line.getApplicationHeaderId() != null) {
                    lineMapper.updateByPrimaryKey(line);

                }else {
                    line.setApplicationHeaderId(header.getApplicationHeaderId());
                    lineMapper.insert(line);
                }
            }
        }
        return header;
    }


    /**
     * 自写删除方法
     * @param header
     */
    private void deleteHeader(Header header) {
        Long applicationHeaderId = header.getApplicationHeaderId();
        lineMapper.deleteLineByHeaderId(applicationHeaderId);
        headerMapper.delete(header);
    }

    /**
     * 实现了IDatasetService<Header>接口，通过前端传的对应的status值来执行操作
     * 增删改都用自己的方法，因为是多表进行操作
     * @param list
     * @return
     */
    @Override
    public List<Header> mutations(List<Header> list) {
        for (Header header : list) {
            switch (header.get__status()) {
                case ADD:
                    insertHeader(header);
                    break;
                case DELETE:
                    deleteHeader(header);
                    break;
                case UPDATE:
                    updateHeader(header);
                    break;
                default:
                    break;
            }
        }
        return list;
    }
}

LineService的实现类：我个人认为这个demo的前端没有用到其中mutations方法，这里只用了它的查询。行的增删改都夹在了头的操作中

@Service
@Transactional(rollbackFor = Exception.class)
@Dataset("LineDemo")
public class LineServiceImpl extends BaseServiceImpl<Line> implements LineService, IDatasetService<Line> {

    @Autowired
    private LineMapper lineMapper;

    /**
     * 该方法没有用到
     * @param headerId
     * @return
     */
    @Override
    public List<Line> listLinesByHeaderId(Long headerId) {
        return lineMapper.listLinesByHeaderId(headerId);
    }

    /**
     * 实现IDatasetService<Header>接口，重写父类方法；使用父类的查询方法进行查询操作
     * @param body
     * @param page
     * @param pageSize
     * @param sortname
     * @param isDesc
     * @return
     */
    @Override
    public List<?> queries(Map<String, Object> body, int page, int pageSize, String sortname, boolean isDesc) {
        try {
            Line line = new Line();
            BeanUtils.populate(line, body);
            Criteria criteria = new Criteria(line);
            return super.selectOptions(line, criteria);
        } catch (Exception e) {
            throw new DatasetException("dataset.error", e);
        }
    }

    /**
     * 实现IDatasetService<Header>接口，重写父类方法；使用父类的更新方法操作
     * @param list
     * @return
     */
    @Override
    public List<Line> mutations(List<Line> list) {
        for (Line line :list
             ) {
            switch (line.get__status()) {
                case ADD:
                    lineMapper.insertSelective(line);
                    break;
                case DELETE:
                    lineMapper.delete(line);
                    break;
                default:
                    break;
            }
        }
        return list;
    }
}

Controller开发

HeaderController：我感觉这个查询方法并没有用到，因为在service的实现queries中就写了这个方法，而且通过xlsx添加进数据库就映射的有这个queries；并且前端的查询就是通过Dataset访问的。

demo重新开发queries.png

@RestController
@RequestMapping("/log-warn/header")
public class HeaderController extends BaseController {


    @Autowired
    private HeaderService headerService;

    /**
     * 利用实体类上@Where注解来组合查询筛选条件
     * @param header
     * @param page
     * @param pageSize
     * @param request
     * @return
     */
    @Permission(type = ResourceType.SITE)
    @PostMapping("/query")
    public ResponseData query(Header header, @RequestParam(defaultValue = DEFAULT_PAGE) int page,
                              @RequestParam(defaultValue = DEFAULT_PAGE_SIZE) int pageSize, HttpServletRequest request) {
        Criteria criteria = new Criteria(header);
        criteria.where(new WhereField(Header.FIELD_APPLICATION_HEADER_ID),
                new WhereField(Header.FIELD_APPLICATION_HEADER_CODE, Comparison.LIKE),
                new WhereField(Header.FIELD_APPLICATION_HEADER_NAME,Comparison.LIKE),
                new WhereField(Header.FIELD_APPLICATION_HEADER_DESC,Comparison.LIKE),
                new WhereField(Header.FIELD_APPLICATION_HEADER_ENABLED,Comparison.LIKE));
        return new ResponseData(headerService.selectOptions(header,criteria,page,pageSize ));
    }


}

LineController开发：它的查询方法和上面类似，我感觉没有用到；因为都在service的实现类中写了，前端访问的也是Dataset的查询方法

@RestController
@RequestMapping("/log-warn/line")
public class LineController extends BaseController {
    @Autowired
    private LineService service;

    /**
     * 查头的同时会调用这个方法查出头对应的行
     * @param line
     * @param request
     * @return
     */
    @Permission(type = ResourceType.SITE)
    @PostMapping("/query")
    public ResponseData query(Line line, HttpServletRequest request) {
        IRequest requestContext = createRequestContext(request);
        Criteria criteria = new Criteria(line);
        return new ResponseData(service.selectOptions(line, criteria));
    }
}

前端开发

store包下的开发：
HeaderDataSet.js
LineDataSet.js

先来HeaderDataSet：其中需要注意的就是enabled这个属性了，它在前端是boolean类型，不过对应的值是后端类型中的Long；所以trueValue的值就要写后端对应的类型


export default {
  primaryKey: 'applicationHeaderId',
  name: 'HeaderDemo',
  autoQuery: true,
  pageSize: 20,
    fields: [
        {name: 'applicationCode', type: 'string', label: '应用编码', require: true, unique: true},
        {name: 'applicationName', type: 'string', label: '应用名称'},
        {name: 'applicationDesc', type: 'string', label: '应用描述'},
        { name: 'enabled', type: 'boolean', label: '是否启用', trueValue: 1, falseValue: 0, defaultValue: 1 },
    ],
    //查询字段，自动生成查询组件
    queryFields: [
        {name: 'applicationCode', type: 'string', label: '应用编码'},
        {name: 'applicationName', type: 'string', label: '应用名称'},
        {name: 'applicationDesc', type: 'string', label: '应用描述'},
        {name: 'enabled', type: 'string', label: '是否启用', lookupCode: 'HEADER.ENABLED'},
    ],
};

LineDataSet.js

export default {
  name: 'LineDemo',
  fields: [
    { name: 'ipAddress', type: 'string', label: 'IP地址', required: true },
    { name: 'logFilePath', type: 'string', label: '日志路径', required: true },
    { name: 'ruleId', type: 'number', label: '告警规则',},
    { name: 'enabled', type: 'boolean', label: '是否启用', trueValue: 1, falseValue: 0, defaultValue: 1 },
  ],
};

view包下开发：
CodeRule.js
CodeRuleModal.js

先来CodeRule.js，这里它对应的前端头，渲染的也是前端头表格

import React from 'react';
import {Button, IntlField, Modal, Table, Tooltip} from 'choerodon-ui/pro';
import CodeRuleModal from './CodeRuleModal';

const { Column } = Table;
const modalKey = Modal.key();

export default ({ headerDS, lineDS }) => {
  let isCancel;
  let created;

  /**
   * 确定编码规则编辑修改
   * 数据校验成功时保存
   */
  async function handleOnOkCodeRuleModal() {
    isCancel = false;
    if (await headerDS.current.validate()) {
      await headerDS.submit();
    } else {
      return false;
    }
  }

  function handleOnCancelCodeRuleModal() {
    isCancel = true;
  }

  /**
   * 关闭编码规则弹窗.
   *
   */
  function handleOnCloseCodeRuleModal() {
    if (isCancel) {
      // 新建时取消，移除dataSet记录
      if (created) {
        headerDS.remove(created);
      } else {
        // 修改时取消 重置当前记录数据
        headerDS.current.reset();
        lineDS.reset();
      }
    }
    // 重置新建记录标记
    created = null;
  }

  /**
   * 打开编码规则弹窗.
   * @param applicationHeaderId 头Id
   * @param enabled 是否启用
   */
  function openCodeRuleModal(applicationHeaderId, enabled) {
    if (!applicationHeaderId) {
      created = headerDS.create();
    }
    // 如果是编辑状态 编码不可编辑
    const isEditDisabled = !!applicationHeaderId;
    // 如果为启用状态 只可以进行查看 不能编辑数据
    const isEnableDisabled = (isEditDisabled) && (enabled === 1);
    // 如果为启用状态 编码规则行，不可被选中
    lineDS.selection = isEnableDisabled ? false : 'multiple';
    Modal.open({
        //唯一键， 当destroyOnClose为false时，必须指定key。
        // 为了避免与其他modal的key重复，可通过Modal.key()来获取唯一key。
      key: modalKey,
        //标题
      title: applicationHeaderId ? '编辑' : '添加',
        //抽屉模式
      drawer: true,
        //关闭时是否销毁
      destroyOnClose: true,
        //同时显示ok和cancel按钮，false的时候只显示ok按钮
      okCancel: !isEnableDisabled,
        //确认按钮文字
      okText: !isEnableDisabled ? '保存' : '关闭',
        //点击确定回调，返回false Promise.resolve(false)或
        // Promise.reject()不会关闭， 其他自动关闭
      onOk: !isEnableDisabled ? handleOnOkCodeRuleModal : handleOnCancelCodeRuleModal,
        //点击取消回调，返回false Promise.resolve(false)或
        // Promise.reject()不会关闭， 其他自动关闭
      onCancel: handleOnCancelCodeRuleModal,
        //关闭后回调
      afterClose: handleOnCloseCodeRuleModal,
      children: (
        <CodeRuleModal headerDS={headerDS} lineDS={lineDS} isEditDisabled={isEditDisabled} isEnableDisabled={isEnableDisabled} />
      ),
      style: {
        width: 1100,
      },
    });
  }

  const addBtn = (
    <Button
      icon="playlist_add"
      funcType="flat"
      color="blue"
      onClick={() => openCodeRuleModal(null, null)}
    >
      {'添加'}
    </Button>
  );

  /**
   * 渲染表格内容.
   */
  return (
    <Table buttons={[addBtn, 'save', 'delete']} dataSet={headerDS} queryFieldsLimit={4}>
        <Column name="applicationCode"  />
        <Column name="applicationName" editor />
        <Column name="applicationDesc" editor />
      <Column name="enabled" editor align="center" width={120} />
      <Column
        header={'操作'}
        align="center"
        width={120}
        renderer={({ record, text, name }) => {
          const title = record.get('enabled') === 1 ? '观看' : '编辑';
          const icon = record.get('enabled') === 1 ? 'visibility' : 'mode_edit';
          return (
            <Tooltip
              title={title}
            >
              <Button
                funcType="flat"
                icon={icon}
                onClick={() => openCodeRuleModal(record.get('applicationHeaderId'), record.get('enabled'))}
              />
            </Tooltip>
          );
        }}
      />
    </Table>
  );

};

CodeRuleModal.js是行的实现

import React from 'react';
import {CheckBox, Form, Table, TextField} from 'choerodon-ui/pro';

const { Column } = Table;

export default ({ headerDS, lineDS, isEditDisabled, isEnableDisabled }) => {
    let btnGroup = [];
  if (!isEnableDisabled) {
    btnGroup = ['add', 'delete'];
  }

  return (
    <div>
      <Form
        columns={2}
        abelWidth={100}
      >
        <TextField name="applicationCode" label={'应用编码'} dataSet={headerDS} required disabled={isEditDisabled} />
        <TextField name="applicationName" label={'应用名称'} dataSet={headerDS} disabled={isEnableDisabled} />
        <TextField name="applicationDesc" label={'应用描述'} dataSet={headerDS}  disabled={isEnableDisabled} />
        <CheckBox name="enabled" label={'是否启用'} dataSet={headerDS} disabled={isEnableDisabled} />
      </Form>
      <Table
        buttons={btnGroup}
        dataSet={lineDS}
        header={'行'}
      >
        <Column name="ipAddress"  label={'IP地址'} editor/>
        <Column name="logFilePath" label={'日志文件目录'} editor />
        <Column name="ruleId" label={'日志规则'} editor />
          <Column name="enabled" label={'是否启用'} editor align="center" width={120}/>
      </Table>
    </div>
  );
};

最后来一个index.js

import React, { PureComponent } from 'react';
import { DataSet } from 'choerodon-ui/pro';
import { ContentPro as Content } from '@choerodon/boot';
import HeadDataSet from './store/HeadDataSet';
import LineDataSet from './store/LineDataSet';
import CodeRule from './view/CodeRule';

export default class Index extends PureComponent {
    lineDS = new DataSet(LineDataSet);

    headerDS = new DataSet({
        ...HeadDataSet,
        children: {
            lines: this.lineDS,
        },

    });

    render() {
        return (
            <Content>
                <CodeRule headerDS={this.headerDS} lineDS={this.lineDS} />
            </Content>
        );
    }
}

还有一个RoutIndex.js

import React, { Component } from 'react';
import CacheRoute, { CacheSwitch } from 'react-router-cache-route';
import { asyncRouter, nomatch } from '@choerodon/boot';

const Grid = asyncRouter(() => import('./src/grid'));
const Header = asyncRouter(() => import('./src/logwarn'))

export default ({ match }) => (
  <CacheSwitch>
    <CacheRoute exact path={`${match.url}/grid`} cacheKey={`${match.url}/grid`} component={Grid} />
    <CacheRoute exact path={`${match.url}/log-warn`} cacheKey={`${match.url}/log-warn`} component={Header} />
    <CacheRoute path="*" component={nomatch} />
  </CacheSwitch>
);

前端不太会，只能仿照编码规则的前端来写。

xlsx的配置

主要配置的是 permission menu role_permission三个sheet页。需要配置与路由对应

permission：

demo重新开发xlsx1.png
menu：

demo重新开发xlsx2.png

总结

这个demo的开发代码已经传到了码云上，下次遇到同样的可以试着仿照来写。这里面比较难搞的就是前端，后端只要把头行结构的增删改的逻辑写好就行。

hap开始之旅

开发环境

新建数据库

数据源配置

新建项目

新建3.0项目

确定使用的数据库类型

编译整个项目

修改redis地址

观看HAP环境搭建视频

包结构

创建类继承

ssm

定时器

webService

logger打印信息到控制台

好吧，hap4.0更新了，该学4.0了

新建项目

确定本项目使用到的数据库

初始化数据和表结构

后端开发

DTO定义

Mapper层

Service层

前端开发

DEMO开发

项目结构问题

项目创建步骤

前端开发

总结

Demo再开发

项目结构

后端开发

pom文件及前端config.js修改

实体类

创建Mapper类及Service和它的实现类

Controller开发

前端开发

xlsx的配置

总结

猜你喜欢

热点阅读