用nodejs写个简单的视频网站[教程]

简介: 用nodejs写个简单的视频网站[教程]#首先你要有nodejs环境和会使用npm,不会自行Google或百度。ok!开始吧!效果示例第一步 用nodejs编写后台:1.

用nodejs写个简单的视频网站[教程]#


首先你要有nodejs环境和会使用npm,不会自行Google或百度。

ok!开始吧!

img_0140a4ea72b76284d886e9161fe6c558.gif
效果示例

第一步 用nodejs编写后台:

1.新建项目

2.创建static文件夹(可自行更改)

3.static文件夹下创建videos文件夹(可自行更改)

4.在项目目录创建 app.js 内部代码如下

 
var http = require('http');
var fs = require('fs');
var rd = require('rd');
var express = require('express');
var app = express();  
app.use("/static", express.static(__dirname + '/static'));//引入静态文件夹

var vdo_path = __dirname + "\\static\\videos\\";//视频文件夹路径(可自行更改)
var vdo_info_ls = [];//获取到的文件信息集
function getFileInfo(path) {//遍历文件夹
    try {
        var files = rd.readSync(path);//获取目录下所有文件和文件夹
        for (var i in files) {//循环遍历
            if (!fs.lstatSync(files[i]).isDirectory()) {//判断是否为文件 
                if (files[i].toLowerCase().split(".mp4").reverse()[0].length== 0) {//判断是否为MP4格式文件(这里默认以MP4为例 其他格式大家自行过滤)
                    vdo_info_ls[vdo_info_ls.length]={
                        name: files[i].split("\\").reverse()[0].replace(".mp4", "").replace(".MP4", ""),//获取文件名
                        url: (vdo_path.replace(__dirname, "")+ files[i].replace(vdo_path, "")).replace("\\", "/"), //获取文件的web路径
                        mtime: fs.statSync(files[i]).mtime//修改时间作为发布时间
                    }//添加信息到文件信息集
                }
            }
        }

    }
    catch (e) {
        console.log(e)
    }
}

function reGetFileInfos() {//这里是为了大家以后写后台进行文件刷新时使用
    vdo_info_ls = [];//初始化集合
    getFileInfo(vdo_path); //遍历文件夹
    vdo_info_ls.sort(function (a, b) {//时间排序
        return Date.parse(b.ctime) - Date.parse(a.ctime);//时间正序(不过这个方法好像只能对月日起效 对年好像不起作用)
    }); 
} 
 
var page_count = 20;//分页条数
app.get('/getvdojson', function (req, res) {
    var ret = [];//返回的分页json初始化
    if (req.query.page) {//判断是否有get参数page
        if (parseInt(req.query.page) >= 0) {//
            for (var i = 0; i < page_count; i++) {//遍历获取
                ret[ret.length] = vdo_info_ls[parseInt(req.query.page) * page_count + i];
            }
        }
    } 
    res.json(ret);//返回json
});
 
// 创建服务端
http.createServer(app).listen('5000', function () {
    reGetFileInfos();//初始化文件信息集
    console.log('启动服务器完成');
});

写入代码后运行。

浏览器访问http://127.0.0.1:5000/getvdojson?page=0 查看效果

改变url的page参数查看效果。

如果运行正常页面会返回json。(如:[{“name”:”一分钟学唱《loser》…..”mtime”:”2016-07-27T11:11:28.501Z”}])

第二步 编写网站前台主页面:

1.添加以下代码到app.js

app.get('/', function (req, res) {
    res.sendFile(__dirname + "\\" + "index.html");
});

2.static文件夹下创建img,js和css文件夹分别存放img,js和css文件

3.在项目下创建index.html写入以下代码

<!DOCTYPE html>
<html >

