前端笔记-freemarker模板获取后端数据及提交数据
发布日期:2021-06-30 10:41:00
浏览次数:3
分类:技术文章
本文共 3573 字,大约阅读时间需要 11 分钟。
目录
基本概念
这里有如下页面:
这里面表单的数据都是从后端获取的,点获取数据,会调用getRecord方法从数据库获取数据。
点击提交备注,是备注可以让用户填写。
提交后,更新数据库中的数据。
在freemarker中使用${xxxx},这种方式获取单条的数据。
代码与实例
前端代码如下:
数据获取页面 获取数据
这里有几个重要的知识点:
表单中有两个按钮该如何发请求。
这里做一个原始的按钮使用
另一个按钮使用JavaScript脚本:
其中对应的函数如下:
其中对应的后端如下:
package com.example.demo.controller;import com.example.demo.model.DataForm;import com.example.demo.object.WebData;import com.example.demo.service.WebDataService;import org.springframework.beans.factory.annotation.Autowired;import org.springframework.stereotype.Controller;import org.springframework.web.bind.annotation.GetMapping;import org.springframework.web.bind.annotation.ModelAttribute;import org.springframework.web.bind.annotation.PostMapping;import java.util.Map;@Controllerpublic class IndexController { @Autowired WebDataService service; @GetMapping({"/", "/index", "index.html"}) public String getIndex(Mapmap){ map.put("userName", "131******1232"); map.put("password", "abc*******123"); map.put("createTime", "2019-12-08 20:36:32"); map.put("remarks", "如:可以使用(禁止带空格)can_be_used"); return "index"; } @PostMapping("/getRecord") public String getRecord(Map map){ WebData unUserdAccount = service.getUnUserdAccount(); if(unUserdAccount != null){ map.put("userName", unUserdAccount.getUserName()); map.put("password", unUserdAccount.getPassword()); map.put("createTime",unUserdAccount.getCreateTime()); map.put("remarks", ""); } else{ //数据库中无数据的情况下: map.put("userName", "无数据,请联系站长补充!"); map.put("password", "无数据,请联系站长补充!"); map.put("createTime", "无数据,请联系站长补充!"); map.put("remarks", "无数据,请联系站长补充!"); } return "index"; } @PostMapping("/updateWebData") public String updateWebData(@ModelAttribute("form") DataForm form){ WebData webData = new WebData(); webData.setUserName(form.getUserName()); webData.setPassword(form.getPassword()); webData.setRemarks(form.getRemarks()); if(service.updateRemarksByWebData(webData)){ return "redirect:/index"; } //TODO System.out.println("有异常"); return "redirect:/index"; }}
这里接收前端数据用了DataForm,把DataForm里面的成员,设置为前端Input的name
package com.example.demo.model;import lombok.Data;@Datapublic class DataForm { private String userName; private String password; private String createTime; private String remarks;}
通过这种方式来获取前端数据!
后端在请求中增加map,通过往map中增加数据,来给前端提供数据:
如下伪代码:
@PostMapping("/getRecord") public String getRecord(Mapmap){ WebData unUserdAccount = service.getUnUserdAccount(); if(unUserdAccount != null){ map.put("userName", unUserdAccount.getUserName()); map.put("password", unUserdAccount.getPassword()); map.put("createTime",unUserdAccount.getCreateTime()); map.put("remarks", ""); } else{ //数据库中无数据的情况下: map.put("userName", "无数据,请联系站长补充!"); map.put("password", "无数据,请联系站长补充!"); map.put("createTime", "无数据,请联系站长补充!"); map.put("remarks", "无数据,请联系站长补充!"); } return "index"; }
转载地址:https://it1995.blog.csdn.net/article/details/103453813 如侵犯您的版权,请留言回复原文章的地址,我们会给您删除此文章,给您带来不便请您谅解!
发表评论
最新留言
路过按个爪印,很不错,赞一个!
[***.219.124.196]2024年04月09日 09时03分39秒
关于作者
喝酒易醉,品茶养心,人生如梦,品茶悟道,何以解忧?唯有杜康!
-- 愿君每日到此一游!
推荐文章
【深度学习笔记】pytorch的点乘(dot product)
2019-04-30
【深度学习笔记】残差
2019-04-30
【python学习笔记】读取指定文件夹中的图片,结合边缘保留滤波EPF
2019-04-30
【工具和环境】Linux下安装pycharm
2019-04-30
【Accumulation】The definition of SISR
2019-04-30
【工具与环境】Windows下安装Sublime Text 3
2019-04-30
【工具与环境】Excel中批量插入行
2019-04-30
【个人实验注意事项】
2019-04-30
【学习笔记】对vanilla的一些个人理解
2019-04-30
【解决错误】The size of tensor a (8) must match the size of tensor b (64) at non-singleton dimension 1
2019-04-30
word文档中实现目录索引中标题加粗,前导符和页码不加粗
2019-04-30