springMVC+Thymeleaf+VUE2后台向前台传值方式

springMVC+Thymeleaf+VUE2后台向前台传值方式

1、@ModelAttribute

功能,注册以及别名,如@ModelAttribute(“testData”) Usertest testData,意思是将Usertest 对象注册一下,并且前台访问的别名为testData

后台用法:

//传递参数@ModelAttribute

testData.setUsename("测试@ModelAttribute获取");

thymeleaf 页面获取:

@ModelAttribute testData : <div th:text="${testData.usename}"></div>  <br/>

thymeleaf js获取

thymeleaf模板中,VUE中可以写thymeleaf的插值表达式,模板加载时会解析成对应的字符串

var temp3 = [[${testData.usename}]]; //传递参数@ModelAttribute

alert("-----传递参数@ModelAttribute-----:"+temp3);

2、Model

类似一个map集合,将后台数据放入map集合中,传递给前台,跟struts中写map一样,只不过这里固定了类型叫Model,前台跟struts的map不一样了,到达前台时给拆分了,比如我放入一个aa,前台不是map.aa,而且直接aa

后台用法:

//传递参数Model

model.addAttribute("modelData", "测试model获取");

前台用法:

传递参数Model : <div th:text="${modelData}"></div><br/>

js获取:

alert("-----传递参数HttpServletRequest:"+temp1);

var temp2 = [[${modelData}]]; //传递参数Model

3、HttpServletRequest

这个常用,放入方法的输入参数中
后台用法:

//传递参数HttpServletRequest

request.setAttribute("requestTestData", "测试request数据");

thymeleaf页面用法:

传递参数HttpServletRequest : <div th:text="${requestTestData}"></div><br/>

thymeleaf js用法:

var temp1 = [[${requestTestData}]]; //传递参数HttpServletRequest

alert("-----传递参数HttpServletRequest:"+temp1);

demo:

    /**     
     *初始化方法,这里默认不查询数据
     * @param dc
     * @return
     */
    @RequestMapping({ "/" })
    //跳转页面不需要@responseBody
    public String init(@ModelAttribute("responseData") DataCenter dc,
    		@ModelAttribute("testData") Usertest testData,
    		Model model,
    		HttpServletRequest request) {
    	dataWrap.getPageInfo().setRowOfPage(15);
    	//传递参数@ModelAttribute
    	testData.setUsename("测试@ModelAttribute获取");
    	//传递参数Model
    	model.addAttribute("modelData", "测试model获取");
    	//传递参数HttpServletRequest
    	request.setAttribute("requestTestData", "测试request数据");
    	//设置参数
    	String query_Date = "2018-02-05 00:00:00";
    	model.addAttribute("query_Date", query_Date);
    	//获取查询条件里的交易月份,由于获取到的是2018-01-25 00:00:00 格式 需要转化为201801 故作此处理
    	QueryParamList paramQueryParamList = new QueryParamList();
        paramQueryParamList.addParam("gdYjysbmJyyf","201802");
    	return "gd/yjydlsb.html";
    }
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head>
	<template th:substituteby="framework/pageset.html"></template>
</head>
  <body>
    <div id="app" view>
@ModelAttribute testData : <div th:text="${testData.usename}"></div>  <br/>
传递参数Model : ${modelData} [[${modelData}]]<div th:text="${modelData}"></div><br/>
传递参数HttpServletRequest : <div th:text="${requestTestData}"></div><br/>
      </div>
    <script th:inline="javascript">
	var dealFlag = "1";
	var vm = new Vue({
		el : "#app",
		data : {
			accountCode:"",
		    begintime:"",
		    endtime:"",
		    ipAddress:"",
		    onlineFlag:""
		},
		mounted : function(){
			//页面加载完成后执行
			myTable.setData(response.getAjaxDataWrap("dataWrap"));
 
			$("#dataTotal").html("请选择交易月份");
			//设置时间
			var s =[[${query_Date}]];
			s = s.replace(/-/g,"/");
			var date = new Date(s );
			this.begintime=date;
			//接收参数
			var temp1 = [[${requestTestData}]]; //传递参数HttpServletRequest
			alert("-----传递参数HttpServletRequest:"+temp1);
			var temp2 = [[${modelData}]]; //传递参数Model
			alert("传递参数Model-----:"+temp2);
			var temp3 = [[${testData.usename}]]; //传递参数@ModelAttribute
			alert("-----传递参数@ModelAttribute-----:"+temp3);
 
		},
		methods : {
			query: function(){
				
			},
			report: function(){
				
			}
		}
	});
	function nextpage(){
		vm.query();
	}
</script>
</body>
</html>

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
SpringBoot是一款以简化开发的方式来构建Java应用程序的框架,它提供了许多开箱即用的特性和便捷的配置方式Thymeleaf是一个用于处理服务器端渲染的模板引擎,可以将动态数据注入到HTML模板中。SSM是指Spring+SpringMVC+MyBatis的组合,是一套经典的Java Web开发框架。Vue.js是一款用于构建用户界面的渐进式框架,可以实现前端的组件化开发和数据驱动视图更新。 要实现简单的增删改查功能,可以按照以下步骤进行: 1. 首先,使用SpringBoot创建一个新的项目,并引入Thymeleaf、SSM和Vue.js相关的依赖。 2. 创建一个数据库表,用于存储需要进行增删改查操作的数据。可以使用MySQL等关系型数据库。 3. 在SpringBoot的配置文件中配置数据库连接信息,并创建对应的数据源和事务管理器。 4. 创建实体类,在实体类中定义需要操作的属性和对应的数据字段。 5. 创建MyBatis的Mapper接口和对应的XML文件,用于定义数据库操作的SQL语句。 6. 在SpringBoot的配置类中配置MyBatis相关的扫描和注入。 7. 创建控制器类,处理前端请求。 8. 在控制器类中定义增删改查的方法,并调用对应的Mapper接口执行数据库操作。 9. 创建前端页面,使用Vue.js来实现数据的展示和交互。 10. 在前端页面中绑定相应的事件和请求,通过HTTP请求调用后端控制器的方法。 11. 在页面中显示查询的数据,并提供相应的操作按钮,通过绑定事件来实现增删改的功能。 12. 启动项目,通过浏览器访问前端页面,即可进行增删改查的操作。 以上是一个基本的步骤,具体的实现会涉及到很多细节,需要根据具体的需求和技术选型来进行调整和优化。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值