vue ajax连用显示数据库中的内容

最新推荐文章于 2024-05-28 17:33:08 发布

画凉词微

最新推荐文章于 2024-05-28 17:33:08 发布

阅读量638

点赞数

本文链接：https://blog.csdn.net/zhy277/article/details/106909067

版权

转化为json数据
Dao

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

Service

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

controller

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

前端代码：vue与Ajax连用

<!DOCTYPE html>
<html xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8">
    <title>Vue 测试实例 - 菜鸟教程(runoob.com)</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写一个调用vue前端页面的东西。

画凉词微

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
vue ajax连用显示数据库中的内容

转化为json数据Dao@Query(value="select * from student",nativeQuery = true) List<Student> findAllD();Service public List<Student> findAllDate(){ return studentDao.findAllD(); }controller @RequestMapping("/a") @ResponseBody
复制链接

扫一扫