前端笔记-freemarker模板获取后端数据及提交数据
生活随笔
收集整理的這篇文章主要介紹了
前端笔记-freemarker模板获取后端数据及提交数据
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
目錄
?
基本概念
代碼與實(shí)例
?
基本概念
這里有如下頁面：
這里面表單的數(shù)據(jù)都是從后端獲取的，點(diǎn)獲取數(shù)據(jù)，會調(diào)用getRecord方法從數(shù)據(jù)庫獲取數(shù)據(jù)。
點(diǎn)擊提交備注，是備注可以讓用戶填寫。
提交后，更新數(shù)據(jù)庫中的數(shù)據(jù)。
在freemarker中使用${xxxx}，這種方式獲取單條的數(shù)據(jù)。
?
?
代碼與實(shí)例
前端代碼如下：
<!DOCTYPE html> <head><meta charset="UTF-8" /><link rel="stylesheet" href="https://cdn.jsdelivr.net/semantic-ui/2.2.4/semantic.min.css"><title>數(shù)據(jù)獲取頁面</title> </head> <body> <br> <br> <br> <br> <div class="m-container m-padded-tb-big doubling"><div class="ui container doubling"><div class="ui row"><div class="seven wide column doubling"><div class="ui top attached segment"><div class="ui header">獲取數(shù)據(jù)</div></div><div class="ui attached segment "><form id="webDataForm" name="webDataForm" method="post" action="/getRecord"><div class="ui labeled left icon input" style="width: 100%"><i class="computer icon"></i><input id="userName" readonly="true" type="text" name="userName" placeholder="1568452****" value=${userName}><a class="ui tag label">用戶名</a></div><br><br><div class="ui labeled left icon input" style="width: 100%"><i class="briefcase icon"></i><input id="password" readonly="true" type="text" name="password" placeholder="1A2B3C4D5E6F7G!*(41@" value=${password}><a class="ui tag label">密碼</a></div><br><br><div class="ui labeled left icon input" style="width: 100%"><i class="eyedropper icon"></i><input id="createTime" readonly="true" type="text" name="createTime" placeholder="1A2B3C4D5E6F7G!*(41@" value=${createTime}><a class="ui tag label">創(chuàng)建時間</a></div><br><br><div class="ui labeled left icon input" style="width: 100%"><i class="calendar icon"></i><input id="remarks" type="text" name="remarks" placeholder="如：可以使用，或者用戶名錯誤，或者密碼錯誤" value=${remarks}><a class="ui tag label">備注</a></div><br><br><div class="ui padded grid"><div class="white row"><div class="column"><h2 class="ui header">注意</h2><p>成功獲取帳號后，需要填寫備注信息，隨后點(diǎn)擊提交備注按鈕，避免下次獲取同樣的帳號</p></div></div><div class="two column row"><div class="white column"><button class="fluid ui teal button" type="submit">點(diǎn)擊獲取數(shù)據(jù)</button></div><div class="two column column"><button class="fluid ui teal button" onclick="updateWebData()">點(diǎn)擊提交備注</button></div></div></div></form></div></div></div></div> </div><script>function updateWebData() {for(var i=0; i<document.webDataForm.elements.length - 2; i++){if(document.webDataForm.elements[i].value==""){console.log(i);alert("當(dāng)前表單不能有空項(xiàng)");document.webDataForm.elements[i].focus();return;}}document.webDataForm.action = "/updateWebData";document.webDataForm.submit();} </script></body> </html>這里有幾個重要的知識點(diǎn)：
表單中有兩個按鈕該如何發(fā)請求。
這里做一個原始的按鈕使用
<button class="fluid ui teal button" type="submit">點(diǎn)擊獲取數(shù)據(jù)</button>另一個按鈕使用JavaScript腳本：
<button class="fluid ui teal button" onclick="updateWebData()">點(diǎn)擊提交備注</button>其中對應(yīng)的函數(shù)如下：
<script>function updateWebData() {for(var i=0; i<document.webDataForm.elements.length - 2; i++){if(document.webDataForm.elements[i].value==""){console.log(i);alert("當(dāng)前表單不能有空項(xiàng)");document.webDataForm.elements[i].focus();return;}}document.webDataForm.action = "/updateWebData";document.webDataForm.submit();} </script>其中對應(yīng)的后端如下：
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;@Controller public class IndexController {@AutowiredWebDataService service;@GetMapping({"/", "/index", "index.html"})public String getIndex(Map<String, Object> map){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<String, Object> 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{//數(shù)據(jù)庫中無數(shù)據(jù)的情況下：map.put("userName", "無數(shù)據(jù)，請聯(lián)系站長補(bǔ)充！");map.put("password", "無數(shù)據(jù)，請聯(lián)系站長補(bǔ)充！");map.put("createTime", "無數(shù)據(jù)，請聯(lián)系站長補(bǔ)充！");map.put("remarks", "無數(shù)據(jù)，請聯(lián)系站長補(bǔ)充！");}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";}//TODOSystem.out.println("有異常");return "redirect:/index";} }這里接收前端數(shù)據(jù)用了DataForm，把DataForm里面的成員，設(shè)置為前端Input的name
package com.example.demo.model;import lombok.Data;@Data public class DataForm {private String userName;private String password;private String createTime;private String remarks; }通過這種方式來獲取前端數(shù)據(jù)！
后端在請求中增加map,通過往map中增加數(shù)據(jù)，來給前端提供數(shù)據(jù)：
如下偽代碼：
@PostMapping("/getRecord")public String getRecord(Map<String, Object> 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{//數(shù)據(jù)庫中無數(shù)據(jù)的情況下：map.put("userName", "無數(shù)據(jù)，請聯(lián)系站長補(bǔ)充！");map.put("password", "無數(shù)據(jù)，請聯(lián)系站長補(bǔ)充！");map.put("createTime", "無數(shù)據(jù)，請聯(lián)系站長補(bǔ)充！");map.put("remarks", "無數(shù)據(jù)，請聯(lián)系站長補(bǔ)充！");}return "index";}?
總結(jié)
以上是生活随笔為你收集整理的前端笔记-freemarker模板获取后端数据及提交数据的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Nginx文档阅读笔记-DNS load
- 下一篇： 前端笔记-js文件首行添加;号（前端小技