<head>
    <meta charset="UTF-8">
    <title>小视频</title>
    <script src="/static/js/jquery.min.js"></script>
    <script src="/static/js/minigrid.js"></script><!--  轻量级瀑布流插件 具体可搜索minigrid了解 -->
    <style>
        /*全局样式*/
        * {
            margin: 0;
            padding: 0;
        }
        
        a {
            text-decoration: none;
        }
        
        body {
            line-height: 1;
            background: #FFF;
        } 
        body {
            font-family: "Microsoft Yahei";
            background: #f4f4f4;
            min-width: 1000px;
            height: 100%;
        }
        /*主体居中*/
        .container {
            width: 98%;
            position: relative;
            margin-bottom: 20px;
            margin: 0 auto;
        } 
        #photo-box .photo {
            display: block;
            /*float: left;*/
            width: 225px;
            background-color: #fff;
            overflow: hidden;
            position: absolute;
            -webkit-transition: .3s ease-in-out;
            -o-transition: .3s ease-in-out;
            transition: .3s ease-in-out;
            border: 1px solid #e2e2e2;
        }
        
        #photo-box .photo .content {
            margin: 0 10px  ;
            font-size: 14px;
            color: #777;
            line-height: 20px;
            word-break: break-all;
        }

        /*显示加载*/
         #load-over{
                width: 95%;
                margin: 0 auto; 
                border-bottom: 1px #ccc solid;
                border-top: 1px #ccc solid;
                padding: 20px 0px;
                text-align: center;
                margin-bottom: 30px;
                color: #999;
        }
    </style>
</head>

<body>
    <!--"photo-box"为瀑布流 图片容器-->
    <div id="photo-box" class="container">
        <!--"photo"显示视频缩略图与图片信息-->
        <a class="photo" target="_blank" href="#">
            [站外图片上传中……(2)]
            <div class="content">
                欢迎来到XXX(公告或广告位)
            </div>
        </a> 


<a class="photo" target="_blank" href="#">
            [站外图片上传中……(3)]
            <div class="content">
                欢迎来到XXX(公告或广告位)
            </div>
        </a> 
        <a class="photo" target="_blank" href="#">
            [站外图片上传中……(4)]
            <div class="content">
                欢迎来到XXX(公告或广告位)
            </div>
        </a> 
        <a class="photo" target="_blank" href="#">
            [站外图片上传中……(5)]
            <div class="content">
                欢迎来到XXX(公告或广告位)
            </div>
        </a> 
        <a class="photo" target="_blank" href="#">
            [站外图片上传中……(6)]
            <div class="content">
                欢迎来到XXX(公告或广告位)
            </div>
        </a> 
        <a class="photo" target="_blank" href="#">
            [站外图片上传中……(7)]
            <div class="content">
                欢迎来到XXX(公告或广告位)
            </div>
        </a> 
        <a class="photo" target="_blank" href="#">
            [站外图片上传中……(8)]
            <div class="content">
                欢迎来到XXX(公告或广告位)
            </div>
        </a> 
        <a class="photo" target="_blank" href="#">
            [站外图片上传中……(9)]
            <div class="content">
                欢迎来到XXX(公告或广告位)
            </div>
        </a> 
        <a class="photo" target="_blank" href="#">
            [站外图片上传中……(10)]
            <div class="content">
                欢迎来到XXX(公告或广告位)
            </div>
        </a> 
        <a class="photo" target="_blank" href="#">
            [站外图片上传中……(11)]
            <div class="content">
                欢迎来到XXX(公告或广告位)
            </div>
        </a> 
        <a class="photo" target="_blank" href="#">
            [站外图片上传中……(12)]
            <div class="content">
                欢迎来到XXX(公告或广告位)
            </div>
        </a> 
        <a class="photo" target="_blank" href="#">
            [站外图片上传中……(13)]
            <div class="content">
                欢迎来到XXX(公告或广告位)
            </div>
        </a> 

    </div>

    <div id="load-over" style="">
        加载中...
    </div>
    <script> 
            minigrid('#photo-box', '.photo', 20, null,
                function() {
                    //更新后回调
                });//瀑布流插件初始化
            window.addEventListener('resize', function() {//窗口大小改变自动排版
                minigrid('#photo-box', '.photo');
            }); 
                  
    </script>
</body>

</html>

访问http://127.0.0.1:5000/ 查看效果
效果示例:

img_72c321e5db975a5c413472dc5cf0a30a.png
Paste_Image.png

第三步 前后台结合:

1.修改index.html为以下代码(请注意修改变化)


