目录
基本概念
这里有如下页面：
这里面表单的数据都是从后端获取的，点获取数据，会调用getRecord方法从数据库获取数据。
点击提交备注，是备注可以让用户填写。
提交后，更新数据库中的数据。
在freemarker中使用${xxxx}，这种方式获取单条的数据。
代码与实例
前端代码如下：
<!DOCTYPE html>
<head>
<meta charset="UTF-8" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/semantic-ui/2.2.4/semantic.min.css">
<title>数据获取页面</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">获取数据</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">
创建时间
</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>成功获取帐号后，需要填写备注信息，随后点击提交备注按钮，避免下次获取同样的帐号</p>
</div>
</div>
<div class="two column row">
<div class="white column">
<button class="fluid ui teal button" type="submit">点击获取数据</button>
</div>
<div class="two column column">
<button class="fluid ui teal button" onclick="updateWebData()">点击提交备注</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("当前表单不能有空项");
document.webDataForm.elements[i].focus();
return;
}
}
document.webDataForm.action = "/updateWebData";
document.webDataForm.submit();
}
</script>
</body>
</html>
这里有几个重要的知识点：
表单中有两个按钮该如何发请求。
这里做一个原始的按钮使用
<button class="fluid ui teal button" type="submit">点击获取数据</button>另一个按钮使用JavaScript脚本：
<button class="fluid ui teal button" onclick="updateWebData()">点击提交备注</button>其中对应的函数如下：
<script>
function updateWebData() {
for(var i=0; i<document.webDataForm.elements.length - 2; i++)
{
if(document.webDataForm.elements[i].value=="")
{
console.log(i);
alert("当前表单不能有空项");
document.webDataForm.elements[i].focus();
return;
}
}
document.webDataForm.action = "/updateWebData";
document.webDataForm.submit();
}
</script>其中对应的后端如下：
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 {
@Autowired
WebDataService 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{
//数据库中无数据的情况下：
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;
@Data
public class DataForm {
private String userName;
private String password;
private String createTime;
private String remarks;
}
通过这种方式来获取前端数据！
后端在请求中增加map,通过往map中增加数据，来给前端提供数据：
如下伪代码：
@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{
//数据库中无数据的情况下：
map.put("userName", "无数据，请联系站长补充！");
map.put("password", "无数据，请联系站长补充！");
map.put("createTime", "无数据，请联系站长补充！");
map.put("remarks", "无数据，请联系站长补充！");
}
return "index";
}
1万+
