總結下今天做的看圖識別葯材名的功能所遇到的問題以及解決措施。
效果圖如下 對應的連接 http://www.xinghengedu.com/getTenActivityQuestions.jspx 可以玩一玩。
樂姐將設計圖頁面設計好交給我之后，就開始完成隨機出題的功能。
看上去挺簡單，實現后也感覺湊合，但是開發中遇到的問題着實不少。
一開始計划直接將數據寫成json格式的數據放到js文件，由於數據不固定還有不容易統一，還需要隨機出題
索性將輸入導入數據庫，后台傳入返回json得了。因為sql有個可以隨機排序的語句
在查詢語句后面加入
ORDER BY RAND()
隨機數據實現完成，相對於后端人員而言沒啥，但是要操作頁面這對后端的苦逼java程序員就比較蛋疼了。由於不是前后端分離，前端也得懂一部分。
List<Map<String, Object>> list = activityService.getTenActivityQuestions(); JSONArray fromObject = JSONArray.fromObject(list); model.put("listQuestions", fromObject.toString());
獲取數據直接通過${listQuestions} freemarker取值通過【#list】遍歷即可
蛋疼的是${listQuestions}不能直接獲取json對象，沒辦法后台通過JSONArray.fromObject();給轉換成了json字符串，頁面再通過JSON.parse();來進行轉換，這塊很蛋疼。
使用vue來實現頁面的初始化數據處理。(由於最近開發小程序，中途學了下vue，索性臨時讓做的小功能就用vue來實現，練練手)
lists對象是獲取到了，由於題目是一個動態圖片，src路徑拼接很頭痛。
因為你的數據是vue里面的，而你的src是不能直接引入，需要加:src :是v-bind的縮寫
里面src的值默認是有{{}}的，所以是不需要加{{}}，但是面臨的問題是路徑是需要拼接的，這個時候需要使用單引號'來進行操作
沒錯，就這么簡單，但你不了解人家的語法的話，步入的坑只能自己爬了。
@click=""事件綁定其實挺好入門，但是傳數據的時候也是默認有{{}} 因為本就是vue語法
傳遞參數
var s = new Set(); while(s.size<4){ s.add(Math.floor(Math.random()*(4))); } var set = Array.from(s);
使用這種方式隨機選取0-3的小數據，也就是隨機排序。
使用
Math.floor(Math.random()*(4))
set跟java的set不一樣，java的set底層跟hashMap里面的key的機制是一樣的
JavaScript的set就相對簡單多了，只是不重復的功能，是有順序的。這就蛋疼了，無奈只能通過隨機數判斷size來實現。
功能基本實現之后有需要一個功能是答對答錯有對應的鈴聲。要求播放一秒，
音頻好實現。
<audio>即可，雖然是第一次用。
可是有個問題就是需要播放一秒。
無奈，自定義一個sleep方法。
vue里面定義的。到時候也是可以直接調用的。
功能是實現了，又有個問題，'並發問題'，問了下邊上搞安卓端，怎么給JavaScript枷鎖
我他媽這想法也是絕了，之后人家直接給我說，js是單線程的。
蒙了，哦，是自己的代碼邏輯有問題，之后使用vue的
watch進行監聽，算是實現了吧。
ok，提交html，對應的圖片，MP3，css，.class
放到線上之后，音頻播放不了。調試發現，音頻500，報tomcat錯誤。
(標記是500)
郁悶，明明有這個東西，為啥會報五百
問老大才搞明白，原來這都數據靜態資源，線上的服務器並沒有做mp3資源放行
ok，算是結束了，功能到此結束。
完整代碼 代碼量着實不大，主要是對vue，freemarker不是特別了解，vue不能靈活使用，慢慢來吧騷年。
<body>
<div class="main" id="app">
<!-- 頁面一：開始測試 -->
<div class="m1">
<div class="top_zi"><img src="/${res}/img/yaocaitu/tu1_zi.png" /></div>
<div class="ask"><img src="/${res}/img/yaocaitu/ask.png" /></div>
<div class="btn_test"><a id="begin"><img src="/${res}/img/yaocaitu/btn_test.png" /></a></div>
</div>
<!-- 頁面二：做題 -->
<div class="m2" >
<div class="title"><img src="/${res}/img/yaocaitu/title_bg.png" /><h2>題目<span>{{questionNumber[index/4]}}</span></h2></div><!-- {{lists[index].right_answer}} -->
<div class="cont">
<div class="tu">
<img v-bind:src="'/${res}/img/yaocaitu/yc_name/'+lists[index].content+'.jpg'"/>
</div>
<div class="yun"><img src="/${res}/img/yaocaitu/tb_yun.png" /></div>
</div>
<ul class="option">
<li @click="clickOption(lists[index+set[0]].right_answer)"><a>A {{lists[index+set[0]].right_answer}}</a></li>
<li @click="clickOption(lists[index+set[1]].right_answer)"><a>B {{lists[index+set[1]].right_answer}}</a></li>
<li @click="clickOption(lists[index+set[2]].right_answer)"><a>C {{lists[index+set[2]].right_answer}}</a></li>
<li @click="clickOption(lists[index+set[3]].right_answer)"><a>D {{lists[index+set[3]].right_answer}}</a></li>
</ul>
</div>
<!-- 頁面三：提示回答錯誤 -->
<div class="m3">
<div class="regret"><img src="/${res}/img/yaocaitu/regret.png" /></div>
<div class="wrong"><img src="/${res}/img/yaocaitu/wrong.png" /></div>
<div class="btn_think"><a id="again"><img src="/${res}/img/yaocaitu/btn_think.png" /></a></div>
</div>
<!-- 頁面四：完成10道題 -->
<div class="m4">
<a class="share"><img src="/${res}/img/yaocaitu/share.png" /></a>
<div class="wish"><img src="/${res}/img/yaocaitu/wish.png" /></div>
<div class="cup"><img src="/${res}/img/yaocaitu/cup.png" /></div>
<div class="ewm">
<p>更多精華考點及<br/>真題 盡在星題庫</p>
<img src="/${res}/img/yaocaitu/tk_ewm.png" />
</div>
</div>
</div>
<!-- 音樂控制按鈕 -->
<div class="music">
<audio loop="loop" id="audio" src="http://go.163.com/2018/0209/mengniu/audio/bgm.mp3" preload="auto" autoplay></audio>
<audio id="musicOk" src="/${res}/img/yaocaitu/ok.mp3" preload="auto"></audio>
<audio id="musicNo" src="/${res}/img/yaocaitu/no.mp3" preload="auto"></audio>
</div>
<script type="text/javascript" src="http://libs.baidu.com/jquery/1.11.1/jquery.min.js"></script>
<script>
var s = new Set(); while(s.size<4){ s.add(Math.floor(Math.random()*(4))); } var set = Array.from(s); new Vue({ el: '#app', data: { lists:JSON.parse('${listQuestions}'), index:0, set:set, questionNumber:['一','二','三','四','五','六','七','八','九','十'] }, methods: { clickOption:function(value){ console.log(value,this.lists[this.index].right_answer); var flag = value==this.lists[this.index].right_answer; if(flag){ this.index = this.index+4 $("#musicOk")[0].play(); if(this.index==40){ $(".m2").hide(); $(".m4").show(); } }else{ $("#musicNo")[0].play(); $(".m2").hide(); $(".m3").show(); } }, sleep:function(n){ var start = new Date().getTime(); while (true) { if (new Date().getTime() - start > n) { break; } } } }, watch:{ index:function(value){//監聽index變化之后睡眠500毫秒。
this.sleep(500); var s = new Set(); while(s.size<4){ s.add(Math.floor(Math.random()*(4))); } this.set = Array.from(s); } } }); $("#begin,#again").click(function(){ $(".m1").hide(); $(".m2").show(); $(".m3").hide(); }); </script>
</body>