<%@ 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. ASP.NET中出现内存溢出错误System.OutOfMemoryException

    原因1:数据库服务器性能问题导致内存不够用,从而引起内存溢出 原因2:在IIS的应用程序池中进行配置,引起IIS服务器的内存分配问题,从而引起内存溢出   分析:      32位操作系统的寻址空间是 ...

  2. eval函数解析json数据时加上圆括号的原因

    var temp = eval("(" + data + ")"); //解析json数据 json是以”{}”的方式来开始以及结束的,在JS中,“{}”会被当 ...

  3. Mac + PyCharm 安装 Opencv3 + python2.7

    本文地址:http://www.cnblogs.com/QingHuan/p/7354074.html 转载请注明本文地址,方便读者查看本文更新,谢谢! 今天要在Mac上安装OpenCV,过程非常曲折 ...

  4. JAVA高级篇(二、JVM内存模型、内存管理之第一篇)

    JVM内存结构如 Java堆(Heap),是Java虚拟机所管理的内存中最大的一块.Java堆是被所有线程共享的一块内存区域,在虚拟机启动时创建.此内存区域的唯一目的就是存放对象实例,几乎所有的对象实 ...

  5. IC卡热复位时序

    热复位(warm reset):在时钟CLK和电源电压VCC处于激活状态的前提下,IC卡收到复位信号时产生的复位. 冷复位过程之后,如果收到的复位应答信号不满足规定,终端将启动热复位并从IC卡获得复位 ...

  6. hive数据导出到本地目录 抛异常

    经过反复试验,最终重启hdfs和hive解决问题 hive> insert overwrite local directory '/Users/wooluwalker/Desktop/' sel ...

  7. python写入txt文件时的覆盖和追加

    python写入文件时的覆盖和追加 在使用Python进行txt文件的读写时,当打开文件后,首先用read()对文件的内容读取,然后再用write()写入,这时发现虽然是用"r+" ...

  8. kafka-producer partitioner.class的使用

    partitioner.class的说明   在API客户端中封装好的partition( )方法会为消息选择一个分区编号.为了保证消息负载均衡到每个分区,可以通过使用默认方式或者 手动配置这个参数的 ...

  9. 十六、springcloud(二)Eureka集群

    1.创建子工程spring-cloud-peer(jar) 2.创建application-peer1.properties,application-peer2.properties applicat ...

  10. 【代码问题】SiameseFC

    [SiameseFC]: L Bertinetto, J Valmadre, JF Henriques, et al. Fully-convolutional siamese networks for ...