NEO4J資料處理及顯示功能

阿新 • • 發佈：2019-01-19

這篇博文也算是對最近工作的一個總結吧！

首先NEO4J是一個圖形資料庫，眾所周知的圖形，是所有表達語言中表達力最強的一個，聲音，文字，肢體語言等都遠遠不如，所以這也是我認為為什麼圖形資料庫的應用比較廣泛，但是更加重要的應該就是他的強大的功能了吧。

大致介紹一下，圖形資料庫，資料庫嘛：存放資料，表達關係的。最簡單的圖形資料庫表示就是：兩個節點，一條指向性關係的格式(附帶的還有些小的屬性，標記等)

首先我的做的工作就是：接收大資料介面中傳遞過來的資料，資料處理，頁面展示。

大資料介面的服務呼叫：我的只需要在provide.xml配置檔案中，配置相應的service服務即可，然後在Controller層進行相應的呼叫操作即可。

我先大致的展示一下我想要做的效果圖及業務執行流程：

大致的執行流程是：訪問頁面，左邊動態選單，已載入完成，點選neo4j效果圖展示，出現上面選擇模型引數以及模型效果展示區域(但是並沒有效果)，當點選選單按鈕的時候，下拉列表也已載入完成，然後選擇下拉列表中的選項，下面的引數列表input組才會顯示出來，並且顯示的資料都是從後臺資料庫中獲取的。

下面是我這次專案的開發流程：

①：首先左側選單不用我去寫，只需要在資料庫中配置好即可(因為已經有程式去查詢資料庫中的選單選項，分別判斷是否為父/子選單，然後將資料返回給前臺做展示)

②：第一版的時候，我先在下拉框中寫死兩個模型，然後點選切換下拉選單，會顯示不同數量的輸入框效果，並且輸入框中有值，這些都是通過ajax結果集拼接樣式做出來的，當然引數也都是寫死的，只不過不同的下拉選項，產生不同的值，這個就寫個if判斷就ok

③：做完這個之後，我就試著去連線neo4j的資料服務了，得到了想要的json串或者是其他格式的資料

④：在做neo4j的資料展示的時候，我甚是為難，因為沒有玩過前臺這種圖資料顯示，後來寫完之後，發現基本的前臺樣式無非就是表單中的各種格式，還有什麼表格什麼的，如果其他的前臺樣式展示，那就是css，js，jquery的封裝外掛啦，然後就在網上找到了cytoscape.js外掛

⑤：原本以為做的只是一個簡單的小demo，後來要求需要部署的，後面就是一系列的調整工作了

⑥：第一個修改的就是nep4j的顯示方式，通過網上的不太齊全的樣板，終於做出來了自己的作品了，我們組長說，用自己的東西，具體的演算法都是封裝好的，直接呼叫就好了。

⑦：剩下的動態化調整，也就是ajax請求引數，非同步載入下拉選單中的資料

⑧：當選擇不同的下拉選項的時候，動態的顯示，不同數量，不同引數的引數組

⑨：將查詢到的模型耗時動態化的展示出來

⑩：動態化的展示圖資料基本工作已經完成，由於原來專案較為複雜，所以需要將模型資料展示抽取出來，獨立形成一個專案

①①：通過idea建立maven工程，配置pom.xml，web.xml，spring.xml，mybatis.xml，springMVC.xml等配置檔案，匯入檔案

①②：使用bootstrap對頁面進行佈局

下面將具體闡述具體功能實現遇到的一些問題：

②：按照上面的專案流程實現沒有問題，主要的就在於對於具體功能實現過程中遇到的一些特點的問題。

<select id="selects" onchange="onChange(this)" style="width:100%">
<option value="0"checked>請選擇</option>
<option value="1">選項一</option>
<option value="2">選項二</option>
</select>

問題一：我寫了一個function函式方法用來實現ajax請求，並使用結果集來拼接顯示樣式，這時候遇到了一個下拉框很普遍的類快取問題解決方案：

$("select > option:gt(0)").remove();

問題二：頁面中顯示或者隱藏某些元件解決方案：

使用具體的選擇器(jquery)
$("#select").hide();
$("#select").show();

問題三：如何根據ajax結果集拼接樣式展示資料 Html程式碼

