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

目录

 

基本概念

代码与实例

---

 

基本概念

这里有如下页面：

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

@Controller
public 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;

@Data
public 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";
    }