區網中心網管服務平台 整合 Zk, SpringData ,MongoDB應用實例

桃園區網中心 楊素秋 ( 2015-11-05 )

OUTLINE

•1. 基本軟體

–OS, jdk, mongoDB,

–apache-maven, apache-tomcat,

•2. Integrate Zk, Spring Security , MongoDB

– TycMgt.tar.gz

•3. ZK MVC

•4. ZK MVVM

•5. Conclusion

1. 基本軟體

•Xen Server (6.1 version)

–On PC

–On Blade server

•XenCenter

•new VM

•export VM

•import VM

•Virtual machine

–CentOS 64-bits ( 6.4 version)

1. 基本軟體 (cont.)

•JDK installation

•cd /opt

•Download jdk-7u51-linux-x64.tar.gz

–tar zxvf jdk-7u51-linux-x64.tar.gz

–vi /etc/profile or /etc/bashrc

●$JAVA_HOME

●$PATH

●$CLASSPATH

1.基本軟體(cont.)

•mongo DB Installation

–vi /etc/yum.repos.d/mongodb.repo

•[10gen]

•name=10gen Repository

•baseurl=http://downloads-distro.mongodb.org/repo/redhat/os/x86_64

•gpgcheck=0

•enabled=1

–yum install mongo-10gen mongo-10gen-server

–service mongod start

–service mongod stop

–chkconfig mongod on

1. 基本軟體 (cont.)

•MongoDB

–Mongo Shell

•show dbs

•use simpletasks

•show collections

●db.task.find(), db.task.remove(), db.task.drop()

●Program with java

●MongoClient

●Google morphia, Spring data repositive/template

1.基本軟體 (cont.)

•mongoDB Backup (備份) ●# mongodump --db todo

●ls -l ~yang/Mongo*/dump/todo

●-rw-r--r--. 1 root root 163374798 2014-01-23 18:48 dnssec.bson

●-rw-r--r--. 1 root root 93 2014-01-23 18:48 dnssec.metadata.json

●-rw-r--r--. 1 root root 776661 2014-01-23 18:48 dormip.bson

●-rw-r--r--. 1 root root 93 2014-01-23 18:48 dormip.metadata.json

●-rw-r--r--. 1 root root 607 2014-01-23 18:48 system.indexes.bson

•mongoDB Restore (還原) ●# mongorestore --db todo dump/todo

●# mongorestore --collection dormip --db todo Mongo_DB/dump/todo/dormip.bson

●connected to: 127.0.0.1

●Wed Feb 5 17:53:52.846 Mongo_DB/dump/todo/dormip.bson

●Wed Feb 5 17:53:52.846 going into namespace [todo.dormip]

●5529 objects found

●Wed Feb 5 17:53:52.957 Creating index: { key: { _id: 1 }, ns: "todo.dormip", name: "_id_" }

•apache-maven installation

–Download Apache Maven 3.1.1

•cd /opt

• wget ftp://mirror.reverse.net/pub/apache/maven/maven-3/3.1.1/binaries/apache-maven-3.1.1-bin.tar.gz

–tar zxvf apache-maven-3.1.1-bin.tar.gz

–ls –l apache-maven-3.1.1/bin

•-rw-r--r--. 1 root root 228 2013-09-17 23:24 m2.conf

•-rwxr-xr-x. 1 root root 5806 2013-09-17 23:24 mvn

1.基本軟體 (cont.)

–Maven command

–mvn clean

–mvn compile

–mvn package

– mvn archetype:generate -DgroupId=ncu.app -DartifactId=ncu_app - DarchetypeArtifactId=maven-

archetype-quickstart

•-rw-r--r--. 1 root root 634 2014-01-28 14:51 pom.xml

•drwxr-xr-x. 4 root root 4096 2014-01-28 14:51 src

–ls –l ncu_app/src/main/java/ncu/app

–-rw-r--r--. 1 root root 170 2014-01-28 14:51 App.java

1.基本軟體 (cont.)

–more ncu_app/src/main/java/ncu/app/App.java

•package ncu.app;

–public class App {

– public static void main( String[] args ) {

– System.out.println( "Hello World!" );

– }

–}

•mvn clean compile package

– ncu_app-1.0-SNAPSHOT.jar

–Java -cp target/ncu_app-1.0-SNAPSHOT.jar ncu.app.App

–mvn exec:java -Dexec.mainClass="ncu.app.App

• Hello World!

1.基本軟體 (cont.)

1.基本軟體 (cont.)

•apache-tomcat installation

–Download Apache Tomcat

•wget http://apache.mesi.com.ar/tomcat/tomcat-7/v7.0.50/bin/apache-tomcat-7.0.50.tar.gz

