Vue 与 ajax连用，调用显示数据库数据

最新推荐文章于 2024-05-03 09:23:40 发布

原创最新推荐文章于 2024-05-03 09:23:40 发布 · 1.9k 阅读

8 ·

CC 4.0 BY-SA版权

本文介绍如何使用Vue和Ajax从前端展示数据库内容，通过示例代码详细解释了数据的获取与显示过程，包括HTML、JavaScript和后端交互。

数据库内容在前端显示为
在这里插入图片描述
与vue二位数组相似

[{"name":"aaa","id":999}]

所以可以用vue与Ajax来显示数据库内容，格式如下：

<!DOCTYPE html>
<html xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8">
    <title>Vue</title>
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
    {{message}}

    <ul >
        <li v-for="(v,index) in loves"> {{v.id}}----{{v.name}}----{{v.score}}----{{v.birthday}} </li>
    </ul>

    <input name="name" v-model="message">

    <input name="button" type="button" value="点我" v-on:click="getDate()">


</div>

<script>
    var vm=new Vue({
        el:"#app",
        data:{
            message:"内容",
            like:"apple",
            loves:[]//二维数组
        },
        methods:{
            getDate:function(){
                // alert(333);//验证是否能够使用
               // Vm.message="点击后修改的内容"
                $.ajax({
                    type:'post',
                    url: '/student/a',//请求目标
                    data: "",
                    daraType:"json",//返回数据格式类型
                    success: function(result) {//返回数据
                        //alert(JSON.Stringify(result));//json解析为字符串
                        var len = result.length;
                        vm.loves=[];//赋值为空  第二次点击时不会起效果（重复出现）
                        for (var i=0;i<len;i++){
                            vm.loves.push(result[i]);//push往数组中追加元素
                        }
                    },
                    errer:function () {
                        alert("显示错误");
                    }
                });

            }


        }

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

controller

 @RequestMapping("/a")
    @ResponseBody
    public List<Student> toindex(Model model) {//查询全部
        List<Student> list = studentService.findAllDate();
        model.addAttribute("student", list);
        return list;
    }

Dao

  @Query(value="select  * from student",nativeQuery = true)
    List<Student> findAllD();//student为表名

Service

 public List<Student> findAllDate(){
        return studentDao.findAllD();
    }

剩下