1、開發環境搭建
1.1 Java
版本要求:1.8+
- 首先需要驗證下本機是否已經安裝JDK,並且版本是否爲1.8及以上。
- 驗證操作:進入控制檯輸入:
java -version
,如果出現下圖或者顯示版本號不是1.8及以上就需要重新安裝JDK。
安裝JDK
點擊
下一步
點擊“更改”可以自定義安裝目錄,選擇完安裝目錄後(安裝目錄最好不要有中文),點擊
下一步
現在需要安裝jre,同樣點擊“更改”可以自定義安裝目錄,選擇完安裝目錄後(安裝目錄最好不要有中文),點擊
下一步
至此,java運行環境安裝完畢,點擊
關閉
驗證是否安裝成功:控制檯輸入:
java -version
,出現下圖則安裝成功
1.2 Tomcat
版本要求:8.5
解壓縮到本機目錄即可
1.3 Mysql
版本要求:5.7
- 高版本數據庫在使用iplat4j代碼生成會報錯,推薦使用5.7版本的數據庫
雙擊
mysql-installer-community-5.7.30.0.msi
開始安裝數據庫
設置mysql端口號,默認:3306
設置
root
用戶的密碼
設置mysql服務在windows服務裏面的顯示名稱
繼續安裝
測試mysql服務是否可以連接成功
繼續下一步
打開windows服務,查看mysql服務是否正常啓動
安裝navicat數據庫工具
自定義安裝目錄
創建快捷方式
創建桌面圖標
安裝成功後,先不要打開navicat,下面破解navicat,解壓縮破解文件
進入
簡體中文64位
目錄,複製裏面兩個文件,粘貼到navicat安裝目錄,破解完成
創建本地mysql連接
新建
iplat
數據庫
數據庫名爲:iplat
,字符集:utf8mb4
,排序規則:utf8mb4_general_ci
導入sql數據
導入成功
平臺示例項目表如下
1.4 STS
STS的版本沒有硬性要求,這裏使用的是最新版:4.6.1
雙擊安裝jar,會解壓到當前目錄
雙擊後解壓在當前目錄生成sts目錄,拷貝此文件夾至本機合適的位置
爲STS添加iplat4j代碼生成插件,複製
iplat4j-plugin-6.0.731-SNAPSHOT.jar
文件
將
iplat4j-plugin-6.0.731-SNAPSHOT.jar
複製到sts-4.6.1.RELEASE\plugins
目錄下
雙擊
SpringToolSuite4.exe
打開STS,可以將此文件發送到桌面快捷方式,方便以後使用
設置STS的工作空間,也就是以後開發代碼存放的位置,設置好後點擊
Launch
,進入STS
檢查STS的配置jre
路徑:Window --> Preferences
路徑:
Java--> Installed JREs
如果出現下圖,已經識別到我們之前安裝的jdk,不需要進行額外的配置了
如果爲空需要點擊右側的
Add...
,在彈出的頁面選擇Standard VM
,點擊Next
點擊Directory...
,選擇自己的jre
安裝路徑(jre的根目錄)
如下圖所示,點擊Finish
,完成jre
配置
應用更改並退出
開始配置Tomcat,依次打開
Window-->Show View-->Other..
在彈出的窗口裏面輸入server
,找到Servers選項,點擊Open
在新打開的Servers
窗口下點擊打開新增Server窗口
在查詢框中輸入8.5
快速找到我們要添加的Tomcat 8.5,選擇後點擊Next
點擊Browse...
,選擇我們之前安裝的tomcat目錄
tomcat路徑選擇到tomcat的根目錄即可,JRE我們選擇之前引入的jre,至此STS配置完成
在Servers
視圖下,雙擊剛剛新建的Tomcat Server
將Timeouts
啓動超時時間改大點,防止服務超時未啓動成功
2、快速入門
2.1 iplat4j示例項目
依次點擊
File-->Import...
導入iplat4j示例項目
選擇General-->Existing Projects into Workspace
,點擊Next
點擊Browse...
選擇iPlat4j6
文件夾,點擊Finish
,示例項目導入成功
如果導入項目後有個紅色的感嘆號,則需要右鍵點擊該項目,再依次選擇
Build Path-->Configure Build Path
按照下圖重新加載本機的jre
路徑
現在將該項目加入Tomcat
- 項目jsp文件中EF標籤報錯,不影響項目啓動
在彈出頁面中按下圖依次操作
找到
application.properties
打開修改成本機數據庫的密碼
啓動項目
控制檯出現下圖所示,表示已經啓動成功
瀏覽器輸入
http://localhost:8080/iplatdemo/login.jsp
,可以看到成功運行(用戶名:admin
,密碼:12345
)
2.2 修改成工程項目
假設項目名爲:iplatdemo,模塊名爲:dm,則打開
application.properties
修改成下圖,並重啓項目
打開
EDCC02
頁面,此時項目英文名爲空需要配置下項目模塊信息管理
在
EDPI01
項目模塊信息管理
頁面新增項目、模塊信息
再次打開
EDCC02
頁面,此時已經默認帶入項目英文名爲IPLATDEMO
接下來還需要配置下多項目信息
namelist
在EDCC03
配置信息
頁面,修改原有項目IPLAT4J的多項目配置,在配置內容中追加iplatdemo
, 注意多個環境中的記錄
在
EDCC02
配置環境
頁面, 新增iplatdemo
項目環境信息
在
EDCC03
配置信息
頁面,增加iplatdemo
的多項目配置,至此工程項目配置完成,重啓Tomcat,以後就可以在這個下面進行開發了
備註:
EDCC03
配置項需要項目重啓才能生效
3、入門案列
3.1 配置模塊信息
進入
EDPI01
項目模塊信息管理
頁面,在我們之前建的DM
下面建一個CM
二級目錄
3.2 配置頁面和按鈕信息
進入
EDFA00
頁面信息管理
頁面,添加頁面信息
進入
EDFA01
按鈕信息管理
頁面,添加頁面按鈕信息
畫面英文名 | 按鈕英文名 | 區域標識 | 按鈕中文 | 排序 | 是否授權 | 操作分類 |
---|---|---|---|---|---|---|
DMCM01 | QUERY | INQU | 查詢 | 1 | 不授權 | 查詢 |
DMCM01 | INSERT | GRID:EF_GRID_RESULT | 新增 | 2 | 不授權 | 新增 |
DMCM01 | SAVE | GRID:EF_GRID_RESULT | 保存 | 3 | 不授權 | 修改 |
DMCM01 | CANCEL | GRID:EF_GRID_RESULT | 取消 | 4 | 不授權 | 查詢 |
DMCM01 | DELETE | GRID:EF_GRID_RESULT | 刪除 | 5 | 不授權 | 刪除 |
3.3 創建表
- 平臺推薦用
T+一級模塊+二級模塊+兩位序列號
來命名錶名,所以這裏表名爲:TDMCM01
首先進入
EIIT10
信息項字根管理
維護字根
進入
EDDBT0
表頭信息維護頁面
維護表頭信息
進入
EIIT00
信息項管理
維護信息項
進入
EDDBT1
表數據項維護頁面
維護表字段信息
進入
EDDBI0
表索引維護頁面
維護主鍵,索引信息
進入
EDIG03
SQL生成
導出SQL建表語句
將sql語句複製到navicat運行,由於示例項目的
表索引維護
功能異常,需要加上主鍵生成語句:
ALTER TABLE TDMCM01 ADD PRIMARY KEY (STUDENT_CODE);
3.4 使用代碼生成插件生成domain
和sqlmap
代碼
首先需要根據平臺規範建立前後臺代碼的目錄結構
Package Explorer
視圖下,在iplatdemo.common.dm.domain
路徑上右鍵選擇iplat4j v6 代碼生成
選擇本項目
application.properties
文件,會自動帶入數據庫連接信息,點擊Next...
選擇
iplat
數據庫,找到TDMCM01
勾選好,點擊Next...
檢查下路徑是否導入正確,點擊
Finish
,完成代碼生成
生成的代碼如下
檢查下代碼是否中文亂碼,如果是需要改下項目編碼配置
3.5 編寫前臺代碼
可以複製項目裏面的
EE10.jsp
和EE10.js
兩個文件到DM/CM
目錄下,並修改名字爲DMCM01.jsp
和DMCM01.js
3.6 編寫服務代碼
代碼如下:
package com.baosight.iplatdemo.dm.cm.service;
import com.baosight.iplat4j.core.ei.EiInfo;
import com.baosight.iplat4j.core.service.impl.ServiceBase;
import com.baosight.iplatdemo.common.dm.domain.Tdmcm01;
public class ServiceDMCM01 extends ServiceBase{
/**
* 頁面初始化加載
*
* @param inInfo
* @return
*/
@Override
public EiInfo initLoad(EiInfo inInfo) {
return query(inInfo);
}
/**
* 查詢功能
*
* @param inInfo
* @return
*/
@Override
public EiInfo query(EiInfo inInfo) {
return super.query(inInfo, "tdmcm01.query", new Tdmcm01());
}
/**
* 新增功能
*
* @param inInfo
* @return
*/
@Override
public EiInfo insert(EiInfo inInfo) {
return super.insert(inInfo, "tdmcm01.insert");
}
/**
* 更新功能
*
* @param inInfo
* @return
*/
@Override
public EiInfo update(EiInfo inInfo) {
return super.update(inInfo, "tdmcm01.update");
}
/**
* 刪除功能
*
* @param inInfo
* @return
*/
@Override
public EiInfo delete(EiInfo inInfo) {
return super.delete(inInfo, "tdmcm01.delete");
}
}
3.7 查看目前頁面效果
訪問
http://localhost:8080/iplatdemo/web/DMCM01
,展示如下,數據新增,修改,刪除已經可以操作了,接下來根據案例要求進行完善
3.8 完善前臺代碼
DMCM01.jsp
代碼如下
<!DOCTYPE html>
<%@ page contentType="text/html; charset=UTF-8" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib prefix="EF" tagdir="/WEB-INF/tags/EF" %>
<c:set var="ctx" value="${pageContext.request.contextPath}"/>
<EF:EFPage title="學生成績列表">
<EF:EFRegion id="inqu" title="查詢條件" type="query" efRegionShowClear="true" efRegionSave="true">
<div class="row">
<EF:EFInput ename="inqu_status-0-studentCode" cname="學員編號"/>
<EF:EFInput ename="inqu_status-0-studentName" cname="學員姓名"/>
<EF:EFSelect ename="inqu_status-0-studentSex" cname="學員性別">
<EF:EFOption label="全部" value="" />
<EF:EFOption label="男" value="1" />
<EF:EFOption label="女" value="2" />
</EF:EFSelect>
</div>
</EF:EFRegion>
<EF:EFRegion id="result" title="記錄集">
<EF:EFGrid blockId="result" autoDraw="mixed">
<EF:EFComboColumn cname="學員性別" ename="studentSex">
<EF:EFOption label="男" value="1" />
<EF:EFOption label="女" value="2" />
</EF:EFComboColumn>
<EF:EFColumn ename="manage" cname="操作" />
</EF:EFGrid>
</EF:EFRegion>
<!--彈出頁面-->
<EF:EFWindow id="window" url="" height="50%" width="60%" />
</EF:EFPage>
DMCM01.js
代碼如下
$(function () {
$("#QUERY").on("click", function (e) {
resultGrid.dataSource.page(1);
});
});
IPLATUI.EFGrid = {
"result": {
columns: [{
field: "manage",
title: "操作",
template: '<a οnclick="openDetail(\'#:studentCode#\')">查看明細</a>',
enable: false,
width: 100
}]
}
}
function openDetail(studentCode){
if(studentCode == " "){
return;
}else{
var popWindow = $("#window");
var url = IPLAT.createUrl("DMCM02","inqu_status-0-studentCode="+studentCode);
popWindow.data("kendoWindow").setOptions({
open: function () {
popWindow.data("kendoWindow").refresh({
url: url
});
},
iframe: true
});
popWindow.data("kendoWindow").content();
//打開彈窗
popWindow.data("kendoWindow").center().open();
}
}
- 由於題目要求需要有一個詳情頁面,新增
DMCM02.jsp
代碼如下,同樣DMCM02
頁面也需要在平臺EDFA00
頁面信息管理頁面進行登記
<!DOCTYPE html>
<%@ page contentType="text/html; charset=UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib prefix="EF" tagdir="/WEB-INF/tags/EF"%>
<c:set var="ctx" value="${pageContext.request.contextPath}" />
<EF:EFPage title="學生成績詳情">
<EF:EFRegion id="result" title='結果集'>
<div class="row">
<EF:EFInput blockId="result" ename="studentCode" cname="學生編號"
row="0" data-bind="value: studentCode" disabled="true" />
<EF:EFInput blockId="result" ename="studentName" cname="學生姓名"
row="0" data-bind="value: studentName" disabled="true" />
<div class="col-xs-4"></div>
</div>
<div class="row">
<EF:EFInput blockId="result" ename="studentSubject" cname="科目"
row="0" data-bind="value: studentSubject" disabled="true" />
<EF:EFInput blockId="result" ename="studentGrade" cname="成績"
row="0" data-bind="value: studentGrade" disabled="true" />
<div class="col-xs-4"></div>
</div>
<div class="row">
<EF:EFSelect ename="studentSex" cname="性別" blockId="result"
row="0" data-bind="value: studentSex" disabled="true" >
<EF:EFOption label="男" value="1" />
<EF:EFOption label="女" value="2" />
</EF:EFSelect>
<EF:EFInput blockId="result" ename="studentPhone" cname="手機號"
row="0" data-bind="value: studentPhone" disabled="true" />
</div>
</EF:EFRegion>
</EF:EFPage>
3.9 完善後臺代碼
後臺代碼根據題目要求我們需要修改
ServiceDMCM01.java
tdmcm.xml
並新增ServiceDMCM02.java
根據平臺規範,如果要修改自動生成的代碼,需要在業務包下面新建文件修改,比如現在需要修改tdmcm.xml
,改名成DMCM01.xml
並放在DM/CM
目錄下,代碼如下:
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE sqlMap PUBLIC "-//ibatis.apache.org//DTD SQL Map 2.0//EN" "http://ibatis.apache.org/dtd/sql-map-2.dtd"> <!-- table information
Generate time : 2020-05-31 21:39:20
Version : 6.0.731.201809200158
tableName :iplat.tdmcm01
STUDENT_CODE VARCHAR NOT NULL primarykey,
STUDENT_NAME VARCHAR NOT NULL,
STUDENT_SEX INTEGER NOT NULL,
STUDENT_PHONE VARCHAR NOT NULL,
STUDENT_SUBJECT VARCHAR NOT NULL,
STUDENT_GRADE VARCHAR NOT NULL
-->
<sqlMap namespace="DMCM01">
<select id="query" parameterClass="java.util.HashMap"
resultClass="com.baosight.iplatdemo.common.dm.domain.Tdmcm01">
SELECT
STUDENT_CODE as "studentCode", <!-- 學生編號 -->
STUDENT_NAME as "studentName", <!-- 學生姓名 -->
STUDENT_SEX as "studentSex", <!-- 學生性別 -->
STUDENT_PHONE as "studentPhone", <!-- 學生手機 -->
STUDENT_SUBJECT as "studentSubject", <!-- 科目 -->
STUDENT_GRADE as "studentGrade" <!-- 成績 -->
FROM iplat.tdmcm01 WHERE 1=1
<isNotEmpty prepend=" AND " property="studentCode">
STUDENT_CODE = #studentCode#
</isNotEmpty>
<isNotEmpty prepend=" AND " property="studentName">
STUDENT_NAME LIKE concat('%', #studentName#, '%')
</isNotEmpty>
<isNotEmpty prepend=" AND " property="studentSex">
STUDENT_SEX = #studentSex#
</isNotEmpty>
<dynamic prepend="ORDER BY">
<isNotEmpty property="orderBy">
$orderBy$
</isNotEmpty>
<isEmpty property="orderBy">
STUDENT_CODE asc
</isEmpty>
</dynamic>
</select>
<select id="count" resultClass="int">
SELECT COUNT(*) FROM iplat.tdmcm01 WHERE 1=1
<isNotEmpty prepend=" AND " property="studentCode">
STUDENT_CODE = #studentCode#
</isNotEmpty>
<isNotEmpty prepend=" AND " property="studentName">
STUDENT_NAME LIKE concat('%', #studentName#, '%')
</isNotEmpty>
<isNotEmpty prepend=" AND " property="studentSex">
STUDENT_SEX = #studentSex#
</isNotEmpty>
</select>
<!--
<isNotEmpty prepend=" AND " property="studentCode">
STUDENT_CODE = #studentCode#
</isNotEmpty>
<isNotEmpty prepend=" AND " property="studentName">
STUDENT_NAME = #studentName#
</isNotEmpty>
<isNotEmpty prepend=" AND " property="studentSex">
STUDENT_SEX = #studentSex#
</isNotEmpty>
<isNotEmpty prepend=" AND " property="studentPhone">
STUDENT_PHONE = #studentPhone#
</isNotEmpty>
<isNotEmpty prepend=" AND " property="studentSubject">
STUDENT_SUBJECT = #studentSubject#
</isNotEmpty>
<isNotEmpty prepend=" AND " property="studentGrade">
STUDENT_GRADE = #studentGrade#
</isNotEmpty>
-->
<insert id="insert">
INSERT INTO iplat.tdmcm01 (STUDENT_CODE, <!-- 學生編號 -->
STUDENT_NAME, <!-- 學生姓名 -->
STUDENT_SEX, <!-- 學生性別 -->
STUDENT_PHONE, <!-- 學生手機 -->
STUDENT_SUBJECT, <!-- 科目 -->
STUDENT_GRADE <!-- 成績 -->
)
VALUES (#studentCode#, #studentName#, #studentSex#, #studentPhone#, #studentSubject#, #studentGrade#)
</insert>
<delete id="delete">
DELETE FROM iplat.tdmcm01 WHERE
STUDENT_CODE = #studentCode#
</delete>
<update id="update">
UPDATE iplat.tdmcm01
SET
STUDENT_NAME = #studentName#, <!-- 學生姓名 -->
STUDENT_SEX = #studentSex#, <!-- 學生性別 -->
STUDENT_PHONE = #studentPhone#, <!-- 學生手機 -->
STUDENT_SUBJECT = #studentSubject#, <!-- 科目 -->
STUDENT_GRADE = #studentGrade# <!-- 成績 -->
WHERE
STUDENT_CODE = #studentCode#
</update>
</sqlMap>
修改
ServiceDMCM01.java
,代碼如下:
package com.baosight.iplatdemo.dm.cm.service;
import com.baosight.iplat4j.core.ei.EiInfo;
import com.baosight.iplat4j.core.service.impl.ServiceBase;
import com.baosight.iplatdemo.common.dm.domain.Tdmcm01;
public class ServiceDMCM01 extends ServiceBase{
/**
* 頁面初始化加載
*
* @param inInfo
* @return
*/
@Override
public EiInfo initLoad(EiInfo inInfo) {
return super.initLoad(inInfo, new Tdmcm01());
}
/**
* 查詢功能
*
* @param inInfo
* @return
*/
@Override
public EiInfo query(EiInfo inInfo) {
return super.query(inInfo, "DMCM01.query", new Tdmcm01());
}
/**
* 新增功能
*
* @param inInfo
* @return
*/
@Override
public EiInfo insert(EiInfo inInfo) {
return super.insert(inInfo, "DMCM01.insert");
}
/**
* 更新功能
*
* @param inInfo
* @return
*/
@Override
public EiInfo update(EiInfo inInfo) {
return super.update(inInfo, "DMCM01.update");
}
/**
* 刪除功能
*
* @param inInfo
* @return
*/
@Override
public EiInfo delete(EiInfo inInfo) {
return super.delete(inInfo, "DMCM01.delete");
}
}
新增
ServiceDMCM02.java
,代碼如下:
package com.baosight.iplatdemo.dm.cm.service;
import com.baosight.iplat4j.core.ei.EiInfo;
import com.baosight.iplat4j.core.service.impl.ServiceBase;
import com.baosight.iplatdemo.common.dm.domain.Tdmcm01;
public class ServiceDMCM02 extends ServiceBase{
/**
* 頁面初始化加載
*
* @param inInfo
* @return
*/
@Override
public EiInfo initLoad(EiInfo inInfo) {
return query(inInfo);
}
/**
* 查詢功能
*
* @param inInfo
* @return
*/
@Override
public EiInfo query(EiInfo inInfo) {
return super.query(inInfo, "DMCM01.query", new Tdmcm01());
}
}
3.10 最終效果展示
4、常見問題
4.1 前後臺如何交互的
前臺 --> 後臺
- 前臺頁面發起 AJAX 請求
- 通過平臺的 js 工具類,構造待提交的 EiInfo JSON 字符串
- 請求到後臺的 Service Java 代碼, JSON 字符串被反序列化成 EiInfo Java 對象
後臺 --> 前臺
- 後臺服務經過查詢,計算將結果存儲到 EiInfo 對象中
- 通過平臺的 java 工具類,序列化 EiInfo 對象,構造出返回到前臺的 EiInfo JSON 字符串
- 後臺響應的 EiInfo JSON 字符串,被解析爲頁面中的 EiInfo JS 對象
- 注意:後臺
Service
類接收和返回參數類型都是EiInfo
4.2 詳情頁面頁面初始化方法與列表頁面不同
4.3 常見報錯原因
4.3.1 新加的sqlmap中namespace值沒有修改成DMCM01.xml
的名稱
Caused by: com.ibatis.sqlmap.client.SqlMapException: There is no statement named DMCM01.query in this SqlMap.