–Tar zxvf apache-tomcat-7.0.50.tar.gz

–drwxr-xr-x. 2 root root 4096 2013-12-18 09:43 bin

–drwxr-xr-x. 2 root root 4096 2013-10-18 18:21 conf

–drwxr-xr-x. 7 root root 4096 2013-10-18 18:19 webapps

–drwxr-xr-x. 2 root root 4096 2013-10-18 18:10 work

•/opt/apache-tomcat/bin/startup.sh

•/opt/apache-tomcat/bin/shutdown.sh

13

2. Integrate Zk, SpringSecurity , MongoDB

•Spring Security

–Spring Security 設定

●src/main/webapp/WEB-INF/web.xml

●src/main/webapp/WEB-INF/spring-security.xml

–Secured 的目錄 (例)

●secured/

●upload/

2. Integrate Zk, Spring Security, MongoDB (cont.)

A) cd /home5

Get TycMgt.tar.gz

tar zxvf TycMgt.tar.gz

Ｂ） cd /home5/TycMgt

mvn clean compile package

Ｃ）Connect URL

http://host.domain/TycMgt/

2. Integrate Zk, Spring Security, MongoDB (cont.)

... <context-param>

<param-name>contextConfigLocation</param-name> <param-value>

/WEB-INF/spring-security.xml </param-value> </context-param> <listener> <display-name>Spring Context Loader</display-name> <listener-class>org.springframework.web.context.ContextLoaderListener</listener-class> </listener> <filter> <filter-name>springSecurityFilterChain</filter-name>

<filter-class>org.springframework.web.filter.DelegatingFilterProxy</filter-class>

