文档章节

jeecg项目数据库数据与页面数据双向交互

o
 osc_isezqdgg
发布于 2019/09/18 12:18
字数 1254
阅读 27
收藏 0

精选30+云产品,助力企业轻松上云!>>>

jeecg 项目的三大技术框架 mybaties,springboot,vue;

数据库数据如何显示到界面上,页面数据又如何保存到数据库中,还是高先生摸索出来的,佩服。

jeecg 分三层架构 mapper层与数据库打交道,controller层与页面打交道,server层处理一些业务逻辑(我们很多业务逻辑也在controller层处理了,比如给让某两个量或多个量之间做四则运算,这里应该是四则运算计算完后直接给实体类属性赋值,在server层当下用过的有使用@DB("")注解选择数据源,生成任务单编号;

三层架构连同一个实体类布局图

                                    

 

 

 mapper层定义接口,接口映射到xml文件中。service层会写成接口,再有接口的实现类,使用抽象的方法,只关注一个黑盒子的输入输出,而不在意其中实现细节。调用时直接调用接口就好,不用管接口的实现过程,工程中大多是面向接口编程,其它地方用到这个接口的功能,调用接口就好,无需知道其中的细节。

具体的数据库数据和前端页面数据的交互过程:

以查出老化装置的信息为例:

1.mapper层写好与数据库的交互,

StatisticsAndQueryMapper.java 中写好

//根据装置编号查询老化装置详细信息
public List<GxAgingDevice> queryAgingDeviceByDeviceCode(@Param("deviceCode") String deviceCode);
@Param("deviceCode")注解对应到sql语句中的参数名  #{deviceCode}

StatisticsAndQueryMapper.xml 中写好

<select id="queryAgingDeviceByDeviceCode" parameterType="java.lang.String"
resultType="org.jeecg.modules.gxagingdevice.entity.GxAgingDevice">
select
a.device_code,a.device_name,a.device_ip,a.aging_kind,a.isQualified,a.task_code,b.own_order
FROM
gx_aging_device a JOIN gx_device_main b ON a.device_code =
b.device_code
where a.device_code = #{deviceCode}
</select>

注意 StatisticsAndQueryMapper.xml 中id必须和StatisticsAndQueryMapper.java 中接口名一致,

parameterType="java.lang.String"传入的参数类型,
resultType="org.jeecg.modules.gxagingdevice.entity.GxAgingDevice" 返回值类型,返回的是一个实体类的还,鼠标浮到上面,按住ctrol+鼠标左键可跳转到实体类。

 

实体类GxAgingDevice.java中写好

@Data
@TableName("gx_aging_device")
public class GxAgingDevice implements Serializable {
    private static final long serialVersionUID = 1L;
    
    /**主键*/
    @TableId(type = IdType.UUID)
    private java.lang.String id;
    /**装置编号*/
    @Excel(name = "装置编号", width = 15)
    private java.lang.String deviceCode;
    /**装置名称*/
    @Excel(name = "装置名称", width = 15)
    private java.lang.String deviceName;
    /**IP地址*/
    @Excel(name = "IP地址", width = 15)
    private java.lang.String deviceIp;
    /**是否合格*/
    @Excel(name = "是否合格", width = 15)
    private java.lang.String isqualified;
    /**所属任务*/
    @Excel(name = "所属任务", width = 15)
    private java.lang.String taskCode;
    /**老化类别*/
    @Excel(name = "老化类别", width = 15)
    private java.lang.String agingKind;
    /**老化温度*/
    @Excel(name = "老化温度", width = 15)
    private java.lang.String agingTemparature;
    /**老化时长*/
    @Excel(name = "老化时长", width = 15)
    private java.lang.String agingDuration;
    /**起始时间*/
    @Excel(name = "起始时间", width = 15)
    private java.lang.String startTime;
    /**define1*/
    @Excel(name = "人员", width = 15)
    private java.lang.String donePerson;
    /**define2*/
    @Excel(name = "所属订单", width = 15)
    private java.lang.String ownOrder;
    /**define3*/
    @Excel(name = "define3", width = 15)
    private java.lang.String define3;
    /**define4*/
    @Excel(name = "define4", width = 15)
    private java.lang.String define4;
    
    
    
    
}
View Code

这个实体类是代码生成器生成的,很多注解不需要加也可以正常使用。

 

2.service层写好逻辑

这里不需要特别的逻辑,生命一下就行

IStatisticsAndQueryService.java中写好

//根据装置编号查询老化装置详细信息
        public List<GxAgingDevice> queryAgingDeviceByDeviceCode( String deviceCode);

StatisticsAndQueryServiceImpl.java中写好

@Override
    public List<GxAgingDevice> queryAgingDeviceByDeviceCode(String deviceCode) {
        // TODO Auto-generated method stub
        return this.statisticsAndQueryMapper.queryAgingDeviceByDeviceCode(deviceCode);
    }

3.controller层

@RestController
@RequestMapping("/stasticsandquery/stasticsAndQuery")
@Slf4j
public class StatisticsAndQueryController {
@Autowired
private IStatisticsAndQueryService IStatisticsAndQueryService;

@PostMapping(value = "queryAgingDeviceByDeviceCode")
    public Result<List<GxAgingDevice>> queryAgingDeviceByDeviceCode(){
        System.out.println("queryAgingDeviceByDeviceCode开始");
        Result<List<GxAgingDevice>> result = new Result<List<GxAgingDevice>>();
        List<GxAgingDevice> lists = this.IStatisticsAndQueryService.queryAgingDeviceByDeviceCode(this.deviceCode);
        System.out.println("queryAgingDeviceByDeviceCode");
        System.out.println(lists);
        result.setResult(lists);
        result.setSuccess(true);    
        return result;
    }

}

@PostMapping 对应前端postAction      @GetMapping对应前端getAction    

在controller类头需加注解

@RestController
@RequestMapping("/stasticsandquery/stasticsAndQuery")
@Slf4j

 

@PostMapping(value = "queryAgingDeviceByDeviceCode")前后端交互路径

4.vue前端

在data()中写好url 对应后端 声明一个数组来接收后端传来的list类集合

data() {

return {
  AgingDevice:[],
  url:{ queryAgingDeviceByDeviceCode:"/stasticsandquery/stasticsAndQuery/queryAgingDeviceByDeviceCode", },
 }
}

 

created()方法为点开页面的时候就执行里面的方法
调用postAction 把后端的结果赋值给数组
AgingDevice
 created() {
      this.loadData();
    },
    methods: {
      loadData() {
        postAction(this.url.queryAgingDeviceByDeviceCode).then((res) => {
          if (res.success) {
            this.AgingDevice = res.result;      
          }
        })
      },
    }

 

在table中注册数据源为 AgingDevice

<a-table
        :columns="columns"
        :dataSource="AgingDevice"
      >

 

在columns中给相应列dataIndex复值为类GxAgingDevice中的属性

 columns: [{
          title: '装置编号',
          dataIndex: 'deviceCode',
          key: 'id'
        }, {
          title: '装置名称',
          dataIndex: 'deviceName',
          key: 'name'
        }, {
          title: 'IP地址',
          dataIndex: 'deviceIp',
          key: 'ip'
        }, {
          title: '老化类别',
          dataIndex: "agingKind"
        }, {
          title: '测试结果',
          dataIndex: 'isqualified',
          key: 'result'
        },
        /*  {
            title:'人员',
            dataIndex:"donePerson"
          },*/

          {
          title:'所属任务',
          dataIndex:"taskCode"
        },
          {
            title:'所属订单',
            dataIndex:"ownOrder"
          }
        /*,{
          title:'时间',
          dataIndex:"time"
        }*/],

这样就实现了数据库数据传到页面显示。

 

前端页面数据传到后端过程类似,也是通过getAction和postAction方法

要注意下注解 把参数传到后端用@RequestParam(name="") name对应前端参数的名字

 

passDeviceCode(record){
        var param = {};
          param.deviceCode = record.deviceCode;
        console.log( record.deviceCode);
        getAction(this.url.passDeviceCode,param);
      }

 

//前端传过来的装置编号,用于查询装置的在各工序的详细信息
    @GetMapping(value = "/passDeviceCode")
    public void passDeviceCode(@RequestParam(name="deviceCode") String deviceCode){
        System.out.println(deviceCode);
        this.deviceCode = deviceCode;
    }

 

把实体类传到后端用@RequestBody
postAction(this.url.saveTask,this.Task)
public Result<Boolean> save(@RequestBody Task task){

前后端实体类的属性名和属性格式(比如时间)都要对应好。

目前发现传参的时候用getAction,传实体类的时候用postAction。




 

 

 



 

o
粉丝 0
博文 500
码字总数 0
作品 0
私信 提问
加载中
请先登录后再评论。
使用JEECG心得

使用jeecg-boot心得: Jeect-boot,采用主流最新的开发技术,是个强大的快速开发平台。 刚开始发现jeecg-boot时便对其精致美观的页面深深的迷住了。下载项目运行发现其中也有想要的按钮权限功...

心者星哲
2019/06/29
42
0
使用jeecg-boot心得

使用jeecg-boot心得: Jeect-boot,采用主流最新的开发技术,是个强大的快速开发平台。 刚开始发现jeecg-boot时便对其精致美观的页面深深的迷住了。下载项目运行发现其中也有想要的按钮权限功...

osc_tfyi1pmt
2019/06/30
4
0
开发指南专题三:JEECG微云快速开发平台项目编码规范

开发指南专题三:JEECG微云快速开发平台项目编码规范 4. 项目编码规范 4.1. 项目编码规范 1. 项目编码格式为UTF-8(包括:java,jsp,css,js) 2. sevice接口命名:*Service service实现命名:*Se...

DavidBao
2015/01/01
113
0
JEECG快速开发框架学习

JEECG开源代码地址:http://git.oschina.net/jeecg/jeecg JEECG开源社区地址:http://www.jeecg.org/ JEECG开发指南:http://www.jeecg.org/book/jeecgv3.html 前言: 随着WEB UI 框架(Easy......

fatwowzb
2015/04/03
1.4K
0
关于JEECG

使用JEECG心得 我就不做JEECG的介绍了,提供一个网址,可以更加清晰的了解JEECG文档。 http://www.jeecg.org/book/jeecg_v3.html 用JEECG已经差不多一年时间了,期间涉及到好多版本,也见证了...

ren766
2014/05/06
196
0

没有更多内容

加载失败,请刷新页面

加载更多

使用命名管道承载gRPC

最近GRPC很火,感觉整RPC不用GRPC都快跟不上时髦了。 gRPC设计 gRPC是一种与语言无关的高性能远程过程调用 (RPC) 框架。刚好需要使用一个的RPC应用系统,自然而然就盯上了它,但是它真能够解...

osc_nq69o22c
47分钟前
16
0
06-敏捷开发框架-apis 脚本库 引用位置无关性设计

动态引入技术的设计,对我们来说非常重要。 同时也说明动态语言的使用对我们来说也是非常重要。 没有动态语言的支撑,有些想法可能不容易实现,或者有替代方案,可能会花更大的代价。 前端开...

osc_5zg9z6t1
49分钟前
21
0
(三)学习了解OrchardCore笔记——灵魂中间件ModularTenantContainerMiddleware的第一行①的模块部分

  了解到了OrchardCore主要由两个中间件(ModularTenantContainerMiddleware和ModularTenantRouterMiddleware)构成,下面开始了解ModularTenantContainerMiddleware中间件第一行代码。   ...

osc_kdarxvx0
50分钟前
15
0
50Mn18Cr4V锻锻环件

电机无磁护环怎么锻性能才能《高高》?50Mn18Cr4V高锰无磁钢在变形温度为900~1 100℃、应变速率为0.1 ~10s-1条件下的热变形行为. 结果,VC第二相的应变诱导析出对50Mn18Cr4V的热变形行为产生...

无磁钢
51分钟前
16
0
【遇见offer】一汽-大众实习生专场来啦!成长+学习+福利,一个也不能少~

在上次一汽-大众的社招直播之后,实习生的专场招聘也终于来啦! 针对2020年暑期,我们提供了非常多的实习岗位给大家选择。 如果你想得到大厂实习的宝贵经验,如果你想得到更快速的成长,如果...

osc_b88oux8w
52分钟前
25
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部