<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>

<%@ taglib uri="http://java.sun.com/jsp/jstl/core"  prefix="c"%>

<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>Insert title here</title>

</head>

<body>

<div id="app">

<table border="" width="700px">

    <tr>

        <td>id</td>

        <td>名字</td>

        <td>性别</td>

        <td>年龄</td>

        <td>是否获奖</td>

    </tr>

    <tr v-for="ss in userList">

        <td>{{ss.id}}</td>

        <td>{{ss.userName}}</td>

        <td>{{ss.sex}}</td>

        <td>{{ss.age}}</td>

        <td>{{ss.status}}</td>

        <td>访问</td>

    </tr>

</table>

</div>

</body>

<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-3.2.1.min.js"></script>

<script type="text/javascript" src="${pageContext.request.contextPath}/js/vue.js"></script>

<script type="text/javascript">

    $.post("userAction_getAllUser",null,function(data){

        var vm = new Vue({

            el:'#app',

            data:data,

            timeout:,

            success:function(result){

                new Vue({

                    el:'#app',

                    data:myModel

                });

            },

            error:function(){

                alert('咦~出错了！');

            }

          })

    });

/*    
//第二种方法
var myModel={userList:[]};

    var vm = new Vue({

        el:'#app',

        data:myModel

    });

    function getData(){

        $.ajax({

            url:"userAction_getAllUser",

            type:'POST',

            dataType:'json',

            timeout:3000,

            success:function(result){

                myModel.userList = result.userList

            },

            error:function(){

                alert('咦~出错了！');

            }

        });

    }
getData();

*/   

    </script>

</html>

下面是后台Action的一部分代码

@Autowired

    private UserService userService;

    public String getAllUser(){

        jsonMap = new HashMap<String, Object>();

        jsonMap.put("postStatus",);//代表没有异常，成功生成数据

      //  jsonMap.put("message","恭喜!数据成功生成（给前端工程师看）");

        List<User> userList = userService.getAllUser();

        jsonMap.put("userList",userList);

        return "jsonOK";

    }

Struts配置

<struts>

    <constant name="struts.objectFactory" value="spring"></constant>

    <package name="myPackage" extends="struts-default,json-default">

        <action name="userAction_*" class="userAction" method="{1}">

            <result type="json" name="jsonOK">

                <param name="root">jsonMap</param>

            </result>

            <allowed-methods>getAllUser</allowed-methods>

        </action>

    </package>

</struts>

