前后端参数的传递（极简VFPBS入门第二讲笔记）

加菲猫的VFP

发布于 2021-08-12 14:25:52

65400

代码可运行

文章被收录于专栏：加菲猫的VFP加菲猫的VFP

运行总次数：0

代码可运行

来自唐先生笔记，唐先生目前培训狐友中最认真的，不止自己码代码，而且全部以笔记的形式呈现，非常了不起。

在前一讲中，我们使用一个网页表单实现了前后端参数的传递，在这一讲中，我们将使用另外的方式来进行参数的传递。

第一种方式：Get方式

这种方式大家在上网时经常可以看到，在浏览器地址栏中，除去域名外，还有很多的数字、英文等字符，在这些字符中，有一些就是我们今天要讲的参数。下面我们来进行后端代码的编写：

DEFINE CLASS ctl_get as Session
    PROCEDURE get
        cParam1=HttpQueryParams("key1")
        RETURN "当前传递的参数为："+cParam1
    ENDPROC 
ENDDEFINE

接下来我们通过浏览器进行访问

http://192.168.3.159:801/ctl_get.fsp?proc=get

此时我们会在浏览器页面上看到如下图信息

因为我们并没有发送参数，所以参数为空，浏览器当然也就不显示，那么如何传递参数呢？我们只需要对访问地址进行一下加工，即通过使用“&”(and)进行拼接，我们再尝试一下

http://192.168.3.159:801/ctl_get.fsp?proc=get&key1=测试参数传递

再看一下效果

在这里需要注意的是，因为我们后端使用的获取参数的关键字为“key1”,因此，在浏览器地址栏中，我们也只能使用“&key1=参数内容”，否则将无法正常传递参数。这里我们只是传递了一个参数，如果要传递多个参数，我们可以参照参数一的方式进行添加。如

DEFINE CLASS ctl_get as Session
    PROCEDURE get
        cParam1=HttpQueryParams("key1")
        cParam2=HttpQueryParams("key2")
        cParam3=HttpQueryParams("key3")
        RETURN "当前传递的参数一为："+cParam1+"||当前传递的参数二为："+cParam2+"||当前传递的参数三为："+cParam3
    ENDPROC 
ENDDEFINE

http://192.168.3.159:801/ctl_get.fsp?proc=get&key1=参数1&key2=参数2&key3=参数3

运行的效果如下

我们可以发现，所有信息都是以明文的方式进行传递的，这样信息就毫无保密性可言，下面我们介绍另一种传递方式。

第二种方式：Post方式

使用Post方式进行信息传递，我们必须借助于外部工具，这里我们引入POSTMAN工具（该工具可以通过百度进行搜索下载或者使用下面的地址下载中文版。当然大家也可以使用国产软件ApiPost）。

https://github.com/hlmd/Postman-cn https://www.apipost.cn/download.html

下图是设置后的便笺模式中的极简界面，具体的使用方法自行百度或在本站进行查找。

今天我们尝试使用body参数 Body 提供六种类型，今天我们主要使用 x-www-form-urlencoded / raw 两种，每种类型提供不同的UI界面。我们下面模拟提交表单，后端内容不变，在POST中选择Body,然后选中 x-www-form-urlencoded

下面我们试试raw类型。raw类型主要用于发送JSON对象或者其他对象，以原文形式提交数据。后端代码依然不变

raw类型主要是用于原样提交数据的，因此在这里我们把后端代码也改一下

DEFINE CLASS ctl_post as Session
    PROCEDURE post
        cPostData=HttpGetPostData()
        RETURN cPostData
    ENDPROC 
ENDDEFINE

然后我们再在POSTMAN中提交数据

192.168.3.159:801/ctl_post.fsp?proc=post

尝试后端传送图片信息

首先我们需要将图片转码成BASE64编码，然后把该编码内容通过POST方式传给后端，然后我们再把它存为图片。我们在VFP命令窗口中完成相关操作