使用具體的選擇器(jquery)
$("select").append("<option value="ret[i].mid+">"+ret[i].modelName+"</option>")
$("select").after("<option value="ret[i].mid+">"+ret[i].modelName+"</option>")

③：程式猿的單元測試模型junit

@RunWith(SpringJUnit4ClassRunner.class)
@ContextConfiguration("classpath:spring-context.xml")
public class JunitTest{
@Autowird
private DemoMapper demoMapper;
@Test
public void methodTest(){
System.out.println("This is the junit test example");
}
//需要注意的是：junit測試類的名字不能是Test，環境是spring

這裡就不說遇到什麼問題了，直接把書寫的時候的注意點說出來
Html程式碼

首先引入的檔案
<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-2.0.3.min.js"></script>
<script src="${pageContext.request.contextPath}/js/graph/cytoscape.js"></script>
下面是定式樣版(寫死了的模板)
<script>
$(function(){
cytoscape({
//選擇div
container: document.getElementById('cy'),
//給兩個節點和一條關係增加樣式
style: [
{ selector: 'node[label = "Person"]',
css: {'background-color': '#6FB1FC', 'content': 'data(name)'}},
{ selector: 'node[label = "Movie"]',
css: {'background-color': '#F5A45D', 'content': 'data(title)'}},
{ selector: 'edge',
css: {'content': 'data(relationship)', 'target-arrow-shape': 'triangle'} }
],
//顯示節點和關係的資料來源
elements: {
nodes: [
{data: {id: '172', name: 'Tom Cruise', label: 'Person'}},
{data: {id: '183', title: 'Top Gun', label: 'Movie'}}
],
edges: [
{data: {source: '172', target: '183', relationship: 'Acted_In'}}]
},
//圖資料顯示的佈局排版
layout: { name: 'grid'}
});
});
</script>
<body>
<div id="cy">
</div>
</body>
//需要注意的是：動態獲取資料來源的時候，需要對返回的json格式進行調整，總的來說返回來的是一個整體的物件就可以
不能是這樣： nodes：[ {data:{id:'172'},name:'Tom Cruise',label:'Person'} ]
必須這樣： nodes:[ {data:{id:'172',name:'Tom Cruise',label:'Person'}} ]
具體的cytoscape.js的動態使用方法，我會在我博文中的neo4j的文章分類中詳細介紹

⑧：手動提交表單，並根據結果集動態的新增不同數量不同引數的輸入框組

function subOnclick(){
/*組裝params物件引數*/
var params =$("#fromData").serializeArray();
$.param(params);
$.ajax({
url:"${pageContext.request.contextPath}/*/*",
type:"get",
data:params,
dataType:"json",
success:function(ret,status){
$("table td").remove();
for(var i=0;i<ret.length;i++){
$("#tbody").after("<tr>");
$("#tbody").after("<td>"+ret[i].text+"</td>");
$("#tbody").after("<td>"+ret[i].from+"</td>");
$("#tbody").after("<td>"+ret[i].to+"</td>");
$("#tbody").after("<tr>")
}
})

⑨：問題四：如何提交form表單

var params =$("#fromData").serializeArray();

copy/*組裝params物件引數*/ 遍歷尋找from表單中的value//遍歷查詢form表單引數

var data = {mid:$("#selects").val()};
$("#formData").find("input[type='text'].each(function(){
var paraValue = $(this).val().trim();
var paraName = $(this).attr("name");
var paraText = $(this).attr("placeholder");
data[paraName] = paraValue;
})")

⑩：如何清空下拉選單切換顯示資料造成的類冗餘cop

在哪一個選擇器後面append/after，就選擇誰清空
$("#tbody").empty();

問題五：jsp向controller傳送一個物件，controller使用什麼引數接受，不適用實體類物件的情況下（request，我竟然把作用域給忘記了）copy

@ResponseBody
@RequestMapping("/testGraph")
public Map<String,List<Map>> testGraph (HttpServletRequest request){
Enumeration enu = request.getParameterNames();
HashMap map = new HashMap();
while(enu.hasMoreElements()){
String paraName = (String)enu.nextElement();
map.put(paraName,request.getParameter(paraName));
}
Map<String,List<Map>> listMap = null;
try{
listMao = Neo4jService.RunModel(map);
}catch(Exception e){
e.printStackTrace();
}
return listMap;

}

問題六：如何解析後臺傳來的String資料

後臺傳遞過來的值：
modelInfo:{
modelName:"",
modelParam:[{paraName:"QD",paraText:"起點"，paraValue:""},{paraName:"ID",paraText:"ID"，paraValue:""}],
parentName:""
}
具體的解析操作：
@ResponseBody
@RequestMapping("/queryModelParams")
public JSONArray queryModelParams(Integer mid){
List<ModelParams> lists = demoService.queryMenuParams(mid);
//現將結果轉為jsonArray的形式
JSONArray jsonArray = JSONArray.fromObjrct(lists);
JSONArray params = null;
for(int i=0;i<jsonArray.size();i++){
//獲得jsonObject物件
JSONObject jsonObject = (JSONObject)jsonArray.get(i);
//獲得modelpara陣列
Object o = jsonObject.get("modelpara");
//獲得modelpara
params = JSONArray.fromObject(o);
}
return params;
}

①②：問題七：使用bootstrap進行簡單佈局 主要使用的就是一個封裝好的div <div class="row"> <div class="col-xs-2"> <div class="col-xs-10"> </div> 首先class=“row”是一個整體的類比於body 然後bootstrap是12網柵格，所以上面的和不能大於12 ①③問題八：對select/option下拉框進行樣式調整，我當時直接查詢bootstrap按照上面的寫，就不會寫改變事件了，後來在網上看到一個方法，頓時驚醒夢中人，在此做下記錄

在select中新增class="form-control"
如果學過easyui或者其他框架的話，都會知道，這些框架的總結就是大致是根據class=“*”來呼叫框架封裝的div樣式即可，
看到這個我才想起來。在這裡分享給大家吧問題

①④：問題九：上面bootstra類的區分？

.col-xs- 超小螢幕手機 (<768px)
.col-sm- 小螢幕平板 (≥768px)
.col-md- 中等螢幕桌面顯示器 (≥992px)
.col-lg- 大螢幕大桌面顯示器 (≥1200px)

①⑤：問題十：選中下拉框中的下拉選項/選中div後面的input-group，並賦值

選中下拉框中的下拉選項
$("select>option:gt(0)").hide();
<select>中<option>選項中第一個元素以後的option進行顯示/異常。。。其他操作
選中div中的input-group
$("#formData>.input-group:gt(2)").show();
在formData這個div中的input-group組中的第三個input框以後的顯示
對輸入框進行賦值
$("input[name='id']").valueOf().attr("value")//獲取值
$("input[name='id']").valueOf().attr("value",3);//賦值

NEO4J資料處理及顯示功能

NEO4J資料處理及顯示功能

OS資料處理及版本特性-json解析

IOS資料處理及版本特性-CoreData的增刪改查

IOS資料處理及版本特性-NSKeyedArchiver儲存和解析

IOS資料處理及版本特性-plist屬性列表檔案

IOS資料處理及版本特性-退出系統前的事件處理以及首次開啟app的處理

IOS資料處理及版本特性-對檔案,資料夾的操作

IOS資料處理及版本特性-沙箱結構中常見的幾個目錄

IOS資料處理及版本特性-解析XML檔案

IOS資料處理及版本特性-單例

Jackson資料處理及繫結

電影資料處理及分析

JData資料處理及高潛使用者購買意向預測

Ubuntu USB串列埠資料讀取及顯示

信用評分卡（A卡）基於LR模型的資料處理及建模過程

JSON資料處理及與echarts結合使用時所需要的問題

hive資料處理及hdfs檔案操作

Pandas日期資料處理：如何按日期篩選、顯示及統計資料

Pandas使用DataFrame進行資料分析比賽進階之路（二）：日期資料處理：按日期篩選、顯示及統計資料

Redis和nosql簡介,api呼叫；Redis資料功能（String型別的資料處理）；List資料結構（及Java呼叫處理）；Hash資料結構；Set資料結構功能；sortedSet（有序集合）數

NEO4J資料處理及顯示功能

相關推薦