Vue.js连接后台数据jsp页面 ￣▽￣的更多相关文章

  1. Atitit vue.js 把ajax数据 绑定到form表单

    Atitit vue.js 把ajax数据 绑定到form表单 1.1. 使用场景:主要应用在编辑与提交场合..1 1.2. 绑定数据到form控件,可以使用jquery,不过vue.js更加简单1 ...

  2. Vue.js的列表数据的同步更新方法

    这次给大家带来Vue.js的列表数据的同步更新方法,Vue.js列表数据同步更新方法的注意事项有哪些,下面就是实战案例,一起来看一下. 数组的 push(),pop(),shift(),unshift ...

  3. Vue.js实现一个SPA登录页面的过程

    技术栈 vue.js 主框架 vuex 状态管理 vue-router 路由管理 一般过程 在一般的登录过程中,一种前端方案是: 检查状态:进入页面时或者路由变化时检查是否有登录状态(保存在cooki ...

  4. Vue.js写一个SPA登录页面的过程

    技术栈 vue.js 主框架 vuex 状态管理 vue-router 路由管理 一般过程 在一般的登录过程中,一种前端方案是: 检查状态:进入页面时或者路由变化时检查是否有登录状态(保存在cooki ...

  5. vue项目模拟后台数据

    这次我们来模拟一些后台数据,然后去请求它并且将其渲染到界面上.关于项目的搭建鄙人斗胆向大家推荐我的一篇随笔<Vue开发环境搭建及热更新> 一.数据建立 我这里为了演示这个过程所以自己编写了 ...

  6. webpack配合vue.js实现完整的单页面demo

    本篇文章主要是我在开发前研究了webpack+vue.js的单页面应用,因为需要用到node的npm,所以确保安装了node,建议官网安装最新的稳定版本.并且在项目中需要加载一些npm包,由于npm的 ...

  7. 在Vue中由后台数据循环生成多选框CheckBox时的注意事项

    多选框是一种非常常见的功能,有时候我们会根据后台返回的数据进行多选框渲染,之前做项目时遇到循环生成多选框时,v-model绑定的值会随着选中与取消改变,但页面却不会变化 的情况,后来测试了一下,发现多 ...

  8. Vue Router根据后台数据加载不同的组件(思考->实现->不止于实现)

    实际项目中遇到的需求 同一个链接需要加载不同的页面组件.根据用户所购买服务的不同,有不同的页面展现. 有一些不好的实现方式 直接把这几个组件写在同一个组件下,通过v-if去判断.如果这么做的话,甚至可 ...

  9. Vue.js学习 Item4 -- 数据双向绑定

    Vue.js 的模板是基于 DOM 实现的.这意味着所有的 Vue.js 模板都是可解析的有效的 HTML,且通过一些特殊的特性做了增强.Vue 模板因而从根本上不同于基于字符串的模板,请记住这点. ...

随机推荐

  1. Linux下查看CPU型号,内存大小,硬盘空间的命令(详解)

    1 查看CPU 1.1 查看CPU个数 # cat /proc/cpuinfo | grep "physical id" | uniq | wc -l 2 **uniq命令:删除重 ...

  2. 12.python-metaclass元类

    1.python中一切皆是对象,类本身也是一个对象,当使用关键字class的时候,python解释器在加载class的时候会创建一个对象(这里的对象指的是类而非类的实例) class Foo: #cl ...

  3. 关于C语言实现判断给定一个数，判断其是否是一个质数(素数)。

    Annotation:⒈我们需要明确0,1既不是质数,又不是合数.⒉其次我们需要知道一个质数,质数定义为在大于1的自然数中,除了1和它本身以外不再有其他因数.(自然数:自然数用以计量事物的件数或表示事 ...

  4. lvs UDP端口负载均衡配置

    ! Configuration File for keepalived global_defs { notification_email { test@163.com } notification_e ...

  5. 第一章 C#入门 (Windows窗体应用程序)（三）

    [案例] 编写一个Windows窗体应用程序,窗体上有一个文本框和两个按钮([显示]和[清除]按钮). 单击[显示]时,文本框的背景变为蓝色并且居中显示“努力学习C#”: 单击[清除]按钮,文本框的背 ...

  6. Spring Boot - 配置介绍

    Spring Boot 针对常用的开发场景提供了一系列自动化配置来减少原本复杂而又几乎很少改动的模板配置内容,但是,我们还是需要了解如何在Spring Boot中修改这些自动化的配置,以应对一些特殊场 ...

  7. Hash 1.04 右键

    http://keir.net/hash.html Windows Registry Editor Version 5.00 [HKEY_CLASSES_ROOT\*\shell\Hash 1.04\ ...

  8. 虚拟机网络连接NAT模式，本地用Xshell连接

    当虚拟机centos6网络连接使用NAT模式时,因为共用宿主机ip所以当使用Xshell时直接填写虚拟机的ip地址和22端口是无法连接虚拟机的. 这样就需要配置端口映射关系! 1. 打开虚拟网络编辑器 ...

  9. 【算法和数据结构】_14_小算法_Blank字符替换

    /* 本程序用来将输入的制表符替换为\t, 而将退格替换为\b, 将反斜杠替换为\\ */ #include <stdio.h> #include <stdlib.h> typ ...

  10. 查找二叉树(tree_a)

    问题 E: 查找二叉树(tree_a) 时间限制: 1 Sec  内存限制: 128 MB提交: 206  解决: 152[提交][状态][讨论版][命题人:quanxing][Edit] [Test ...