项目上用到thymeleaf这个模版,发现参数前后传递是个麻烦,做了下总结:
1.js将data传递到java Controller
在http://dk05408.iteye.com/blog/2101469可以看到
2.将数据从data从Java Controller传递到js 也有了
传递单个参数
java
@RequestMapping(value="/test",method = RequestMethod.POST) public String submit(String name,Model model){ //String name = request.getParameter("name"); // mailClient.send("dongkun01@vcredit.com", name); model.addAttribute("username",name); model.addAttribute("go","ggggggg"); return "account/testhome"; }
testhome.js
<!DOCTYPE html> <html xmlns:th="http://www.thymeleaf.org" xmlns:social="http://spring.io/springsocial" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout" layout:decorator="layout"> <head> <title>在线业务平台 主页</title> </head> <body> <div id="content" layout:fragment="content" > <h1>Result</h1> <p>Today is: <span th:text="${username}">13 February 2011</span></p> <p>The TestString Is: <span th:text="${go}">ready..</span></p> <a href="">下一步</a> </div> </body> </html>
传递Entity
java
@RequestMapping(value="/register", method=RequestMethod.POST) public String registerFormSubmit(@ModelAttribute CredentialUser user,Model model){ //register.registerAccount(user.getUsername(),"", ""); //auth.register(user.getUsername(), user.getPassword()); model.addAttribute("user", user); return "account/phonevalidation"; }
<!DOCTYPE html> <html xmlns:th="http://www.thymeleaf.org" xmlns:social="http://spring.io/springsocial" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout" layout:decorator="layout"> <head> <title>在线业务平台 主页</title> </head> <body> <div id="content" layout:fragment="content" > <h1>Result</h1> <p th:text="'登录人姓名: ' + ${user.username}" /> <p th:text="'登录人密码 :' + ${user.password}" /> <a href="">下一步</a> </div> </body> </html>
3.有List作为参数传递
@RequestMapping(value="/test",method = RequestMethod.POST) public String submit(String name,Model model){ model.addAttribute("username",name); model.addAttribute("go","ggggggg"); List<Account> accounts = new ArrayList<Account>(); for (int i = 0; i < 10; i++) { Account account = new Account(); account.setId(Long.valueOf(i)); account.setUsername("username"+i); account.setAddress("我的地址"+i); accounts.add(account); } model.addAttribute("accounts", accounts); return "account/testhome"; }
<!DOCTYPE html> <html xmlns:th="http://www.thymeleaf.org" xmlns:social="http://spring.io/springsocial" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout" layout:decorator="layout"> <head> <title>在线业务平台 主页</title> </head> <body> <div id="content" layout:fragment="content"> <h1>Result</h1> <p> Today is: <span th:text="${username}">13 February 2011</span> </p> <p> The TestString Is: <span th:text="${go}">ready..</span> </p> <a href="">下一步</a> <p><table> <tr th:each="account : ${accounts}"> <td th:text="${account.username}">...</td> <td th:text="${account.address}">...</td> </tr> </table> </p> </div> </body> </html>
得到的结果:
相关推荐
为了给初学者一些快速上手的前后端都包含的demo,特意以最简单的方式实现这个实例。 里面包含的有后端的增删改查代码以及html页面去调用接口实现前后端交互。
涉及的主要技术包括:springBoot框架与Thymeleaf模板引擎前后台交互,部分功能使用js/jquery/ajax实现,分页采用pageHelper分页技术,引入Mabatis持久化框架实现DAO层对数据的CURD操作;前端以...
Vue.js:一个渐进式JavaScript框架,用于构建交互式界面。 Sass 和 Less:CSS预处理器,用于简化和加强CSS的功能。 Bootstrap:一个用于快速开发响应式网站的前端框架。 jQuery:一个流行的JavaScript库,简化了处理...
前台采用 Tensorflow.js 中的 faceapi.js 来实现前端的人脸录入和人脸识别,采用 JavaScript 的多维浮点数组处理矩阵数据存入 MySQL 数据库,同时采用 Thymeleaf 模板引擎进行前后端数据之间的交互。
前端:HTML、CSS、JS、BootStrap 后端:Spring,SpringMVC,Mybatis,SpringBoot 数据库:MySQL,Druid连接池 其他:Maven、Thymeleaf 简介 此系统是基于Java EE的校园新闻平台。在后端方面选择以Spring Boot 为主...
为了Web页面的展示的更加充分,采用基于HTML5+CSS3技术的Bootstrap框架和SpringBoot推荐的Thymeleaf模板引擎,使得Web开发更加方便快捷,实现了普通用户的注册、登录界面,以及快速浏览、功能分类、信息交互等功能。
前端:HTML、CSS、JS、BootStrap 后端:Spring,SpringMVC,Mybatis,SpringBoot 数据库:MySQL,Druid连接池 其他:Maven、Thymeleaf 简介 此系统是基于Java EE的校园新闻平台。在后端方面选择以Spring Boot 为主...
MyBatis:作为持久层框架,负责与MySQL数据库进行交互,实现数据的增删改查操作。 MySQL:作为项目的数据库系统,存储和管理网站的数据信息。 Thymeleaf:作为前端模板引擎,负责页面的渲染和展示。 Bootstrap:作为...
2.开发语言:小程序尽量用小程序原生的编码方式,可以用uniapp,交互可以用jQuery,node.js。 后台用spring,springboot,MyBatis,也可以用jpa,hibernate,thymeleaf模板。后台管理界面用layui UI 或者vue。 3....
技术实现上,除了Spring Boot外,该项目可能还整合了如MyBatis或JPA等持久层框架来处理数据库交互,采用Thymeleaf或Vue.js等前端技术来构建用户界面,以及可能使用了Spring Security或JWT进行安全认证和授权。...
2.开发语言:小程序尽量用小程序原生的编码方式,可以用uniapp,交互可以用jQuery,node.js。 后台用spring,springboot,MyBatis,也可以用jpa,hibernate,thymeleaf模板。后台管理界面用layui UI 或者vue。 3....
前端使用的是Thymeleaf+原生的js/jquery。项目逻辑比较全面,满足斗地主游戏的基本需求,包括:玩家准备、抢地主、出牌、牌规则验证、出牌验证等,使用Websocket实时推送到前端交互,整体逻辑代码比较简洁明了,供...
前端采用HTML、CSS和JavaScript进行页面布局和交互设计,使用Thymeleaf模板引擎实现前后端数据绑定。 2. 系统功能:网上淘书吧提供了用户注册、登录、浏览书籍、搜索书籍、加入购物车、下单购买等功能。同时,还为...
前台门户面向的是客户,包含与客户交互的一切功能。例如: 搜索商品 加入购物车 下单 评价商品等等 前台系统我们会使用Thymeleaf模板引擎技术来完成页面开发。出于SEO优化的考虑,我们将不采用单页应用。
SSM是Spring + SpringMVC + MyBatis的组合,是Java开发中常用的一个web框架组合,它主要用于实现后端逻辑,包括数据处理、业务逻辑和与前端交互等。 如果你想用SSM来做一个学生成绩管理系统,下面是一个简单的步骤...
前端界面:可能使用Thymeleaf、Vue.js或其他前端技术构建的用户界面,提供用户友好的操作体验。文档说明:包含系统的安装指南、功能介绍、API文档等,方便用户和开发者理解和使用系统。测试用例:为确保系统质量,...
该项目采用了前后端分离的设计思路,前端使用HTML、CSS和JavaScript等技术进行页面布局和交互设计,后端则负责处理前端发送的请求,实现数据的存储和查询等功能。具体来说,前端主要包括首页、文章列表页、文章...
这个系统采用了前后端分离模式,使用了Springboot、Shiro、JWT、Redis、Layui、Thymeleaf、Swagger和Mybatis等技术。权限控制采用RBAC模型,代码易于理解和维护。此外,系统还支持JWT(无状态token)过期自动刷新和...
使用MyBatis作为持久层框架,实现了与MySQL数据库的高效交互。使用Thymeleaf模板引擎,实现了前后端分离,提高了页面渲染性能。使用Bootstrap框架进行前端页面设计,使页面具有良好的响应式效果。使用Ajax技术实现...
整个网站的权限控制,采用智威汤逊鉴权方案,对用户及API进行权限控制预览图:前台门户前台门户面向的是客户,包含与客户交互的一切功能例如:搜索商品加入购物车下单评价商品等等前台系统我们会使用Thymeleaf模板...