<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>小视频</title>
    <script src="/static/js/jquery-2.1.4.min.js"></script>
    <script src="/static/js/minigrid.js"></script>
    <style>
        /*全局样式*/
        
        * {
            margin: 0;
            padding: 0;
        }
        
        a {
            text-decoration: none;
        }
        
        body {
            line-height: 1;
            background: #FFF;
        }
        
        body {
            font-family: "Microsoft Yahei";
            background: #f4f4f4;
            min-width: 1000px;
            height: 100%;
        }
        /*主体居中*/
        
        .container {
            width: 98%;
            position: relative;
            margin-bottom: 20px;
            margin: 0 auto;
        }
        
        #photo-box .photo {
            display: block;
            /*float: left;*/
            width: 225px;
            background-color: #fff;
            overflow: hidden;
            position: absolute;
            -webkit-transition: .3s ease-in-out;
            -o-transition: .3s ease-in-out;
            transition: .3s ease-in-out;
            border: 1px solid #e2e2e2;
        }
        
        #photo-box .photo .content {
            margin: 0 10px;
            font-size: 14px;
            color: #777;
            line-height: 20px;
            word-break: break-all;
        }
        /*显示加载*/
        
        #load-over {
            width: 95%;
            margin: 0 auto;
            border-bottom: 1px #ccc solid;
            border-top: 1px #ccc solid;
            padding: 20px 0px;
            text-align: center;
            margin-bottom: 30px;
            color: #999;
        }
    </style>
    <script>
        //--获取视频缩略图--
            function vload(obj) {
                $(obj).removeAttr("poster");
                var vimg = $("<img/>",{width:"100%"})[0];
                captureImage(obj, vimg);
                $(obj).after(vimg);
                obj.remove();
                minigrid('#photo-box', '.photo');
            };
            var scale = 0.8; //缩放
            function captureImage(video, output) { //截图 
                try {
                    var videocanvas = $("<canvas/>")[0];
                    videocanvas.width = video.videoWidth * scale;
                    videocanvas.height = video.videoHeight * scale;
                    videocanvas.getContext('2d').drawImage(video, 0, 0, videocanvas.width, videocanvas.height);
                    output.src = videocanvas.toDataURL("image/png");
                    delete videocanvas; 
                } catch(e) {
                    output.src = "/static/img/status.gif"; //--status.gif为加载动画
                }  
            };
    </script>
</head>

<body>
    <!--"photo-box"为瀑布流 图片容器-->
    <div id="photo-box" class="container">
        <!--"photo"显示视频缩略图与图片信息-->
        <a class="photo" target="_blank" href="#">
            [站外图片上传中……(14)]
            <div class="content">
                欢迎来到XXX(公告或广告位)
            </div>
        </a>  
    </div>

    <div id="load-over" style="">
        加载中...
    </div>
    <script> 
        minigrid('#photo-box', '.photo', 20, null,
            function() {
                //更新后回调
            });//瀑布流插件初始化
        window.addEventListener('resize', function() {//窗口大小改变自动排版
            minigrid('#photo-box', '.photo');
        }); 

        function b_load(page){
            $("#load-over").text("加载...");
            $.getJSON("/getvdojson?page=" + page, function(data) { 
                    if(data.length > 0) {
                        for(let i in data) {
                            if(data[i]==null){
                                $("#load-over").text("加载完毕"); 
                                continue;
                            }
                            $("#photo-box").append(
                                    $("<a/>", {
                                        class: "photo",
                                        href:"javascript:void(0)"
                                    })
                                    .append($("<video/>", { src:  data[i].url , preload: "metadata", onloadeddata:'vload(this)',poster:"/static/img/status.gif",width: "100%"
                                    }))
                                .append($("<div/>", { class: "content" }).html(data[i].name) ) 
                                .append($("<input/>",{type:"datetime-local",value:(data[i].mtime).split('.')[0],readonly:"readonly"
                                }).css({width:"100%",
                                border:"none",
                                color: "#777",
                                "padding-left": "10px",
                                "padding-bottom": "10px"
                                }))
                        );
                    } 
                    minigrid('#photo-box', '.photo');
                }
            });
        }
         
        page = 0;
        window.onscroll = function() { 
            // var scrolltop=document.documentElement.scrollTop||document.body.scrollTop;
            var tops = $(document).scrollTop(); //获取滚动条的位置
            var sctop = $(document).height() - $(window).height();
            if(tops >= sctop) //成立说明滚动条已在最底部
            {
                page = page + 1; //传递页码 
                b_load(page);
            }
        };
        b_load(page);
        page=page+1;
        b_load(page); 
