关键词搜索

源码搜索 ×
×

前端笔记-freemarker模板获取后端数据及提交数据

发布2019-12-09浏览12385次

详情内容

目录

 

基本概念

代码与实例

 

基本概念

这里有如下页面：

这里面表单的数据都是从后端获取的，点获取数据，会调用getRecord方法从数据库获取数据。

点击提交备注，是备注可以让用户填写。

提交后，更新数据库中的数据。

在freemarker中使用${xxxx}，这种方式获取单条的数据。

 

 

代码与实例

前端代码如下：

  1. <!DOCTYPE html>
  2. <head>
  3.     <meta charset="UTF-8" />
  4.     <link rel="stylesheet" href="https://cdn.jsdelivr.net/semantic-uihttps://cdn.jxasp.com:9143/image/2.2.4/semantic.min.css">
  5.     <title>数据获取页面</title>
  6. </head>
  7. <body>
  8. <br>
  9. <br>
  10. <br>
  11. <br>
  12. <div class="m-container m-padded-tb-big doubling">
  13.     <div class="ui container doubling">
  14.         <div class="ui row">
  15.             <div class="seven wide column doubling">
  16.                 <div class="ui top attached segment">
  17.                     <div class="ui header">获取数据</div>
  18.                 </div>
  19.                 <div class="ui attached segment ">
  20.                     <form id="webDataForm" name="webDataForm" method="post" action="/getRecord">
  21.                         <div class="ui labeled left icon input" style="width: 100%">
  22.                             <i class="computer icon"></i>
  23.                             <input id="userName" readonly="true" type="text" name="userName" placeholder="1568452****" value=${userName}>
  24.                             <a class="ui tag label">
  25.                                 用户名
  26.                             </a>
  27.                         </div>
  28.                         <br>
  29.                         <br>
  30.                         <div class="ui labeled left icon input" style="width: 100%">
  31.                             <i class="briefcase icon"></i>
  32.                             <input id="password" readonly="true" type="text" name="password" placeholder="1A2B3C4D5E6F7G!*(41@" value=${password}>
  33.                             <a class="ui tag label">
  34.                                 密码
  35.                             </a>
  36.                         </div>
  37.                         <br>
  38.                         <br>
  39.                         <div class="ui labeled left icon input" style="width: 100%">
  40.                             <i class="eyedropper icon"></i>
  41.                             <input id="createTime" readonly="true" type="text" name="createTime" placeholder="1A2B3C4D5E6F7G!*(41@" value=${createTime}>
  42.                             <a class="ui tag label">
  43.                                 创建时间
  44.                             </a>
  45.                         </div>
  46.                         <br>
  47.                         <br>
  48.                         <div class="ui labeled left icon input" style="width: 100%">
  49.                             <i class="calendar icon"></i>
  50.                             <input id="remarks" type="text" name="remarks" placeholder="如：可以使用，或者用户名错误，或者密码错误" value=${remarks}>
  51.                             <a class="ui tag label">
  52.                                 备注
  53.                             </a>
  54.                         </div>
  55.                         <br>
  56.                         <br>
  57.  
  58.                         <div class="ui padded grid">
  59.                             <div class="white row">
  60.                                 <div class="column">
  61.                                     <h2 class="ui header">注意</h2>
  62.                                     <p>成功获取帐号后，需要填写备注信息，随后点击提交备注按钮，避免下次获取同样的帐号</p>
  63.                                 </div>
  64.                             </div>
  65.                             <div class="two column row">
  66.                                 <div class="white column">
  67.                                     <button class="fluid ui teal button" type="submit">点击获取数据</button>
  68.                                 </div>
  69.                                 <div class="two column column">
  70.                                     <button class="fluid ui teal button" onclick="updateWebData()">点击提交备注</button>
  71.                                 </div>
  72.                             </div>
  73.                         </div>
  74.                     </form>
  75.                 </div>
  76.             </div>
  77.         </div>
  78.     </div>
  79. </div>
  80.  
  81. <script>
  82.     function updateWebData() {
  83.  
  84.         for(var i=0; i<document.webDataForm.elements.length - 2; i++)
  85.         {
  86.             if(document.webDataForm.elements[i].value=="")
  87.             {
  88.                 console.log(i);
  89.                 alert("当前表单不能有空项");
  90.                 document.webDataForm.elements[i].focus();
  91.                 return;
  92.             }
  93.         }
  94.  
  95.         document.webDataForm.action = "/updateWebData";
  96.         document.webDataForm.submit();
  97.     }
  98. </script>
  99.  
  100. </body>
  101. </html>

这里有几个重要的知识点：

表单中有两个按钮该如何发请求。

这里做一个原始的按钮使用

<button class="fluid ui teal button" type="submit">点击获取数据</button>

另一个按钮使用JavaScript脚本：

<button class="fluid ui teal button" onclick="updateWebData()">点击提交备注</button>

