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

目录

 

基本概念

代码与实例


 

基本概念

这里有如下页面:

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

 

已标记关键词 清除标记
©️2020 CSDN 皮肤主题: 数字20 设计师:CSDN官方博客 返回首页