操作数据库

H5DW能够方便实现数据库的增删改查。H5DW属于前端组件，大家都知道出于安全性考虑前端组件都不会直接操作数据库（想想被人在浏览器中通过更改SQL语句数据库数据都没了，是什么体验）。前端组件一般通过调用后台接口来操作数据库。

下面介绍H5DW如何与数据库交互。

1. 设置事务

H5DW和PB的数据窗口一样，通过事务和数据库交互，需要设置H5DW的事务对象

dw1.setTransObject(db);

这里的事务对象db其实是一个代理，定义了查询和更新方法，在方法中调用服务端的webapi实现

<script>
   axios.defaults.baseURL = 'http://127.0.0.1:5555/erp';
   let db = {
    async retrieveDW(sql,...arg) {
        //数据窗口retrieve时会调用，在客户端实际与服务器对接
        console.log('请求Key:',sql,...arg);
        let ret = await  axios.post('/h5dw/retrieve',{key:sql,args:arg});
        if (ret.status === 200) {
          return ret.data.data;
        } else {
          return [];
        }

        //返回的数据示例
        // return [
        //   { id: 1, name: `name1`, price: 10.01 },
        //   { id: 2, name: `name1`, price: 10.01 dt: '2022-09-02 16:08:10' },
        //   { id: 3, name: `name4`, price: 16.00}
        // ];
    },
    async updateDW(key, data) {
        // data只包括变化的数据，根据标记可以区分新增、修改、删除
        // data的数据格式,其中status类型为DWItemStatus = {"NotModified":0,"DataModified":1,"New":2,"NewModified":3}
        // {
        //     "key": "customers",
        //     "data": {
        //         "primaryData": [
        //             {"status": 3,"data": {"name": "你好"},"modifiedcols": {"name": null}},
        //             {"status": 1,"data": {"id": "BLAUS","name": "森通123","price": 10.1,"dt": null},"modifiedcols": {"name": "森"}}
        //         ],
        //         "deleteData": [
        //             {"status": 0,"data": {"id": "ANTON","name": "坦森行贸易","price": 12.5,"dt": null}}
        //         ]
        //     }
        // }
        
        console.log('update',key,data);
        let ret = await axios.post('/h5dw/update',{key,data});
        if (ret.status === 200) {
          return ret.data.code;
        }
        return 1;
    },
 };
   dw1.setTransObject(db);
</script>

2. 查询

H5DW的retrieve方法会调用事务对象的retrieveDW方法，在retrieveDW方法中调用服务端接口实现数据库查询。

dw1.retrieve();

有参数的查询

dw1.retrieve('小明',1);

3. 新增

可以调用api进行新增操作

// 在当前选中行前插入一行
dw1.insertRow(0);

// 在第二行前插入一行
dw1.insertRow(2);

4. 删除

可以调用api进行删除操作

//删除第1行
dw1.deleteRow(1);

//删除当前行
dw1.deleteRow(0);

5. 编辑

H5DW支持数据的编辑，用户可以直接点击要编辑的单元格数据进行编辑。

6. 更新

增删改都不会马上更新数据库，而是通过调用update方法后提交到服务端进行更新。

dw1.update();

H5DW的update方法会调用事务对象的updateDW方法，在updateDW方法中调用服务端接口实现数据库更新。

7. 增删改数据结构

调用update后，传入事务对象的updateDW方法的数据只包括变化的数据，没有变化的数据不会传入。 数据结构 如下：

// 其中status类型为DWItemStatus = {"NotModified":0,"DataModified":1,"New":2,"NewModified":3}
{
    "key": "customers",
    "data": {
        "primaryData": [
            {"status": 3,"data": {"name": "你好"},"modifiedcols": {"name": null}},
            {"status": 1,"data": {"id": "BLAUS","name": "森通123","price": 10.1,"dt": null},"modifiedcols": {"name": "森"}}
        ],
        "deleteData": [
            {"status": 0,"data": {"id": "ANTON","name": "坦森行贸易","price": 12.5,"dt": null}}
        ]
    }
}

如果是自己的服务端，服务端可以根据格式，进行数据库更新操作，也可以配合satserver进行数据库更新操作。