</filter> <filter-mapping> <filter-name>springSecurityFilterChain</filter-name> <url-pattern>/*</url-pattern> <url-pattern>/secured/*</url-pattern> </filter-mapping>

...

{ web.xml 檔 }

2. Integrate Zk, Spring Security, MongoDB (cont.)

... <!-- Enable the @Secured annotation to secure service layer methods -->

<global-method-security secured-annotations="enabled" /> <http auto-config="true"> <form-login login-page="/login.zul" authentication-failure-url="/login.zul?login_error=1" default-target-url="/index.zul" /> <intercept-url pattern="/login.zul" access="IS_AUTHENTICATED_ANONYMOUSLY" /> <intercept-url pattern="/index.zul" access="ROLE_USER" /> <intercept-url pattern="/*.zul" access="ROLE_USER" /> <intercept-url pattern="/secured/*" access="ROLE_ADMIN"/> <intercept-url pattern="/secured/index.zul" access="ROLE_ADMIN"/> <intercept-url pattern="/secured/DbUserCRUD.zul" access="ROLE_ADMIN"/> <intercept-url pattern="/secured/DbUserList.zul" access="ROLE_ADMIN"/> <access-denied-handler error-page="/fail_secured.zul" /> </http> <authentication-manager> <authentication-provider user-service-ref="myUserDetailsService"> <password-encoder hash="md5" /> </authentication-provider> </authentication-manager> <beans:bean id="myUserDetailsService" class="zkloginexample3.MyUserDetailsService" /> </beans:beans>

...

{ spring-security.xml 檔 }

3. ZK MVC

•ZK

–AJAX／XUL／Java based 網頁應用程式開發框架

–以AJAX為基礎、事件驅動(event-driven)、高互動性的引擎

–提供多樣豐富、可重複使用的XUL與HTML元件

–使用ZK User-interfaces Markup Language（ZUML）

●直接以Java控制 120個XUL元件 及80個XHTML元件

●listbox, slider, audio, tree, combobox, tabbox,

●auto-completion, FCKeditor，Dojo, Google Maps 等

–AJAX

3. ZK MVC (cont.)

•View

–UI : a composition of components

•Controller

–a Java program to glue UI (view) and Data (model) together

•Model

–data and application handles

•could be anything as long as your controller knows it

3. ZK MVC (cont.)

3. ZK MVC (cont.)

3. ZK MVC (cont.)

3. ZK MVC (cont.)

<window width="100%" border="normal" apply="fiddle.CuteComposer">

<caption label="可愛動物 圖片" style="color: #663322; font-size : 20px; font-

weight: bold;" > </caption> <div id="slider" class="the-slider"> <div id="container"> <image id="imgOne" /> <image id="imgTwo" /> <image id="imgThree" /> </div> </div>

<intbox id="interval" value="3" /> [間隔秒數]

<button id="start" label="播放" style="color: #119922; font-weight: bold;" />

<button id="stop" label="暫停" style="color: #991122; font-weight: bold;" />

</window>

…

3. ZK MVC (cont.) <script type="text/javascript"><![CDATA[ var contentList = [], contentLength, index = 3, frameWidth = 620, animateTime = 410, slideShow;

function setContent (content) {

contentList = content.split(','); contentLength = contentList.length }

function startSlideShow (delay) {

var $slider = jq('$slider'), $container = jq('$container');

slideShow = setInterval (function () { $slider.animate({'scrollLeft': '+='+frameWidth+'px'}, animateTime, null, function (){ var firstImage = $container.find('img')[0]; firstImage.src = contentList[index]; index = (index+1) % contentLength; $container[0].appendChild(firstImage); $slider[0].scrollLeft = 0; }); }, delay); }

function stopSlideShow () { clearInterval (slideShow); } ]]></script>

3. ZK MVC (cont.)

public class CuteComposer extends GenericForwardComposer {

Image imgOne, imgTwo, imgThree;

Intbox interval;

Button start, stop;

List<String> contentList = null;

int length = 10; int index = 0, fcount = 0;

public void doAfterCompose (Component comp) throws Exception {

super.doAfterCompose(comp); // init first part image imgOne.setSrc(getSrc()); imgTwo.setSrc(getSrc()); imgThree.setSrc(getSrc()); Clients.evalJavaScript("setContent('"+getContentString()+"')"); }

3. ZK MVC (cont.)

public void onClick$start () {

int delay = interval.getValue();

String command = "startSlideShow(" + delay*1000 + ")";

System.out.println(command);

Clients.evalJavaScript(command);

}

public void onClick$stop () {

String command = "stopSlideShow()";

Clients.evalJavaScript(command);

4. ZK MVVM

4. ZK MVVM (cont.)

•Model : data and application handles

•View : UI

•View model : a special Controller for the View

–responsible for exposing data from the Model to the View

–providing required action and logic for user requests from the View.

•Binder : a broker, the key role to operate the whole

mechanism

4. ZK MVVM (cont.)

4. ZK MVVM (cont.)

<window title="PPT 檔案分享" border="normal" id="list"

apply="org.zkoss.bind.BindComposer"

viewModel="@id('myvm') @init('org.zkoss.mongodb.appVM.PptListVM')">

<listbox sclass="mylist" id="test“ model="@load(myvm.allPpts)"

selectedItem="@bind(myvm.curSelectedPpt)">

<listhead sizable="true">

<listheader label="檔案名稱" width="450px" sort="auto(files)" />

<listheader label="內容簡述" width="450px" sort="auto(content)" />

<listheader label="Action" />

</listhead>

4. ZK MVVM (cont.) <template name="model" var="p1"> <listitem> <listcell label="@load(p1.files)" onClick="@command('openAsReadOnly')" sclass="highlightcell" /> <listcell label="@load(p1.content)" onClick="@command('openAsReadOnly')" sclass="highlightcell" /> <listcell> <hbox spacing="20px"> <fImageEdit onClick="@command('editThisPpt')" /> <fImageDelete onClick="@command('deleteThisPpt')" /> <fImageDownload onClick="@command('doDownLoadPpt')" /> </hbox> </listcell> </listitem> </template> </listbox> </window> </zk>

4. ZK MVVM (cont.)

<window title="Ppt CRUD" border="normal" id="PptCRUD"

width="850px" height="auto" apply="org.zkoss.bind.BindComposer"

sclass="mymodal" minimizable="false" mode="modal" maximizable="false"

closable="true" position="center"

viewModel="@id('vm') @init('org.zkoss.mongodb.appVM.PptCRUDVM')">

<flabeltitle value="Ppt information" />

<rows>

<row> <hbox> <label value="檔案名稱" /> </hbox>

<textbox name="Files" readonly="@load(vm.makeAsReadOnly)"

value="@bind(vm.selectedPpt.files)" cols="350" /> </row>

<row> <box> <flabel value="內容陳述" /> </hbox>

<textbox name="Content" readonly="@load(vm.makeAsReadOnly)"

PptCRUD.zul

4. ZK MVVM (cont.)

...

<row>

<hbox> <flabel value="建立日期" /> </hbox>

<textbox name="Created"

readonly="@load(vm.makeAsReadOnly)"

value="@bind(vm.selectedPpt.created)" cols = "60" />

</row>

</rows>

<div align="center">

4. ZK MVVM (cont.)

<fbutton id="submit" label="Submit"

onClick="@command('save')" visible="@load(not vm.makeAsReadOnly)" />

<fbutton id="Cancel"

label="@load(vm.makeAsReadOnly ?'Ok':'Cancel')"

onClick="@command('closeThis')" />

</div>

4. ZK MVVM (cont.)

public class PptCRUDVM {

@Wire("#PptCRUD")

private Window win_ppt;

private Ppt selectedPpt;

public void initSetup(@ContextParam(ContextType.VIEW) Component view,

@ExecutionArgParam("sPpt") Ppt b1,

@ExecutionArgParam("recordMode") String recordMode)

throws CloneNotSupportedException {

Selectors.wireComponents(view, this, false);

if (recordMode.equals("NEW")) {

this.selectedPpt = new Ppt(); }

4. ZK MVVM (cont.)

if (recordMode.equals("EDIT")) {

this.selectedPpt = (Ppt) b1.clone(); }

if (recordMode == "READ") {

setMakeAsReadOnly(true);

this.selectedPpt = (Ppt) b1.clone();

win_ppt.setTitle(win_ppt.getTitle() + " (Readonly)");

}

}

}

4. ZK MVVM (cont.)

...

@Command

public void addNewPpt() {

final HashMap<String, Object> map = new HashMap<String, Object>();

map.put("sPpt", null);

map.put("recordMode", "NEW");

Executions.createComponents("PptCRUD.zul", null, map);

}

....

@Command

public void doDownLoadPpt() {

String sPath = "/opt/apache-tomcat/webapps/ROOT/ppt/";

String cur_url = curSelectedPpt.getFiles() ;

String[] aArray = cur_url.split("\\/");

String sFilename = aArray[aArray.length -1];

try {

File f = new File(sPath + sFilename);

FileInputStream fs = new FileInputStream(f);

if (fs != null)

Filedownload.save(fs, "application/vnd.ms-powerpoint", sFilename );

} catch(FileNotFoundException e) { }

}

4. ZK MVVM (cont.)

@SuppressWarnings({ "unchecked", "rawtypes" })

@Command

public void deleteThisPpt() {

int OkCancel;

String str = "The Selected Ppt File \"“ + curSelectedPpt.getFiles() + "\" will be deleted.";

OkCancel = Messagebox.show(str, "Confirm", Messagebox.OK | Messagebox.CANCEL, Messagebox.QUESTION);

if (OkCancel == Messagebox.CANCEL) {

return; }

});

}

str = "The Selected Ppt File \"" + curSelectedPpt.getFiles() + "\" will be permanently deleted.";

Messagebox.show(str, "Confirm", Messagebox.OK | Messagebox.CANCEL,

Messagebox.QUESTION, new EventListener() {

@Override

public void onEvent(Event event) throws Exception {

if (((Integer) event.getData()).intValue() == Messagebox.OK) {

// pptList.remove(pptList.indexOf(curSelectedPpt));

Ppt ppt_del = (Ppt) curSelectedPpt;

deletePpt(ppt_del);

BindUtils.postNotifyChange(null, null, PptListVM.this, "allPpts");

}

}

4. ZK MVVM (cont.)

public Ppt savePpt( Ppt ppt) {

try {

PptDAO pptDao = new PptDAO(MongoDBManager.getMongo(), MongoDBManager.getMorphia());

pptDao.save(ppt);

} catch (Exception e) {

e.printStackTrace();

}

return ppt ;

4. ZK MVVM (cont.)

public void deletePpt( Ppt ppt) {

try {

PptDAO pptDao = new PptDAO(MongoDBManager.getMongo(), MongoDBManager.getMorphia());

pptDao.delete(ppt);

} catch (Exception e) {

e.printStackTrace();

}

5. Conclusion

•區網網管人員服務平台

–文件共享 : ppt, doc, jpg, png, …

–網路設備維護資訊

–研習活動資訊傳達

•Spring Security

•ZK MVC v.s. ZK MVVM

•Content 維護 ***

Referances

•Spring Data MongoDB

–http://docs.spring.io/spring-data/mongodb/docs/current/reference/html/

•ZK Examples Index Page

–http://emrpms.blogspot.in/2013/08/zk-examples-index-page.html

•ZK + Spring Security Login form

–http://emrpms.blogspot.in/2013/04/zk-spring-security-custom-login-form.html

•ZK With Spring + JPA + Hibernate Entity Manager

–http://emrpms.blogspot.in/2013/01/in-this-article-let-us-see-how-we-can.html

●ZK Examples Index Page ●http://emrpms.blogspot.in/2013/08/zk-examples-index-page.html

●Tutorials ●http://krams915.blogspot.tw/p/tutorials.html

●Spring MVC 3.1 - Implement CRUD with Spring Data MongoDB ●http://krams915.blogspot.tw/2012/01/spring-mvc-31-implement-crud-with_4739.html