【完结】java基于vue，MongoDB的随机点名带头像功能

本文链接：https://blog.youkuaiyun.com/baidu_39037885/article/details/111060548

本文介绍了作者使用Java、Vue和MongoDB开发一个随机点名小程序的过程，遇到的问题及解决方法。在后端，通过SpringBoot处理请求；在前端，利用Vue进行界面交互，并解决了数据更新不显示的bug。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

今天突发奇想，结合之前前后端分离项目，做出一个随机点名小程序，结果中涂调了5个小时（我太菜了）
话不多数正式开始，首先是后端代码，基本和上一篇博客差别不大

【总结】基于Vue，springboot，MongoDB的简单前后端分离，

只是加了一个img属性，真正存还是在项目static下。

第一版前端代码，首先不能用size去查看数组大小，

var rand = Math.floor(Math.random()*app.$data.userlist.size);

修改后

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery(1)/jquery.min.js"></script>
    <script src="vue(1)/vue.js"></script>
    <script src="bootstrap/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">

</head>
<body>
 <div id="app">
    <table class="table table-striped">


                <img :src="uimg">
               <p>{{uname}}</p>
    </table>
     <div>
         <button v-on:click="randselect()">点我</button>
     </div>
 </div>

 <script>
    var app=new Vue({
        el:"#app",
        data:{
            userlist:[ ],
            uname:"admin",
            uimg:'jpg/2.png'
        },
        methods:{
        //
        //     delfun:function (delid) {
        //         $.ajax({
        //             url:"http://localhost:9001/delete",
        //             data:{
        //                 id:delid
        //             },
        //             success:function(mydata){
        //                if (mydata=="success"){
        //                    window.location.reload();
        //                }
        //             }
        //         });
        //     }


            randselect:function(){
                var arr = app.$data.userlist;
                var rand = Math.floor(Math.random()*app.$data.userlist.length);
                this.$data.userlist.uname = arr[rand].name;
                this.$data.userlist.uimg = arr[rand].img;
                // this.$forceUpdate();
                // this.$set(this.$data.userlist,"uname",arr[rand].name);
                // this.$set(this.$data.userlist,"uimg",arr[rand].img);
                // alert(this.$data.userlist.uname)
                this.$set(this.$data.userlist,this.$data.userlist.uname,this.$data.userlist.uimg)
            }

        },
           mounted:function (obj) {
            这个是钩子函数
            //如果ajax要执行，必须先执行钩子函数
            //这个钩子函数完成了对ajax的调用
            $.ajax({
                url:"http://localhost:9001/listall",
                //真正要执行的函数
                success:function(obj){
                    app.$data.userlist=obj;

                }
            });

        }
    });
</script>
</body>
</html>

发现运行正常但是不改变页面（改错过程消耗3小时。。落泪）
后发发现是赋值错误
崩溃
正确如下

<script>
    var app = new Vue({
        //vue对象声明的数据和方法，在id为maindiv的模块内生效
        el:"#maindiv",
        //data模块内部声明数据
        data:{
            userlist:[
            ],
            uname:"admin",
            uimg:"jpg/1.png"
        },
        methods:{
            randselect:function(){
                var arr = this.$data.userlist;
                var rand = Math.floor(Math.random()*app.$data.userlist.length);
                console.log(rand);


                this.$data.uname = arr[rand].name;

                this.$data.uimg = arr[rand].img;
            }
        },
        mounted:function (obj) {
            这个是钩子函数
            //如果ajax要执行，必须先执行钩子函数
            //这个钩子函数完成了对ajax的调用
            $.ajax({
                url:"http://localhost:9001/listall",
                //真正要执行的函数
                success:function(obj){
                    app.$data.userlist=obj;

                }
            });
        }
    });
</script>

被自己的智障气哭的一天

更新

加入了字符串的拼接

<body>
<div id="maindiv">
    <div>
        <img :src="uimg1+uimg">
        <br>
    </div>
    <div>
        <button v-on:click="randselect()">点我</button>
    </div>
</div>
<script>
    var app = new Vue({
        //vue对象声明的数据和方法，在id为maindiv的模块内生效
        el:"#maindiv",
        //data模块内部声明数据
        data:{
            userlist:[],
            uimg:"1.png",
            uimg1:"jpg/"
        },
        methods:{
            randselect:function(){
                var arr = this.$data.userlist;
                var rand = Math.floor(Math.random()*app.$data.userlist.length);
                this.$data.uimg = arr[rand].img;
            }
        },
        mounted:function (obj) {
            这个是钩子函数
            //如果ajax要执行，必须先执行钩子函数
            //这个钩子函数完成了对ajax的调用
            $.ajax({
                url:"http://localhost:9001/listall",
                //真正要执行的函数
                success:function(obj){
                    app.$data.userlist=obj;

                }
            });
        }
    });
</script>
</body>