Spring Boot 项目实例笔记

 

一.基础环境配置

---

1.开发环境为eclipse Oxygen.3 Release(4.7.3)，spring boot 插件可以从Ecplise Marketplace下载 ，不过最近总是搜索不到；还可以从springboot官网下载，找到适用于eplise版本的插件直接下载就ok了。

下载后的安装包不需要解压，springsource-tool-suite-3.9.2.RELEASE-e4.7.2-updatesite.zip。

接下来就是如何将插件导入eplise开发环境中，进入Eclipse --> Help--> Install new Sofware,

点击Add，找到本地的插件，这里只安装结尾带有 IDE 的部分，

选中需要安装的，点击Next进行安装，过程中接受license，这里略过安装过程。

---

2.从ecplise Marketplace中查找安装 MyBatis Generator 1.3.7，这里已经安装过了，显示为installed

3.数据库采用的是MySQL 5.7.2，第三方软件使用的NaviCat

---

二.新建springboot项目

1.Flie --> New --> Other --> Spring Boot --> Spring Starter Project

---

2.项目结构

---

三.Java后台代码

1.配置依赖 pom.xml(部分)

---

2.工程目录 src/main/resources/config/init.sql，此文件是数据库文件，存放sql语句

DROP TABLE IF EXISTS `t_pis`;
CREATE TABLE `t_pis` (
  `PIS_ID` bigint(20) NOT NULL AUTO_INCREMENT COMMENT '主键 PIS_ID',
  `PIS_AREAR` varchar(100) NOT NULL COMMENT '区域位置',
  `DEVICE_ID` varchar(100) NOT NULL COMMENT '设备编号',
  `DEVICE_STATE` char(1) DEFAULT NULL COMMENT '设备状态 0：正常；1：故障',
  `INFO_TYPE` char(1) DEFAULT NULL COMMENT '信息类型  0：正常；1：紧急',
  `START_TIME` datetime DEFAULT NULL COMMENT '开始时间',
  `END_TIME` datetime DEFAULT NULL COMMENT '结束时间',
  `TEXT` varchar(150) DEFAULT NULL COMMENT '发布信息'
  PRIMARY KEY (`PIS_ID`)
) ENGINE=InnoDB AUTO_INCREMENT=1 DEFAULT CHARSET=utf8;

可以复制到NaviCat软件中运行，结果如下：

---

3.打开工程目录src/main/resources/config/mybatis-generator.xml，配置需要生成的表格

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE generatorConfiguration
    PUBLIC "-//mybatis.org//DTD MyBatis Generator Configuration 1.0//EN"
    "http://mybatis.org/dtd/mybatis-generator-config_1_0.dtd">
<generatorConfiguration>
    <context id="mysql" targetRuntime="MyBatis3Simple" defaultModelType="flat">
        <plugin type="tk.mybatis.mapper.generator.MapperPlugin">
            <property name="mappers" value="com.grape.common.config.MyMapper" />
            <!-- caseSensitive默认false，当数据库表名区分大小写时，可以将该属性设置为true -->
            <property name="caseSensitive" value="false"/>
        </plugin>
        <commentGenerator>
            <property name="javaFileEncoding" value="UTF-8"/>
            <property name="suppressDate" value="true"/>
            <property name="suppressAllComments" value="true"/>
        </commentGenerator>
        <jdbcConnection 
        	driverClass="com.mysql.jdbc.Driver" 
        	connectionURL="jdbc:mysql://127.0.0.1:3306/grape" 
        	userId="root" 
        	password="32123">
        </jdbcConnection>
        <javaTypeResolver>
            <property name="forceBigDecimals" value="false"/>
        </javaTypeResolver>
        <javaModelGenerator targetPackage="com.grape.system.domain" targetProject="grape/src/main/java">
            <property name="enableSubPackages" value="true"/>
            <property name="trimStrings" value="true"/>
        </javaModelGenerator>
        <sqlMapGenerator targetPackage="mapper" targetProject="grape/src/main/resources">
            <property name="enableSubPackages" value="true"/>
        </sqlMapGenerator>
        <javaClientGenerator type="XMLMAPPER" targetPackage="com.grape.system.dao" targetProject="grape/src/main/java">
            <property name="enableSubPackages" value="true"/>
        </javaClientGenerator>
        <!-- 配置需要生成的表 -->
        <table tableName="t_pis" domainObjectName="Pis" enableCountByExample="true" enableUpdateByExample="true" enableDeleteByExample="true" enableSelectByExample="true" selectByExampleQueryId="true">
            
            <generatedKey column="PIS_ID" sqlStatement="mysql" identity="true"/>
       		
        </table>
    </context>
