云开发WEB静态网站托管

最新推荐文章于 2024-05-24 01:04:46 发布

颖浩

最新推荐文章于 2024-05-24 01:04:46 发布

阅读量2k

点赞数 3

本文链接：https://blog.csdn.net/weixin_44132829/article/details/107023202

版权

云开发WEB学习心得

Day1

部署一个简单的网页到静态网站托管
在这里插入图片描述
网站上小图标的显示

Day2

学习集成响应，完全使用云函数云接入能力构建可返回用户ip地址的网页页面
效果图如下
在这里插入图片描述
云函数

exports.main = async (event)=>{
    var a=event["headers"]["x-real-ip"]
    var b=event["headers"]["x-client-proto"]
    var c=event["headers"]["host"]
    var d="姓名:颖浩"+"  "+"你的IP地址:"+a+"   "+"当前的域名地址是:"+b+"://"+c
    return d
}

需要在云函数添加http触发路径添加路径
在这里插入图片描述

Day3

实现了云函数（不能是http云接入形式）接入腾讯验证码
（具体效果：在网页中弹出腾讯云验证码，后台云函数验证是否是有效，并返回给页面提示）。
效果图如下
在这里插入图片描述
前端html很容易实现，app.callfunction调用云函数Day3

<body>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
        <title></title>
    </head>
    <body>
        <script src="//imgcache.qq.com/qcloud/tcbjs/1.7.0/tcb.js"></script>
        <script src="https://ssl.captcha.qq.com/TCaptcha.js"></script>
        <script>
            const app = tcb.init({
            env: 'wang-d324f3',
        })
            let auth = app.auth();
            let Cap = new TencentCaptcha('（APPID如下图示）',function(res){
                var ticket=res.ticket
                var randstr=res.randstr
                console.log(ticket)
                console.log(randstr)
                app.callFunction({
                    name:'Day3',
                    data:{ticket,randstr}
                }).then((res)=>{
                    console.log(res)
                    if(res.result.err_msg=="OK"){
                    alert('验证成功！')
                }
                else{
                    alert('验证失败！')
                }
            })
            });
            auth.anonymousAuthProvider().signIn().then(()=>{
                Cap.show();
            });
        </script>
    </body>
</body>

在这里插入图片描述
云函数那边挺难的，用来验证是否是有效

const tcb = require("@cloudbase/node-sdk");
const request = require('request');
const TCaptchaID = {
    aid:'##########',//腾讯验证码项目aid
    AppSecretKey:'#########'//腾讯验证码项目Secretkey
};
const app=tcb.init({
    env: 'wang-d324f3'
  })
  const auth = app.auth()

let CallWeb = (obj) =>{
    return new Promise((resolve, reject) => {
        request({
            url:'https://ssl.captcha.qq.com/ticket/verify?aid='+TCaptchaID.aid+'&AppSecretKey='+TCaptchaID.AppSecretKey+
                '&Ticket='+obj.ticket+
                '&Randstr=' + obj.randstr +
                '&UserIP =' + obj.ip,
            method:'GET'
        }, (error, response, body) => {
            if (error) {
                reject(error);
            }
            resolve((typeof response.body === 'object') ? response.body : JSON.parse(response.body));
        });
    });
}
exports.main = async event => {
  const ip = auth.getClientIP(); // string
      return await CallWeb({
          ticket:event.ticket,
          randstr:event.randstr,
          ip:ip
      })
}

可以参考如下Http触发形式的腾讯验证码云函数代码：

https://github.com/TCloudBase/WEB-FILES/blob/master/cloudfunctions/functions/getFile/index.js

Day4

将教程范例（意见反馈平台DEMO）中的管理端部分的列表加载变成实时数据库监听形式触发。用户端列表加载云函数适配超过100条的场景，采用promise all的形式进行改造，使其可以支持超过100条。

Day5

将教程范例的cloudtohttp函数使用sdk的getTempFileURL进行替换。
在这里插入图片描述

可以跳转码云看我源码,里面有我踩的一些坑

https://gitee.com/ying_hao/Cloudbase/tree/master

颖浩

关注

3
点赞
踩
7

收藏

觉得还不错? 一键收藏
1
评论
云开发WEB静态网站托管

###云开发WEB学习心得##Day1部署一个简单的网页到静态网站托管网站上小图标的显示##Day2#学习集成响应，完全使用云函数云接入能力构建可返回用户ip地址的网页页面效果图如下云函数exports.main = async (event)=>{ var a=event["headers"]["x-real-ip"] var b=event["headers"]["x-client-proto"] var c=event["headers"]["hos
复制链接

扫一扫