</script>
</body>

</html>

[为什么不直接显示视频而偏偏搞个截图?--因为本人前写过类似小网站,发现如果后台插件获取视频截图麻烦,但直接显示视频也就是video标签的话会出现当加载大量视频时,出现卡顿,导致部分视频无法显示缩略图和无法播放的现象。]
运行项目重新访问http://127.0.0.1:5000/ 查看效果

第四步 添加点击播放功能:

1.修改index.html为以下代码(请注意修改变化)


<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>小视频</title>
    <script src="/static/js/jquery-2.1.4.min.js"></script>
    <script src="/static/js/minigrid.js"></script>
    <style>
        /*全局样式*/
        
        * {
            margin: 0;
            padding: 0;
        }
        
        a {
            text-decoration: none;
        }
        
        body {
            line-height: 1;
            background: #FFF;
        }
        
        body {
            font-family: "Microsoft Yahei";
            background: #f4f4f4;
            min-width: 1000px;
            height: 100%;
        }
        /*主体居中*/
        
        .container {
            width: 98%;
            position: relative;
            margin-bottom: 20px;
            margin: 0 auto;
        }
        
        #photo-box .photo {
            display: block;
            /*float: left;*/
            width: 225px;
            background-color: #fff;
            overflow: hidden;
            position: absolute;
            -webkit-transition: .3s ease-in-out;
            -o-transition: .3s ease-in-out;
            transition: .3s ease-in-out;
            border: 1px solid #e2e2e2;
        }
        
        #photo-box .photo .content {
            margin: 0 10px;
            font-size: 14px;
            color: #777;
            line-height: 20px;
            word-break: break-all;
        }
        /*显示加载*/
        
        #load-over {
            width: 95%;
            margin: 0 auto;
            border-bottom: 1px #ccc solid;
            border-top: 1px #ccc solid;
            padding: 20px 0px;
            text-align: center;
            margin-bottom: 30px;
            color: #999;
        }
        /*弹出播放页面样式*/
        
        .mask {
            z-index: 999;
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(229, 229, 229, .95);
            overflow: auto;
            padding-top: 30px;
        }
        
        .mask .close-layer {
            width: 56px;
            height: 56px;
            position: fixed;
            right: 14px;
            top: 0;
            cursor: pointer;
            z-index: 99995;
        }
        
        .mask .close-layer i {
            background: url(/static/img/btn_close_layer.png) 0 0 no-repeat;
            width: 36px;
            height: 36px;
            position: absolute;
            left: 50%;
            top: 50%;
            margin: -18px 0 0 -18px;
        }
        
        .pin-view-wrapper {
            width: 84%;
            margin: 0 auto;
            position: relative;
        }
        
        .pin-view-wrapper>.main-part,
        .pin-view-wrapper>.side-part {
            background-color: #fff;
            display: block;
            width: 100%;
        }
        
        .pin-view-wrapper>.main-part {}
        
        .pin-view-wrapper>.side-part {
            margin-bottom: 15px;
        }
        
        ul {
            list-style: none outside none;
            padding-left: 0;
            margin: 0;
        }
        
        .main-part .item img {
            /*width: 100%;*/
            display: block;
            margin: 0 auto;
            max-width: 100%;
        } 
        .main-part .item {} 
        .lSSlideOuter .lSPager.lSGallery img {
            display: block;
            height: 100%;
            max-width: 100px;
            width: 100%;
            max-height: 100px;
        }
        
        .clearfix video {
            width: 640px;
            margin: 0 auto;
            height: 480px;
            display: block;
            background-color: #000;
        }
    </style>
    <script>
        //--获取视频缩略图--
            function vload(obj) {
                $(obj).removeAttr("poster");
                var vimg = $("<img/>",{width:"100%"})[0];
                captureImage(obj, vimg);
                $(obj).after(vimg);
                obj.remove();
                minigrid('#photo-box', '.photo');
            };
            var scale = 0.8; //缩放
            function captureImage(video, output) { //截图 
                try {
                    var videocanvas = $("<canvas/>")[0];
                    videocanvas.width = video.videoWidth * scale;
                    videocanvas.height = video.videoHeight * scale;
                    videocanvas.getContext('2d').drawImage(video, 0, 0, videocanvas.width, videocanvas.height);
                    output.src = videocanvas.toDataURL("image/png");
                    delete videocanvas; 
                } catch(e) {
                    output.src = "/static/img/status.gif"; //--status.gif为加载动画
                }  
            };
    </script>
