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

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

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

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

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

                                    

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

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

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

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

StatisticsAndQueryMapper.java 中写好

//根据装置编号查询老化装置详细信息

public List queryAgingDeviceByDeviceCode(@Param("deviceCode") String deviceCode);

@Param("deviceCode")注解对应到sql语句中的参数名 #{deviceCode}

StatisticsAndQueryMapper.xml 中写好

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}

注意 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 implementsSerializable {private static final long serialVersionUID = 1L;/**主键*/@TableId(type=IdType.UUID)privatejava.lang.String id;/**装置编号*/@Excel(name= "装置编号", width = 15)privatejava.lang.String deviceCode;/**装置名称*/@Excel(name= "装置名称", width = 15)privatejava.lang.String deviceName;/**IP地址*/@Excel(name= "IP地址", width = 15)privatejava.lang.String deviceIp;/**是否合格*/@Excel(name= "是否合格", width = 15)privatejava.lang.String isqualified;/**所属任务*/@Excel(name= "所属任务", width = 15)privatejava.lang.String taskCode;/**老化类别*/@Excel(name= "老化类别", width = 15)privatejava.lang.String agingKind;/**老化温度*/@Excel(name= "老化温度", width = 15)privatejava.lang.String agingTemparature;/**老化时长*/@Excel(name= "老化时长", width = 15)privatejava.lang.String agingDuration;/**起始时间*/@Excel(name= "起始时间", width = 15)privatejava.lang.String startTime;/**define1*/@Excel(name= "人员", width = 15)privatejava.lang.String donePerson;/**define2*/@Excel(name= "所属订单", width = 15)privatejava.lang.String ownOrder;/**define3*/@Excel(name= "define3", width = 15)privatejava.lang.String define3;/**define4*/@Excel(name= "define4", width = 15)privatejava.lang.String define4;

}

View Code

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

2.service层写好逻辑

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

IStatisticsAndQueryService.java中写好

//根据装置编号查询老化装置详细信息

public List queryAgingDeviceByDeviceCode( String deviceCode);

StatisticsAndQueryServiceImpl.java中写好

@Overridepublic ListqueryAgingDeviceByDeviceCode(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>queryAgingDeviceByDeviceCode(){

System.out.println("queryAgingDeviceByDeviceCode开始");

Result> result = new Result>();

List lists = this.IStatisticsAndQueryService.queryAgingDeviceByDeviceCode(this.deviceCode);

System.out.println("queryAgingDeviceByDeviceCode");

System.out.println(lists);

result.setResult(lists);

result.setSuccess(true);returnresult;

}

}

@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

>

在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 save(@RequestBody Task task){

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

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