</generatorConfiguration>

右键mybatis-generator.xml，Run As --> Mybatis Generator，运行后会在相应目录内生成文件：

src/main/java目录下生成PisMapper.java

src/main/reasource目录下生成 PisMapper.xml

<?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="com.grape.system.dao.PisMapper">
  <resultMap id="BaseResultMap" type="com.grape.system.domain.Pis">
    <!--
      WARNING - @mbg.generated
    -->
    <id column="PIS_ID" jdbcType="BIGINT" property="pisId" />
    <result column="PIS_AREAR" jdbcType="VARCHAR" property="pisArear" />
    <result column="DEVICE_ID" jdbcType="VARCHAR" property="deviceId" />
    <result column="DEVICE_STATE" jdbcType="CHAR" property="deviceState" />
    <result column="INFO_TYPE" jdbcType="CHAR" property="infoType" />
    <result column="START_TIME" jdbcType="TIMESTAMP" property="startTime" />
    <result column="END_TIME" jdbcType="TIMESTAMP" property="endTime" />
    <result column="TEXT" jdbcType="VARCHAR" property="text" />
  </resultMap>
</mapper>

src/main/java目录下生成Pis.java文件(此文件需要转化为utf8格式，否则会中文乱码)：

通过Mybatis框架将表格分解：

package com.grape.system.domain;

import java.util.Date;
import javax.persistence.*;

@Table(name = "t_pis")
public class Pis {
    /**
     * 主键 PIS_ID
     */
    @Id
    @Column(name = "PIS_ID")
    @GeneratedValue(strategy = GenerationType.IDENTITY)
    private Long pisId;

    /**
     * 区域位置
     */
    @Column(name = "PIS_AREAR")
    private String pisArear;

    /**
     * 设备编号
     */
    @Column(name = "DEVICE_ID")
    private String deviceId;

    /**
     * 设备状态 0：正常；1：故障
     */
    @Column(name = "DEVICE_STATE")
    private String deviceState;

    /**
     * 信息类型  0：正常；1：紧急
     */
    @Column(name = "INFO_TYPE")
    private String infoType;

    /**
     * 开始时间
     */
    @Column(name = "START_TIME")
    private Date startTime;

    /**
     * 结束时间
     */
    @Column(name = "END_TIME")
    private Date endTime;

    /**
     * 发布信息
     */
    @Column(name = "TEXT")
    private String text;

    /**
     * 获取主键 PIS_ID
     *
     * @return PIS_ID - 主键 PIS_ID
     */
    public Long getPisId() {
        return pisId;
    }

    /**
     * 设置主键 PIS_ID
     *
     * @param pisId 主键 PIS_ID
     */
    public void setPisId(Long pisId) {
        this.pisId = pisId;
    }

    /**
     * 获取区域位置
     *
     * @return PIS_AREAR - 区域位置
     */
    public String getPisArear() {
        return pisArear;
    }

    /**
     * 设置区域位置
     *
     * @param pisArear 区域位置
     */
    public void setPisArear(String pisArear) {
        this.pisArear = pisArear == null ? null : pisArear.trim();
    }

    /**
     * 获取设备编号
     *
     * @return DEVICE_ID - 设备编号
     */
    public String getDeviceId() {
        return deviceId;
    }

    /**
     * 设置设备编号
     *
     * @param deviceId 设备编号
     */
    public void setDeviceId(String deviceId) {
        this.deviceId = deviceId == null ? null : deviceId.trim();
    }

    /**
     * 获取设备状态 0：正常；1：故障
     *
     * @return DEVICE_STATE - 设备状态 0：正常；1：故障
     */
    public String getDeviceState() {
        return deviceState;
    }

    /**
     * 设置设备状态 0：正常；1：故障
     *
     * @param deviceState 设备状态 0：正常；1：故障
     */
    public void setDeviceState(String deviceState) {
        this.deviceState = deviceState == null ? null : deviceState.trim();
    }