</head>

<body>
    <!--"photo-box"为瀑布流 图片容器-->
    <div id="photo-box" class="container">
        <!--"photo"显示视频缩略图与图片信息-->
        <a class="photo" target="_blank" href="#">
            [站外图片上传中……(15)]
            <div class="content">
                欢迎来到XXX(公告或广告位)
            </div>
        </a>
    </div>

    <div id="load-over" style="">
        加载中...
    </div>

    <!--遮罩层-->
    <div id="vdo-mask" class="mask" hidden="hidden" style="display: none;">
        <div class="close-layer" onclick="$(this).parent().fadeOut(300);$('#vdo-tBox').attr('src','');$('.side-part').html('')">
            <i></i>
        </div>
        <div class="pin-view-wrapper">
            <div class="side-part" style="text-align: center;padding: 10px 10px;font-size: 16px;font-weight: 600; color: #777;"></div>
            <div class="main-part" style="padding: 10px 10px;">
                <div class="item">
                    <div class="clearfix">
                        <video id="vdo-tBox" style="height: 600px; width: 100%;" controls="controls">
                        </video>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script> 
        minigrid('#photo-box', '.photo', 20, null,
            function() {
                //更新后回调
            });//瀑布流插件初始化
        window.addEventListener('resize', function() {//窗口大小改变自动排版
            minigrid('#photo-box', '.photo');
        }); 

        function b_load(page){
            $("#load-over").text("加载...");
            $.getJSON("/getvdojson?page=" + page, function(data) { 
                    if(data.length > 0) {
                        for(let i in data) {
                            if(data[i]==null){
                                $("#load-over").text("加载完毕"); 
                                continue;
                            }
                            $("#photo-box").append(
                                    $("<a/>", {
                                        class: "photo",
                                        href:"javascript:void(0)", 
                                        onclick:"$('#vdo-mask').show(100); $('#vdo-tBox').attr('src','"+data[i].url+"');$('.side-part').html('"+data[i].name+"  <small>(发布:"+(data[i].mtime.split('.')[0]).replace("T"," ").replace("/","-")+")</small>')"
                                    })
                                    .append($("<video/>", { src:  data[i].url , preload: "metadata", onloadeddata:'vload(this)',poster:"/static/img/status.gif",width: "100%"
                                    }))
                                .append($("<div/>", { class: "content" }).html(data[i].name) ) 
                                .append($("<input/>",{type:"datetime-local",value:(data[i].mtime).split('.')[0],readonly:"readonly"
                                }).css({width:"100%",
                                border:"none",
                                color: "#777",
                                "padding-left": "10px",
                                "padding-bottom": "10px"
                                }))
                        );
                    } 
                    minigrid('#photo-box', '.photo');
                }
            });
        }
         
        page = 0;
        window.onscroll = function() { 
            // var scrolltop=document.documentElement.scrollTop||document.body.scrollTop;
            var tops = $(document).scrollTop(); //获取滚动条的位置
            var sctop = $(document).height() - $(window).height();
            if(tops >= sctop) //成立说明滚动条已在最底部
            {
                page = page + 1; //传递页码 
                b_load(page);
            }
        };
        //默认先加载
        b_load(page);
        page=page+1;
        b_load(page);
         
      //播放时阻止 滚动条 上下滚动 防止滚动加载
        $.fn.scrollUnique = function() {
            return $(this).each(function() {
                var eventType = 'mousewheel';
                if(document.mozHidden !== undefined) {
                    eventType = 'DOMMouseScroll';
                }
                $(this).on(eventType, function(event) {
                    // 一些数据
                    var scrollTop = this.scrollTop,
                        scrollHeight = this.scrollHeight,
                        height = this.clientHeight;

                    var delta = (event.originalEvent.wheelDelta) ? event.originalEvent.wheelDelta : -(event.originalEvent.detail || 0);

                    if((delta > 0 && scrollTop <= delta) || (delta < 0 && scrollHeight - height - scrollTop <= -1 * delta)) {
                        // IE浏览器下滚动会跨越边界直接影响父级滚动,因此,临界时候手动边界滚动定位
                        this.scrollTop = delta > 0 ? 0 : scrollHeight;
                        // 向上滚 || 向下滚
                        event.preventDefault();
                    }
                });
            });
        };
        $('.mask').scrollUnique();//事件绑定