PicPath=Getfile()
PicStr=FileToStr(PicPath)
PicBase64=StrConv(PicStr,13)
_ClipText=PicBase64

然后把信息粘贴到POSTMAN中进行提交

我们可以看到返回信息为“File save success!”，这与后端是一致的，我们看一下后端代码

DEFINE CLASS ctl_post as Session
    PROCEDURE post
        cPostData=HttpGetPostData()
        &&取得前端传送的数据
        cPicStr=STRCONV(cPostData,14)
        &&因为我们已明确知道传递过来的是BASE64编码信息，所以在这里我们再进行解码
        STRTOFILE(cPicStr,"wwwroot/test.png")
        &&进行编码的图片格式为PNG，在这里我们也以PNG格式存下来
        &&RETURN cPostData
        RETURN "File save success!"
        &&这里我们就不返回图片编码信息了，直接给一个成功的提示
    ENDPROC 
ENDDEFINE

那么图片是否真的保存下来了呢？我们到框架下的wwwroot目录检查一下。

如上图所示，传递过来的信息已成功保存至指定目录下了。刚才我们通过后端传递了图片信息并成功保存为文件了，我们不可能对每一张图片都先进行编码，再通过POSTMAN来传递，我们最终要实现的就是通过前端选择需要上传的图片，直接发送给后端进行处理。下面我们尝试一下。

尝试前端传送图片信息

前端代码如下

<!DOCTYPE html>
<html>
<head>
    <title>传送图片</title>
    
</head>
<body>
    <!--这里我们直接把图片的base64编码信息以文本形式发送过去-->
    <form action="ctl_sendpic.fsp" method="post" enctype="text/plain">
    <input type="file" id="selectFiles" onchange="dealSelectFiles()">
    <input type="submit" value="发送">
    <input type="text" id="picdata" name="picdata" value="" hidden>
    
    </form>
    <canvas id="myCanvas"></canvas>
    <!--<canvas id="myCanvas" width=1440 height=900></canvas>-->
    <script type="text/javascript">
        var imgPosX = 0;
        var imgWidth = 256;
        function dealSelectFiles(){
            /// get select files.
            var selectFiles = document.getElementById("selectFiles").files;
            for(var file of selectFiles){
                //console.log(file.webkitRelativePath);
                console.log(file.name)
                /// read file content.
                var reader = new FileReader();
                reader.readAsDataURL(file);
                
                reader.onloadend = function(){
                    /// deal data.
                    var img = new Image();
                    /// after loader, result storage the file content result.
                    img.src = this.result;
                    //预览图片的内容
                    var obj = document.getElementById("picdata"); 
                    obj.value=img.src;
                    //在图片数据框中置入base64编码的图片内容
                    console.log(img.src);
                    img.onload = function(){
                        var myCanvas = document.getElementById("myCanvas");
                        var cxt = myCanvas.getContext('2d');
                         cxt.drawImage(img, imgPosX, 0);
                        imgPosX += imgWidth;
                    }
                }
            }
        }
    </script>
</body>

</html>

前端界面图

选择图片后的界面

发送成功后的页面

查看网页源码

那么后端是如何处理的呢，直接上代码

DEFINE CLASS ctl_sendpic as Session
    PROCEDURE onDefault
        PRIVATE lcPicName,pic
        lcPicData=HttpGetPostData()
        &&因为前端使用picdata来接收并传递数据，所以要减掉“picdata="共8个字符长度，余下的就是图片的base64编码信息了
        pic=RIGHT(lcPicData,LEN(lcPicData)-8)
        lcHtml=GetWwwRootPath()+"receivepic.html"
        _currentcode="UTF-8"
        RETURN FWS_MergeFile(lcHtml)
        &&RETURN RIGHT(lcPicData,LEN(lcPicData)-8)
    ENDPROC 
ENDDEFINE