    /**
     * 获取信息类型  0：正常；1：紧急
     *
     * @return INFO_TYPE - 信息类型  0：正常；1：紧急
     */
    public String getInfoType() {
        return infoType;
    }

    /**
     * 设置信息类型  0：正常；1：紧急
     *
     * @param infoType 信息类型  0：正常；1：紧急
     */
    public void setInfoType(String infoType) {
        this.infoType = infoType == null ? null : infoType.trim();
    }

    /**
     * 获取开始时间
     *
     * @return START_TIME - 开始时间
     */
    public Date getStartTime() {
        return startTime;
    }

    /**
     * 设置开始时间
     *
     * @param startTime 开始时间
     */
    public void setStartTime(Date startTime) {
        this.startTime = startTime;
    }

    /**
     * 获取结束时间
     *
     * @return END_TIME - 结束时间
     */
    public Date getEndTime() {
        return endTime;
    }

    /**
     * 设置结束时间
     *
     * @param endTime 结束时间
     */
    public void setEndTime(Date endTime) {
        this.endTime = endTime;
    }

    /**
     * 获取发布信息
     *
     * @return TEXT - 发布信息
     */
    public String getText() {
        return text;
    }

    /**
     * 设置发布信息
     *
     * @param text 发布信息
     */
    public void setText(String text) {
        this.text = text == null ? null : text.trim();
    }
}

---

4.在com.grape.test.service类包中新建PisService.java 编写需要的函数

package com.grape.test.service.impl;

import org.apache.commons.lang3.StringUtils;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.springframework.stereotype.Service;
import org.springframework.transaction.annotation.Propagation;
import org.springframework.transaction.annotation.Transactional;

import com.grape.common.service.impl.BaseService;
import com.grape.system.domain.Pis;
import com.grape.test.service.PisService;

import tk.mybatis.mapper.entity.Example;
import tk.mybatis.mapper.entity.Example.Criteria;

import java.util.ArrayList;
import java.util.Arrays;
import java.util.List;

@Service("pisService")
@Transactional(propagation = Propagation.SUPPORTS, readOnly = true, rollbackFor = Exception.class)
public class PisServiceImpl extends BaseService<Pis> implements PisService {

	private Logger log = LoggerFactory.getLogger(this.getClass());

	@Override
	public List<Pis> findAllPiss(Pis pis) {
		try {
			Example example = new Example(Pis.class);	// select pisId, ... from t_pis
			Criteria criteria = example.createCriteria();
			
			Long pisId = pis.getPisId();
			if( StringUtils.isNotBlank( pisId == null ? null : pisId.toString()) ){
				criteria.andCondition("PIS_ID=", pis.getPisId());
			}
			example.setOrderByClause("PIS_ID asc");   // order by pis_id desc
			return this.selectByExample(example);
		} catch (Exception e) {
			log.error("查询PIS信息失败", e );
			return new ArrayList<>();
		}
	}

	@Override
	@Transactional
	public Pis findById(Long pisId) {
		Example example = new Example(Pis.class);	// select pisId, ... from t_pis
		example.createCriteria().andCondition("PIS_ID=", pisId);  // where 1 = 1
		List<Pis> list = this.selectByExample(example);
		return list == null ? null : list.get(0);
	}

	@Override
	@Transactional
	public void updatePis(Pis pis) {
		this.updateNotNull(pis);
	}

	@Override
	@Transactional
	public void deletePiss(String pisIds) {	// 1,2,5
		List<String> list = Arrays.asList(pisIds.split(","));
		this.batchDelete(list, "pisId", Pis.class);
	}

	@Override
	@Transactional
	public void addPis(Pis pis) {
		this.save(pis);
	}
}

---

5.com.grape.test.service.impl类包中新建PisServiceImpl.java

package com.grape.test.service.impl;

import org.apache.commons.lang3.StringUtils;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.springframework.stereotype.Service;
import org.springframework.transaction.annotation.Propagation;
import org.springframework.transaction.annotation.Transactional;

import com.grape.common.service.impl.BaseService;
import com.grape.system.domain.Pis;
import com.grape.test.service.PisService;

import tk.mybatis.mapper.entity.Example;
import tk.mybatis.mapper.entity.Example.Criteria;

import java.util.ArrayList;
import java.util.Arrays;
import java.util.List;

