可视化设计uniapp+CCHTTP实现的get post 表单提交例子

diygw

[JavaScript] 纯文本查看 复制代码

.版本 2
.支持库 spec

.程序集 窗口程序集_启动窗口
.程序集变量 网站, CC网站

.子程序 __启动窗口_创建完毕

网站.创建 (, )
网站.zc接口 (&GET演示, “/api/get”, , , , , , , , , , , , #GET)  ' 只接收GET请求
网站.zc接口 (&POST演示, “/api/post”, , , , , , , , , , , , #POST)  ' 只接收POST请求
网站.zc接口 (&POST提交JSON演示, “/api/json”, , , , , , , , , , , , #POST)  ' 只接收POST请求
网站.zc接口 (&POST提交表单演示, “/api/form”, , , , , , , , , , , , #POST)  ' 只接收POST请求

网站.启动 (, 3333)


.子程序 GET演示, 逻辑型
.参数 指针, 整数型
.局部变量 接口, CC接口

取回接口 (指针, 接口)
调试输出 (“=======GET参数接收========”)

调试输出 (接口.取参数 (“title”))
调试输出 (接口.取所有参数 ().到JSON ())


接口.回复文本 (“DIYGW+易语言CCHTTP实现GET接口成功！” ＋ 接口.取参数 (“title”), )
return (假)


.子程序 POST演示, 逻辑型
.参数 指针, 整数型
.局部变量 接口, CC接口
.局部变量 所有参数, json对象
.局部变量 返回结果, json对象

取回接口 (指针, 接口)
调试输出 (“=======POST参数接收========”)
' 下面这个代码可以获取到所有的参数
所有参数 ＝ 接口.取所有参数 ()

调试输出 (所有参数.到JSON ())

' 下面这个方法和上面的类似，但是可以直接操作
' 接口.参数表 ()

' 例如这样操作：
接口.参数表 ().置文本 (“message”, “DIYGW+易语言CCHTTP实现POST接口成功！”, )

接口.参数表 ().置整数 (“code”, 200, )

接口.参数表 ().置文本 (“title2”, 接口.取参数 (“title”) ＋ “加工了”, )

' 这种情况下，如果想获取GET参数可以这样：
调试输出 (接口.取GET参数 ())

接口.回复文本 (所有参数.到JSON (), )

' 自定义返回JSON结果
' 返回结果.置整数 (“code”, 200, )
' 返回结果.置文本 (“message”, “DIYGW+易语言CCHTTP实现POST接口成功！”, )
' 接口.回复JSON_自定义 (返回结果, )

return (假)


.子程序 POST提交JSON演示, 逻辑型
.参数 指针, 整数型
.局部变量 接口, CC接口
.局部变量 所有参数, json对象
.局部变量 数组, json数组

取回接口 (指针, 接口)
调试输出 (“=======JSON参数接收========”)

' 如果请求头中的 content-type 指定了类型为JSON传递，那么可以直接取JSON参数了
' JSON传递给了我们更多的可能，例如传递复杂的数据结构，传递数组

' 你可以这样的获取所有参数，这和前面的例子是一样的
所有参数 ＝ 接口.取所有参数 ()
调试输出 (所有参数.到JSON ())

' 除了像前面那样回复数组，还可以直接回复JSON，下面演示了回复我们常用的JSON结构 （包含了状态码，是否成功，状态说明，数据等）
接口.回复JSON (“请求成功”, 0, 所有参数, 真)  ' 这里的默认键名是可以通过： 网站.配置_回复JSON格式 ()  进行修改的！

' 当然你也可以回复自定义的JSO你参数：
' 接口.回复JSON_文本 ()
' 接口.回复JSON_自定义 ()

' （注意！回复XXX 命令只能同时调用一个）

return (假)  ' 这里的真假与否会决定是否走后置全局接口，如果你不懂这是什么意思没有关系，等等看下我们后面的例子或视频教程即可！


.子程序 POST提交表单演示, 逻辑型
.参数 指针, 整数型
.局部变量 接口, CC接口

取回接口 (指针, 接口)

接口.置响应头 (“Access-Control-Allow-Origin”, “*”)
接口.置响应头 (“Access-Control-Allow-Methods”, “GET, POST, OPTIONS”)
接口.置响应头 (“Access-Control-Allow-Credentials”, “true”)
接口.置响应头 (“Access-Control-Max-Age”, “3600”)
接口.置响应头 (“Access-Control-Allow-Headers”, “content-type”)

调试输出 (“=======表单参数接收========”)
调试输出 (接口.取所有参数 ().到JSON ())
' 如果遇到模块无法解析的情况，你可以这样操作自己去写解析哦：
接口.取请求体 ()  ' 与下面一行功能一致，只是为了方便不同易友的习惯
接口.取原始请求数据 ()  ' 与上面一行功能一致，只是为了方便不同易友的习惯

接口.参数表 ().置整数 (“code”, 200, )
接口.参数表 ().置文本 (“msg”, “DIYGW+易语言CCHTTP实现POST表单成功！”, )

接口.回复文本 (接口.取所有参数 ().到JSON ())  ' 我们直接简单的写一下 当检测到请求头中有formdata字样，模块便会自动根据表单形式解析
return (假)  ' 这里的真假与否会决定是否走后置全局接口，如果你不懂这是什么意思没有关系，等等看下我们后面的例子或视频教程即可！


' 上传文件可以看专门的上传文件例子哦！

[HTML] 纯文本查看 复制代码

<template>
        <view class="container">
                <view class="diygw-form-item diygw-col-24">
                        <view class="title"> 搜索 </view>
                        <view class="input">
                                <input class="flex1" name="title" comfirm-type="done" type="text" v-model="title" placeholder="请输入提示信息" />
                        </view>
                </view>
                <view class="flex diygw-col-24">
                        <button @tap="navigateTo" data-type="dataApi" class="diygw-btn green flex1 margin-xs button-button-clz">按钮</button>
                </view>
                <view class="diygw-col-24">
                        {{ data }}
                </view>
                <view class="flex diygw-col-24">
                        <button @tap="navigateTo" data-type="page" data-url="/pages/post" class="diygw-btn green flex1 margin-xs button1-button-clz">跳转到POST接口页面</button>
                </view>
                <view class="flex diygw-col-24">
                        <button @tap="navigateTo" data-type="page" data-url="/pages/form" class="diygw-btn green flex1 margin-xs button2-button-clz">跳转到表单页面</button>
                </view>
                <view class="flex diygw-col-24">
                        <button @tap="navigateTo" data-type="page" data-url="/pages/json" class="diygw-btn green flex1 margin-xs button3-button-clz">跳转到JSON提交</button>
                </view>
                <view @tap="navigateTo" data-type="page" data-url="/pages/post" class="diygw-col-24"> 跳转到POST接口页面 </view>
                <view class="clearfix"></view>
        </view>
</template>

<script>
        export default {
                data() {
                        return {
                                //用户全局信息
                                userInfo: {},
                                data: `DIYGW+易语言CCHTTP实现GET接口成功！`,
                                title: ''
                        };
                },
                onShow() {
                        this.setCurrentPage(this);
                },
                onLoad(option) {
                        this.setCurrentPage(this);
                        if (option) {
                                this.setData({
                                        globalOption: this.getOption(option)
                                });
                        }

                        this.init();
                },
                methods: {
                        async init() {
                                await this.dataApi();
                        },
                        // GET接口 API请求方法
                        async dataApi() {
                                let data = await this.$http.get(
                                        '/api/get',
                                        {
                                                title: this.title
                                        },
                                        {},
                                        'json'
                                );
                                this.data = data;
                        }
                }
        };
</script>

なす随风ぬね

支持开源~！感谢分享

wuyou1234

嗯，真是好东西，一定先收藏，在点赞。

2422346948

感谢分享

2422346948

太棒了，正好需要

uq2ktdwt

感谢分享，很给力！~

sdlovets

可视化很方便

221211

感谢分享，学习下

515667395

多谢分享

Mouth

感谢分享