其中对应的函数如下：

  1. <script>
  2.     function updateWebData() {
  3.  
  4.         for(var i=0; i<document.webDataForm.elements.length - 2; i++)
  5.         {
  6.             if(document.webDataForm.elements[i].value=="")
  7.             {
  8.                 console.log(i);
  9.                 alert("当前表单不能有空项");
  10.                 document.webDataForm.elements[i].focus();
  11.                 return;
  12.             }
  13.         }
  14.  
  15.         document.webDataForm.action = "/updateWebData";
  16.         document.webDataForm.submit();
  17.     }
  18. </script>

其中对应的后端如下：

  1. package com.example.demo.controller;
  2.  
  3. import com.example.demo.model.DataForm;
  4. import com.example.demo.object.WebData;
  5. import com.example.demo.service.WebDataService;
  6. import org.springframework.beans.factory.annotation.Autowired;
  7. import org.springframework.stereotype.Controller;
  8. import org.springframework.web.bind.annotation.GetMapping;
  9. import org.springframework.web.bind.annotation.ModelAttribute;
  10. import org.springframework.web.bind.annotation.PostMapping;
  11. import java.util.Map;
  12.  
  13. @Controller
  14. public class IndexController {
  15.  
  16.     @Autowired
  17.     WebDataService service;
  18.  
  19.     @GetMapping({"/", "/index", "index.html"})
  20.     public String getIndex(Map<String, Object> map){
  21.  
  22.         map.put("userName", "131******1232");
  23.         map.put("password", "abc*******123");
  24.         map.put("createTime", "https://cdn.jxasp.com:9143/image/2019-12-08 20:36:32");
  25.         map.put("remarks", "如：可以使用（禁止带空格）can_be_used");
  26.  
  27.         return "index";
  28.     }
  29.  
  30.     @PostMapping("/getRecord")
  31.     public String getRecord(Map<String, Object> map){
  32.  
  33.         WebData unUserdAccount = service.getUnUserdAccount();
  34.         if(unUserdAccount != null){
  35.  
  36.             map.put("userName", unUserdAccount.getUserName());
  37.             map.put("password", unUserdAccount.getPassword());
  38.             map.put("createTime",unUserdAccount.getCreateTime());
  39.             map.put("remarks", "");
  40.         }
  41.         else{
  42.  
  43.             //数据库中无数据的情况下：
  44.             map.put("userName", "无数据，请联系站长补充！");
  45.             map.put("password", "无数据，请联系站长补充！");
  46.             map.put("createTime", "无数据，请联系站长补充！");
  47.             map.put("remarks", "无数据，请联系站长补充！");
  48.         }
  49.         return "index";
  50.     }
  51.  
  52.     @PostMapping("/updateWebData")
  53.     public String updateWebData(@ModelAttribute("form") DataForm form){
  54.  
  55.         WebData webData = new WebData();
  56.         webData.setUserName(form.getUserName());
  57.         webData.setPassword(form.getPassword());
  58.         webData.setRemarks(form.getRemarks());
  59.  
  60.         if(service.updateRemarksByWebData(webData)){
  61.  
  62.             return "redirect:/index";
  63.         }
  64.  
  65.         //TODO
  66.         System.out.println("有异常");
  67.         return "redirect:/index";
  68.     }
  69. }

这里接收前端数据用了DataForm，把DataForm里面的成员，设置为前端Input的name

  1. package com.example.demo.model;
  2.  
  3. import lombok.Data;
  4.  
  5. @Data
  6. public class DataForm {
  7.  
  8.     private String userName;
  9.     private String password;
  10.     private String createTime;
  11.     private String remarks;
  12. }

通过这种方式来获取前端数据！

后端在请求中增加map,通过往map中增加数据，来给前端提供数据：

如下伪代码：

  1.     @PostMapping("/getRecord")
  2.     public String getRecord(Map<String, Object> map){
  3.  
  4.         WebData unUserdAccount = service.getUnUserdAccount();
  5.         if(unUserdAccount != null){
  6.  
  7.             map.put("userName", unUserdAccount.getUserName());
  8.             map.put("password", unUserdAccount.getPassword());
  9.             map.put("createTime",unUserdAccount.getCreateTime());
  10.             map.put("remarks", "");
  11.         }
  12.         else{
  13.  
  14.             //数据库中无数据的情况下：
  15.             map.put("userName", "无数据，请联系站长补充！");
  16.             map.put("password", "无数据，请联系站长补充！");
  17.             map.put("createTime", "无数据，请联系站长补充！");
  18.             map.put("remarks", "无数据，请联系站长补充！");
  19.         }
  20.         return "index";
  21.     }

 

相关技术文章

最新源码

下载排行榜
点击QQ咨询
开通会员
返回顶部
×
微信扫码支付 元
微信扫码支付
确定支付下载
请使用微信描二维码支付
×

提示信息

×

选择支付方式

  • 微信支付
  • 支付宝付款
确定支付下载