@Service("pisService")
@Transactional(propagation = Propagation.SUPPORTS, readOnly = true, rollbackFor = Exception.class)
public class PisServiceImpl extends BaseService<Pis> implements PisService {

	private Logger log = LoggerFactory.getLogger(this.getClass());

	@Override
	public List<Pis> findAllPiss(Pis pis) {
		try {
			Example example = new Example(Pis.class);	// select pisId, ... from t_pis
			Criteria criteria = example.createCriteria();
			
			Long pisId = pis.getPisId();
			if( StringUtils.isNotBlank( pisId == null ? null : pisId.toString()) ){
				criteria.andCondition("PIS_ID=", pis.getPisId());
			}
			example.setOrderByClause("PIS_ID asc");   // order by pis_id desc
			return this.selectByExample(example);
		} catch (Exception e) {
			log.error("查询PIS信息失败", e );
			return new ArrayList<>();
		}
	}

	@Override
	@Transactional
	public Pis findById(Long pisId) {
		Example example = new Example(Pis.class);	// select pisId, ... from t_pis
		example.createCriteria().andCondition("PIS_ID=", pisId);  // where 1 = 1
		List<Pis> list = this.selectByExample(example);
		return list == null ? null : list.get(0);
	}

	@Override
	@Transactional
	public void updatePis(Pis pis) {
		this.updateNotNull(pis);
	}

	@Override
	@Transactional
	public void deletePiss(String pisIds) {	// 1,2,5
		List<String> list = Arrays.asList(pisIds.split(","));
		this.batchDelete(list, "pisId", Pis.class);
	}

	@Override
	@Transactional
	public void addPis(Pis pis) {
		this.save(pis);
	}
}

6.com.grape.test.controller类包中新建PisController.java

package com.grape.test.controller;


import java.util.ArrayList;
import java.util.List;
import java.util.Map;

import org.apache.shiro.authz.annotation.RequiresPermissions;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;

import com.grape.common.controller.BaseController;
import com.grape.common.domain.QueryRequest;
import com.grape.common.domain.ResponseResult;
import com.grape.system.domain.Pis;
import com.grape.system.domain.Role;
import com.grape.test.service.PisService;
import com.thoughtworks.xstream.mapper.Mapper.Null;

import net.sf.saxon.expr.TryCatch;

@Controller
public class PisController extends BaseController {

	private Logger log = LoggerFactory.getLogger(this.getClass());
	
	@Autowired
	private PisService pisService;
	
	@RequestMapping("pis")
	@RequiresPermissions("pis:list")
	public String pis() {
		
		return "test/Integration/PIS";
	
	}
	@RequestMapping("pis/modbus")
	@ResponseBody
	public  ResponseResult sendModbus( String address, int port, String stationId,String stat_1,String stat_2 ) {
		
		System.out.println("----------------"+address+"--"+port+"--"+stationId);
		if( port == 255) {
			return ResponseResult.ok();
		}else {
			return ResponseResult.error("数据错误");
		}			
	}
	@RequestMapping("pis/list")
	@RequiresPermissions("pis:list")
	@ResponseBody
/*	public List<Pis> pisList(Pis pis){
		try {
			List<Pis> list = this.pisService.findAllPiss(pis);
			return list;
		} catch (Exception e) {
			// TODO Auto-generated method stub
			log.error("获取Pis设备列表失败",e);
			return new ArrayList<>();
		}
	}*/
    public Map<String, Object> pisList(QueryRequest request, Pis pis) {
        return super.selectByPageNumSize(request, () -> this.pisService.findAllPiss(pis));
    }
}

---

四.前端代码 基于bootstrap框架

1.HTML

