The pits encountered in vue page development are all tears! src attribute, freemarker value

The pits encountered in vue page development are all tears! src attribute, freemarker value

Summarize the problems encountered in the function of looking at pictures to identify the names of medicinal materials and their solutions.

The renderings are as follows and the corresponding link  http://www.xinghengedu.com/getTenActivityQuestions.jspx  can be played.

After Le Sister gave the design page to me, she started to complete the function of randomly creating questions.

It looks very simple, and it feels good after implementation, but there are many problems encountered in development.

At the beginning, it was planned to directly write the data into json format data and put it into the js file. Because the data is not fixed and it is not easy to unify, it is necessary to randomly ask questions.

Simply import the input into the database, and return the json back to the background. Because sql has a statement that can be sorted randomly

Add after the query statement

ORDER BY RAND()

The random data implementation is complete, which is nothing compared to the back-end personnel, but it is more painful for the back-end java programmers to manipulate the page. Since the front and back ends are not separated, the front end also has to understand part.

List<Map<String, Object>> list = activityService.getTenActivityQuestions();
        JSONArray fromObject = JSONArray.fromObject(list);
        model.put("listQuestions", fromObject.toString());

Get the data directly through the ${listQuestions} freemarker value and traverse through [#list]

What’s painful is that ${listQuestions} can’t get the json object directly, and there’s no way to convert it into a json string through JSONArray.fromObject(); in the background, and then the page is converted through JSON.parse();. This is very painful. .

Use vue to realize the initial data processing of the page. (Because of the recent development of small programs, I learned Vue midway, and I used Vue to realize the small functions that I asked to do temporarily, and practiced my hands.)

The lists object is obtained. Since the title is a dynamic picture, the src path stitching is a headache.

Because your data is in vue, and your src cannot be imported directly, you need to add :src: is the abbreviation of v-bind

The value of src inside is {{}} by default, so {{}} is not needed, but the problem is that the path needs to be spliced, this time you need to use single quotation marks for operation

Yes, it's that simple, but if you don't understand other people's syntax, you can only climb into the pit by yourself.

 @click=""Event binding is actually pretty good to get started, but {{}} is the default when transferring data because it is Vue syntax

Pass parameters

var s = new Set();
while(s.size<4){
    s.add(Math.floor(Math.random()*(4)));
} 
var set = Array.from(s);

In this way, small data from 0 to 3 are randomly selected, that is, random sorting.

use

Math.floor(Math.random()*(4))

Set is different from java set. The underlying mechanism of java set is the same as the key mechanism in hashMap.

JavaScript set is relatively simple, but the functions that are not repeated are in order. This is painful, but it can only be achieved by judging the size by random numbers.

After the function is basically realized, there is a need for a function to have a corresponding ringtone for correct and wrong answers. Ask to play for one second,

Audio is easy to achieve.

<audio> is fine, although it is the first time to use it.

But one problem is that it needs to be played for one second.

Helpless, customize a sleep method.

Defined in vue. It can also be called directly at that time.

The function is realized, and there is another question, "concurrency problem", I asked the bottom of the Android terminal, how to lock JavaScript

My damn idea was absolutely utterly absurd, and then they told me directly that js is single-threaded.

Meng, oh, there is a problem with my own code logic, and then use vue

Watch for monitoring is realized.

ok, submit html, corresponding picture, MP3, css, .class

After putting it online, the audio cannot be played. Debugging found that the audio 500, reported tomcat error.

(The mark is 500)

I'm depressed, I obviously have this thing, why would I get five hundred?

I asked the boss to figure it out. It turns out that these are static data resources, and the online server did not release mp3 resources.

 Ok, it's over, the function ends here.

The amount of complete code is really small, mainly because I don't know much about vue and freemarker. Vue can't be used flexibly, so take your time.

<body>
<div class="main" id="app">
    <!-- Page 1: Start the test -->
    <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>
    <!-- Page Two: Do ​​Questions-->
    <div class="m2">
        <div class="title"><img src="/${res}/img/yaocaitu/title_bg.png"/><h2>Title<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>
    <!-- Page Three: Prompt to answer incorrectly -->
    <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>
    <!-- Page 4: Complete 10 questions -->
    <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>More essential test sites and<br/>real questions are in the star test bank</p>
            <img src="/${res}/img/yaocaitu/tk_ewm.png"/>
        </div>
    </div>
</div>
<!-- Music control button-->
<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:['one','two','three','four','five','six','seven','eight','nine','ten']
    },
    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){//Sleep for 500 milliseconds after listening to index changes.
            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>
Reference: https://cloud.tencent.com/developer/article/1335884 The pits encountered in vue page development are all tears! src attribute, freemarker value-Cloud + Community-Tencent Cloud