基本概念

这里有如下页面：

这里面表单的数据都是从后端获取的，点获取数据，会调用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(Map
   
     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
    
      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(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";    }

转载地址：https://it1995.blog.csdn.net/article/details/103453813 如侵犯您的版权，请留言回复原文章的地址，我们会给您删除此文章，给您带来不便请您谅解！

上一篇：MySQL工作笔记-使用JPA映射mysql数据库要注意的地方

下一篇：OllyDbg笔记-寄存器以及各种关键指令解析（含简单程序破解）