<div calss="readValue" style="border:1px solid green;">
	<div class="card">
		<p class="text-center" style="font-size:24px">读取信息列表
	    <div class="card-block">
	        <div class="table-responsive">
	            <div id="data-table_wrapper" class="dataTables_wrapper">
	                <div class="dataTables_buttons hidden-sm-down actions">
	                    <span class="actions__item zmdi zmdi-search" onclick="search()" title="搜索" />
	                    <span class="actions__item zmdi zmdi-refresh-alt" onclick="refresh()" title="刷新" />
	                    <div class="dropdown actions__item">
	                        <i data-toggle="dropdown" class="zmdi zmdi-download"></i>
	                        <ul class="dropdown-menu dropdown-menu-right">
	                            <a href="javascript:void(0)" class="dropdown-item" data-table-action="excel"  onclick="exportDeptExcel()">
			                    	Excel (.xlsx)
			                	</a>
	                            <a href="javascript:void(0)" class="dropdown-item" data-table-action="csv"  onclick="exportDeptCsv()">
			                    	CSV (.csv)
			                	</a>
	                        </ul>
	                    </div>
	                    <!-- <div class="dropdown actions__item" shiro:hasAnyPermissions="dept:add,dept:delete,dept:update">
	                        <i data-toggle="dropdown" class="zmdi zmdi-more-vert"></i>
	                        <div class="dropdown-menu dropdown-menu-right">
	                            <a href="javascript:void(0)" class="dropdown-item" data-toggle="modal" data-target="#dept-add" shiro:hasPermission="dept:add">新增部门</a>
	                            <a href="javascript:void(0)" class="dropdown-item" onclick="updateDept()" shiro:hasPermission="dept:update">修改部门</a>
	                            <a href="javascript:void(0)" class="dropdown-item" onclick="deleteDepts();" shiro:hasPermission="dept:delete">删除部门</a>
	                        </div>
	                    </div> -->
	                </div>
	                <div id="data-table_filter" class="dataTables_filter">
	                    <form class="pis-table-form">
	                        <div class="row">
	                            <div class="col-sm-3">
	                                <div class="input-group">
	                                    <span class="input-group-addon">
						               	编号：
						            </span>
	                                    <div class="form-group">
	                                        <input type="text" name="pisId" class="form-control">
	                                        <i class="form-group__bar"></i>
	                                    </div>
	                                </div>
	                            </div>
	                        </div>
	                    </form>
	                </div>
	                <table id="pisTable" data-mobile-responsive="true" class="mb-bootstrap-table"></table>
	            </div>
	        </div>
	    </div>
	</div>
</div>	
<div class="setValue" style="width:100%;background-color:#fff;text-align:center;border:1px solid green">
	<p class="text-center" style="font-size:24px;margin-bottom:50px;">设置信息列表
	<div id="set-table_filter" class="dataTables_filter">
	                    <form class="pis-table-form">
	                        <div class="row">
	                            <div class="col-xs-3 col-sm-3">
	                                <div class="input-group">
	                                    <span class="input-group-addon">Address：</span>
	                                    <div class="form-group">
	                                        <input type="text" id="address" class="form-control" value="192.168.31.10" style="text-align:left" />
	                                        <i class="form-group__bar"></i>
	                                    </div>
	                                </div>
	                            </div>
	                            <div class="col-xs-3 col-sm-2">
	                                <div class="input-group">
	                                    <span class="input-group-addon">Port：</span>
	                                    <div class="form-group">
	                                        <input type="text" id="port" class="form-control" value="255" style="text-align:left" />
	                                        <i class="form-group__bar"></i>
	                                    </div>
	                                </div>
	                            </div>
	                            <div class="col-xs-3 col-sm-2">
	                                <div class="input-group">
	                                    <span class="input-group-addon">StationId：</span>
	                                    <div class="form-group">
	                                        <input type="text" id="stationId" class="form-control" value="1" style="text-align:left" />
	                                        <i class="form-group__bar"></i>
	                                    </div>
	                                </div>
	                            </div>
	                            <div class="col-xs-1 col-sm-4"></div>
	                            <div class="col-xs-2 col-sm-1">
	                            	<button id="setting" type="button" class="btn btn-primary" onclick="set()"><em>SETTING</em></button>
	                            </div>
	                        </div>
	                    </form>
	                </div>
	<table class="table table-condensed table-hover table-bordered">
		<thead>
			<tr>
				<th>编号</th>
				<th>区域位置</th>
				<th>消息类型</th>
				<th>操作选项</th>
			</tr>
		</thead>
		<tbody>
			<tr class="active">
				<td>1</td>
				<td>站厅</td>
				<td>
					<div class="radio">
						<label>
							<input type="radio" name="opt1" id="optionsRadios1"  value="正常" checked>正常 
						</label>
						<label>
							<input type="radio" name="opt1" id="optionsRadios2"  value="紧急">紧急
						</label>
					</div>
				</td>
				<td>
					<div class="radio">
						<label>
							<input type="radio" name="opt2" id="optionsRadios3" value="播放" checked>播放 
						</label>
						<label>
							<input type="radio" name="opt2" id="optionsRadios4" value="取消">取消
						</label>
					</div>
				</td>
			</tr>
			<tr class="info">
				<td>2</td>
				<td>上行站台</td>
				<td>
					<div class="radio">
						<label>
							<input type="radio" name="opt3" id="optionsRadios5" value="" checked>正常
						</label>
						<label>
							<input type="radio" name="opt3" id="optionsRadios6" value="" > 紧急
						</label>
					</div>
				</td>
				<td>
					<div class="radio">
						<label>
							<input type="radio" name="opt4" id="optionsRadios7" value="" checked>播放 
						</label>
						<label>
							<input type="radio" name="opt4" id="optionsRadios8" value="">取消
						</label>
					</div>
				</td>
			</tr>
			<tr class="active">
				<td>3</td>
				<td>下行站台</td>
				<td>
					<div class="radio">
						<label>
							<input type="radio" name="opt5" id="optionsRadios9" value="" checked>正常
						</label>
						<label>
							<input type="radio" name="opt5" id="optionsRadios10" value="" > 紧急
						</label>
					</div>
				</td>
				<td>
					<div class="radio">
						<label>
							<input type="radio" name="opt6" id="optionsRadios11" value="" checked>播放 
						</label>
						<label>
							<input type="radio" name="opt6" id="optionsRadios12" value="">取消
						</label>
					</div>
				</td>
			</tr>
			<tr class="info">
				<td>4</td>
				<td>出入口及其他</td>
				<td>
					<div class="radio">
						<label>
							<input type="radio" name="opt7" id="optionsRadios13" value="" checked>正常
						</label>
						<label>
							<input type="radio" name="opt7" id="optionsRadios14" value="" > 紧急
						</label>
					</div>
				</td>
				<td>
					<div class="radio">
						<label>
							<input type="radio" name="opt8" id="optionsRadios15" value="" checked>播放 
						</label>
						<label>
							<input type="radio" name="opt8" id="optionsRadios16" value="">取消
						</label>
					</div>
				</td>
			</tr>
		</tbody>
	</table>
