总结下今天做的看图识别药材名的功能所遇到的问题以及解决措施。

效果图如下 对应的连接 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>

vue页面开发遇到的坑,都是泪!src属性，freemarker取值的更多相关文章

  1. [转载]常见的移动端H5页面开发遇到的坑和解决办法

    转过来,平时看看.虽然还有很多问题至今无解.比如:华为麒麟950的P8和meta打开我们的应用首页经常偶发白屏.!! 1.安卓浏览器看背景图片,有些设备会模糊. 用同等比例的图片在PC机上很清楚,但是 ...

  2. vue+node开发手机端h5页面开发遇到的坑

    项目进行中...随时更新 这里记录了一些手机端调试的方式 一 css 1.文字超过span宽度显示...(单行文字) .topWrap .introduce span { padding: 0 17p ...

  3. 常见的移动端H5页面开发遇到的坑和解决办法

    转过来,平时看看.虽然还有很多问题至今无解.比如:华为麒麟950的P8和meta打开我们的应用首页经常偶发白屏.!! 1.安卓浏览器看背景图片,有些设备会模糊. 用同等比例的图片在PC机上很清楚,但是 ...

  4. 【原】移动端vue页面点透事件 - 分析与解决

    近期项目遇到了vue页面事件被带到下一个页面的问题,也就是我们常说的点透事件,主要表现在android机器上,花了不少时间折腾,简单做下总结~ vue页面之间的切换通过Vue Router的route ...

  5. Vue页面间传值，以及客户端数据存储

    初学Vue,遇到了页面传值的问题,大概网上学习了解了一下,在此跟大家分享一下学习心得,欢迎批评指正. 一.参数传值 如果是简单的页面传值,比如传一个id到详情页等等,推荐使用参数传值. 这里页面是通过 ...

  6. SNF快速开发平台MVC-EasyUI3.9之-WebApi和MVC-controller层接收的json字符串的取值方法和调用后台服务方法

    最近项目组很多人问我,从前台页面传到后台controller控制层或者WebApi 时如何取值和运算操作. 今天就都大家一个在框架内一个取值技巧 前台JS调用代码: 1.下面是选中一行数据后右键点击时 ...

  7. JavaScript问题——在浏览器中每一个元素都有一个offsetParent属性，这个属性是什么？

    原文链接http://www.cnblogs.com/zcjnever/archive/2011/04/21/2023133.html Javascript中的offsetParent属性 支持的浏览 ...

  8. Spring Boot +Vue 项目实战笔记（二）：前后端结合测试（登录页面开发）

    前言:关于开发环境 每位 Coder 都有自己偏好的开发工具,从大的方面划分主要有文本编辑器流和 IDE 流两种,我有一段时间也喜欢用编辑器(Sublime Text.Vim),但对我来说开发效率确实 ...

  9. vue搭建多页面开发环境

    自从习惯开发了单页面应用,对多页面的页面间的相互跳转间没有过渡效果.难维护极度反感.但是最近公司技术老大说,当一个应用越来越大的时候单页面模式应付不来,但是没讲怎么应付不来,所以还得自己去复习一遍这两 ...

随机推荐

  1. 深入浅出CSS（二）：关于雪碧图、background-position与steps函数的三角恋情

    [测试代码] HTML <!DOCTYPE html> <html lang="en"> <head> <meta charset=&qu ...

  2. 【BZOJ】1415 [Noi2005]聪聪和可可 期望DP+记忆化搜索

    [题意]给定无向图,聪聪和可可各自位于一点,可可每单位时间随机向周围走一步或停留,聪聪每单位时间追两步(先走),问追到可可的期望时间.n<=1000. [算法]期望DP+记忆化搜索 [题解]首先 ...

  3. 5-python的封装与结构 - set集合

    目录 1 封装与解构 1.1 封装 1.2 解构 1.3 Python3的解构 2 set类型 2.1 set的定义 2.2 set的基本操作 2.2.1 增加元素 2.2.2 删除元素 2.2.3 ...

  4. Linux 内核进程管理之进程ID【转】

    转自:http://www.cnblogs.com/hazir/p/linux_kernel_pid.html Linux 内核使用 task_struct 数据结构来关联所有与进程有关的数据和结构, ...

  5. 一个python爬虫工具类

    写了一个爬虫工具类. # -*- coding: utf-8 -*- # @Time : 2018/8/7 16:29 # @Author : cxa # @File : utils.py # @So ...

  6. angular项目中使用jquery的问题

    1.使用npm命令往项目中添加jQuery. npm install jquery --save 2.在你想要用jQuery的组件中添加. import * as $ from "jquer ...

  7. 理解HTTP幂等性(转)

    原文链接:http://www.cnblogs.com/weidagang2046/archive/2011/06/04/2063696.html

  8. freemarker模板引擎的使用

    freemarker是一套前端模板引擎,在使用时,要先在web项目中添加freemarker.jar的依赖. 我在这里主要演示spring-mvc整合freemarker模板引擎.项目案例的文件包结构 ...

  9. strptime和strptime函数理解

    #include <stdio.h> #include <time.h> int main() { struct tm tm; char buf[255]; strptime( ...

  10. TCP可靠传输和拥塞控制

    1.TCP的可靠传输 tcp的可靠传输主要靠 来自接收方的确认报文 和 超时重传. 发出报文,计时器开始计时,在规定超时时间内未收到确认报文则重新发送. 注意:发送报文都留一个副本,如果收到确认报文就 ...