</script>
</body>

</html>

完整DEMO下载

--注意:视频的名字尽量不要出现特殊符号,比如:#--

相关文章
|
25天前
|
Web App开发 缓存 JavaScript
【安装指南】nodejs下载、安装与配置详细教程
这篇博文详细介绍了 Node.js 的下载、安装与配置过程,为初学者提供了清晰的指南。读者通过该教程可以轻松完成 Node.js 的安装,了解相关配置和基本操作。文章首先介绍了 Node.js 的背景和应用场景,随后详细说明了下载安装包、安装步骤以及配置环境变量的方法。作者用简洁明了的语言,配以步骤图示,使得读者能够轻松跟随教程完成操作。总的来说,这篇文章为初学者提供了一个友好的入门指南,使他们能够顺利开始使用 Node.js 进行开发。
56 1
【安装指南】nodejs下载、安装与配置详细教程
|
1月前
|
缓存 JavaScript Linux
Node.js安装教程
这篇摘要介绍了Node.js的安装教程。首先,文中简要概述了Node.js的定义和用途,突出了其在构建高性能网络应用方面的优势。接着,详细说明了在不同操作系统上安装Node.js的步骤,包括在Windows、Mac和Linux系统上的具体操作指南。文中强调了正确选择版本和使用包管理工具的重要性,以确保安装过程的顺利进行。最后,提供了简单的测试步骤,验证Node.js是否成功安装。这篇摘要为初学者提供了清晰而全面的Node.js安装指南。
34 0
|
2月前
|
开发框架 JSON JavaScript
Node.js教程-express框架
Node.js教程-express框架
27 1
|
4月前
|
Web App开发 JavaScript 前端开发
2023Node.js零基础教程(小白友好型),nodejs新手到高手,(一)NodeJS入门
2023Node.js零基础教程(小白友好型),nodejs新手到高手,(一)NodeJS入门
77 0
|
7月前
|
缓存 JavaScript 前端开发
Windows7压缩包安装node.js 报错提示windows Server 2012 R2 和安装React脚手架 最详细教程
对于Windows 7安装node.js 提示“This application is only supported on wWindows 8.1,windows Server 2012 R2, or higher.”类似这种情况的,该问题是因为node.js官方在 x12版本后就不支持win7系统了。
|
4月前
|
缓存 JavaScript
Node.js安装教程【附安装包资源】
Node.js安装教程【附安装包资源】
80 0
|
4月前
|
存储 Prometheus 监控
服务搭建篇(一) 搭建基于prometheus + node_exporter + grafana + Alertmanager 的监控报警系统 , 保姆级教程
Alertmanager处理客户端应用程序(如Prometheus服务器)发送的警报。它负责重复数据删除、分组,并将它们路由到正确的接收器集成,如电子邮件、PagerDuty或OpsGenie。它还负责静音和抑制警报
152 0
|
1月前
|
JavaScript 关系型数据库 MySQL
百度搜索:蓝易云【Node.js写接口连接MySQL数据库教程】
现在,你的Node.js应用已经启动,可以通过访问 `http://localhost:3000/users`来获取所有用户的信息。注意替换上述代码中的数据库连接信息为你自己的实际数据。
28 0
|
2月前
|
存储 JavaScript Linux
百度搜索:蓝易云【CentOS 8上使用NVM安装特定版本的Node.js教程】
现在,你已成功安装和切换到特定版本的Node.js。希望这个教程能够帮助你在CentOS 8上使用NVM安装特定版本的Node.js。
67 2
|
2月前
|
缓存 JavaScript 前端开发
Node.js教程:Node.js 中如何删除文件?
在 Node.js 中处理文件尤其是移除文件,对于维护高效应用程序至关重要。储存和秩序当道的今天,删除不必要或冗余的文件能力显得尤为关键。本文深入探讨你会想要使用这个强大功能的时刻和原因,并通过各种案例展示了这个概念,同时提供了技术机制的见解。

相关产品

  • 云迁移中心