웹 프론트엔드 JS 튜토리얼 node.js를 소개로 사용하는 웹사이트

node.js를 소개로 사용하는 웹사이트

Mar 10, 2018 pm 03:34 PM
javascript nodejs 소개

这次给大家带来用nodejs做简介的网站,用nodejs做网站的注意事项有哪些,下面就是实战案例,一起来看一下。

首先你要有nodejs环境和会使用npm,不会自行Google或百度。(相关推荐:Node.js视频教程

ok!开始吧!

第一步 用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(&#39;5000&#39;, function () {
    reGetFileInfos();//初始化文件信息集
    console.log(&#39;启动服务器完成&#39;);
});
로그인 후 복사

写入代码后运行。

浏览器访问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(&#39;/&#39;, 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(&#39;#photo-box&#39;, &#39;.photo&#39;, 20, null,                function() {                    //更新后回调
                });//瀑布流插件初始化
            window.addEventListener(&#39;resize&#39;, function() {//窗口大小改变自动排版
                minigrid(&#39;#photo-box&#39;, &#39;.photo&#39;);
            }); 
                  
    </script></body></html>
로그인 후 복사

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


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(&#39;#photo-box&#39;, &#39;.photo&#39;);
            };            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(&#39;2d&#39;).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(&#39;#photo-box&#39;, &#39;.photo&#39;, 20, null,            function() {                //更新后回调
            });//瀑布流插件初始化
        window.addEventListener(&#39;resize&#39;, function() {//窗口大小改变自动排版
            minigrid(&#39;#photo-box&#39;, &#39;.photo&#39;);
        }); 
        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:&#39;vload(this)&#39;,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(&#39;.&#39;)[0],readonly:"readonly"
                                }).css({width:"100%",                                border:"none",                                color: "#777",                                "padding-left": "10px",                                "padding-bottom": "10px"
                                }))
                        );
                    } 
                    minigrid(&#39;#photo-box&#39;, &#39;.photo&#39;);
                }
            });
        }
         
        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(&#39;#photo-box&#39;, &#39;.photo&#39;);
            };            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(&#39;2d&#39;).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);$(&#39;#vdo-tBox&#39;).attr(&#39;src&#39;,&#39;&#39;);$(&#39;.side-part&#39;).html(&#39;&#39;)">
            <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(&#39;#photo-box&#39;, &#39;.photo&#39;, 20, null,            function() {                //更新后回调
            });//瀑布流插件初始化
        window.addEventListener(&#39;resize&#39;, function() {//窗口大小改变自动排版
            minigrid(&#39;#photo-box&#39;, &#39;.photo&#39;);
        }); 
        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:"$(&#39;#vdo-mask&#39;).show(100); $(&#39;#vdo-tBox&#39;).attr(&#39;src&#39;,&#39;"+data[i].url+"&#39;);$(&#39;.side-part&#39;).html(&#39;"+data[i].name+"  <small>(发布:"+(data[i].mtime.split(&#39;.&#39;)[0]).replace("T"," ").replace("/","-")+")</small>&#39;)"
                                    })
                                    .append($("<video/>", { src:  data[i].url , preload: "metadata", onloadeddata:&#39;vload(this)&#39;,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(&#39;.&#39;)[0],readonly:"readonly"
                                }).css({width:"100%",                                border:"none",                                color: "#777",                                "padding-left": "10px",                                "padding-bottom": "10px"
                                }))
                        );
                    } 
                    minigrid(&#39;#photo-box&#39;, &#39;.photo&#39;);
                }
            });
        }
         
        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 = &#39;mousewheel&#39;;                if(document.mozHidden !== undefined) {
                    eventType = &#39;DOMMouseScroll&#39;;
                }
                $(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();
                    }
                });
            });
        };
        $(&#39;.mask&#39;).scrollUnique();//事件绑定</script></body></html>
로그인 후 복사

相信看了本文案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!

相关阅读:

ES6的拓展运算符详解

ES6的变量的作用域与声明详解

commonJS与es6规范的引入导出

위 내용은 node.js를 소개로 사용하는 웹사이트의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

핫 AI 도구

Undresser.AI Undress

Undresser.AI Undress

사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

Clothoff.io

AI 옷 제거제

AI Hentai Generator

AI Hentai Generator

AI Hentai를 무료로 생성하십시오.

인기 기사

R.E.P.O. 에너지 결정과 그들이하는 일 (노란색 크리스탈)
3 몇 주 전 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. 최고의 그래픽 설정
3 몇 주 전 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. 아무도들을 수없는 경우 오디오를 수정하는 방법
3 몇 주 전 By 尊渡假赌尊渡假赌尊渡假赌
WWE 2K25 : Myrise에서 모든 것을 잠금 해제하는 방법
4 몇 주 전 By 尊渡假赌尊渡假赌尊渡假赌

뜨거운 도구

메모장++7.3.1

메모장++7.3.1

사용하기 쉬운 무료 코드 편집기

SublimeText3 중국어 버전

SublimeText3 중국어 버전

중국어 버전, 사용하기 매우 쉽습니다.

스튜디오 13.0.1 보내기

스튜디오 13.0.1 보내기

강력한 PHP 통합 개발 환경

드림위버 CS6

드림위버 CS6

시각적 웹 개발 도구

SublimeText3 Mac 버전

SublimeText3 Mac 버전

신 수준의 코드 편집 소프트웨어(SublimeText3)

nodejs는 백엔드 프레임워크인가요? nodejs는 백엔드 프레임워크인가요? Apr 21, 2024 am 05:09 AM

Node.js는 고성능, 확장성, 크로스 플랫폼 지원, 풍부한 생태계, 개발 용이성 등의 기능을 제공하므로 백엔드 프레임워크로 사용할 수 있습니다.

nodejs를 mysql 데이터베이스에 연결하는 방법 nodejs를 mysql 데이터베이스에 연결하는 방법 Apr 21, 2024 am 06:13 AM

MySQL 데이터베이스에 연결하려면 다음 단계를 따라야 합니다. mysql2 드라이버를 설치합니다. mysql2.createConnection()을 사용하여 호스트 주소, 포트, 사용자 이름, 비밀번호 및 데이터베이스 이름이 포함된 연결 개체를 만듭니다. 쿼리를 수행하려면 Connection.query()를 사용하세요. 마지막으로 Connection.end()를 사용하여 연결을 종료합니다.

nodejs의 전역 변수는 무엇입니까 nodejs의 전역 변수는 무엇입니까 Apr 21, 2024 am 04:54 AM

Node.js에는 다음과 같은 전역 변수가 존재합니다. 전역 개체: 전역 핵심 모듈: 프로세스, 콘솔, 필수 런타임 환경 변수: __dirname, __filename, __line, __column 상수: undefine, null, NaN, Infinity, -Infinity

nodejs와 java 사이에 큰 차이가 있나요? nodejs와 java 사이에 큰 차이가 있나요? Apr 21, 2024 am 06:12 AM

Node.js와 Java의 주요 차이점은 디자인과 기능입니다. 이벤트 중심 대 스레드 중심: Node.js는 이벤트 중심이고 Java는 스레드 중심입니다. 단일 스레드 대 다중 스레드: Node.js는 단일 스레드 이벤트 루프를 사용하고 Java는 다중 스레드 아키텍처를 사용합니다. 런타임 환경: Node.js는 V8 JavaScript 엔진에서 실행되는 반면 Java는 JVM에서 실행됩니다. 구문: Node.js는 JavaScript 구문을 사용하고 Java는 Java 구문을 사용합니다. 목적: Node.js는 I/O 집약적인 작업에 적합한 반면, Java는 대규모 엔터프라이즈 애플리케이션에 적합합니다.

nodejs 설치 디렉토리에 있는 npm과 npm.cmd 파일의 차이점은 무엇입니까? nodejs 설치 디렉토리에 있는 npm과 npm.cmd 파일의 차이점은 무엇입니까? Apr 21, 2024 am 05:18 AM

Node.js 설치 디렉터리에는 npm과 npm.cmd라는 두 가지 npm 관련 파일이 있습니다. 차이점은 다음과 같습니다. 확장자가 다릅니다. npm은 실행 파일이고 npm.cmd는 명령 창 바로 가기입니다. Windows 사용자: npm.cmd는 명령 프롬프트에서 사용할 수 있으며, npm은 명령줄에서만 실행할 수 있습니다. 호환성: npm.cmd는 Windows 시스템에만 해당되며 npm은 크로스 플랫폼에서 사용할 수 있습니다. 사용 권장사항: Windows 사용자는 npm.cmd를 사용하고, 기타 운영 체제는 npm을 사용합니다.

nodejs는 백엔드 개발 언어인가요? nodejs는 백엔드 개발 언어인가요? Apr 21, 2024 am 05:09 AM

예, Node.js는 백엔드 개발 언어입니다. 서버 측 비즈니스 로직 처리, 데이터베이스 연결 관리, API 제공 등 백엔드 개발에 사용됩니다.

nodejs 프로젝트를 서버에 배포하는 방법 nodejs 프로젝트를 서버에 배포하는 방법 Apr 21, 2024 am 04:40 AM

Node.js 프로젝트의 서버 배포 단계: 배포 환경 준비: 서버 액세스 권한 획득, Node.js 설치, Git 저장소 설정. 애플리케이션 빌드: npm run build를 사용하여 배포 가능한 코드와 종속성을 생성합니다. Git 또는 파일 전송 프로토콜을 통해 서버에 코드를 업로드합니다. 종속성 설치: SSH를 서버에 연결하고 npm install을 사용하여 애플리케이션 종속성을 설치합니다. 애플리케이션 시작: node index.js와 같은 명령을 사용하여 애플리케이션을 시작하거나 pm2와 같은 프로세스 관리자를 사용합니다. 역방향 프록시 구성(선택 사항): Nginx 또는 Apache와 같은 역방향 프록시를 사용하여 트래픽을 애플리케이션으로 라우팅합니다.

nodejs와 java 중 어느 것을 선택해야 합니까? nodejs와 java 중 어느 것을 선택해야 합니까? Apr 21, 2024 am 04:40 AM

Node.js와 Java는 각각 웹 개발에 장단점이 있으며 선택은 프로젝트 요구 사항에 따라 다릅니다. Node.js는 실시간 애플리케이션, 신속한 개발 및 마이크로서비스 아키텍처에 탁월한 반면, Java는 엔터프라이즈급 지원, 성능 및 보안에 탁월합니다.

See all articles