</div>
<script th:src="@{js/app/test/pis/pis.js}"></script>

---

2.JS代码

$(function() {
    initTable();
});

function set(){
	var address = document.getElementById("address").value;
    var port = document.getElementById("port").value;
    var stationId = document.getElementById("stationId").value;
    
	var radios_Stat_1 = document.getElementsByName("opt1");
	for(var i=0;i<radios_Stat_1.length;i++){
		if(radios_Stat_1[i].checked == true){
			stat_1 = radios_Stat_1[i].value;
		}
	}
	
	var radios_Stat_2 = document.getElementsByName("opt2");
	for(var i=0;i<radios_Stat_2.length;i++){
		if(radios_Stat_2[i].checked == true){
			stat_2 = radios_Stat_2[i].value;
		}
	}
	$.ajax({
		url:ctx+"pis/modbus",
		type:"post",
		data:{
			address:address,
			port:port,
			stationId:stationId,
			stat_1:stat_1,
			stat_2:stat_2
		},
		dataType:"json",
		success:function(data){
			var Object = JSON.stringify(data);
			 alert(Object);
			 alert(data.code);
		}
	});
}
/*读取数据库数据形成表格*/
function initTable() {
	/*debugger;*/
    var settings = {
            url: ctx + "pis/list",
            //pageSize: 10,
            queryParams: function (params) {
                return {
                    //pageSize: params.limit,
                    //pageNum: params.offset / params.limit + 1,
                    pisId: $(".pis-table-form").find("input[name='pisId']").val().trim()
                };
            },
            columns: [{
                checkbox: true
            },{
                title: '编号',
                field: 'pisId'
            },{
                title: '区域位置',
                field: 'pisArear'
            },{
                title: '设备编号',
                field: 'deviceId'
            },{
                title: '设备状态',
                field: 'deviceState'
            },{
                title: '信息类型',
                field: 'infoType'
            },{
                title: '起始时间',
                field: 'startTime'
            },{
                title: '结束时间',
                field: 'endTime'
            },{
                title: '信息内容',
                field: 'text'
            }]
        };
    
    $MB.initTable('pisTable', settings);
}

 

---

3.前端网页效果 访问http://localhost:8080/index