用node.js做简介的网站-js教程-PHP中文网

首页

web前端

js教程

用node.js做简介的网站

php中世界最好的语言

Mar 10, 2018 pm 03:34 PM

javascriptnodejs简介

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

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

ok！开始吧！

第一步用nodejs编写后台:

1.新建项目

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

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

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

var http = require(&#39;http&#39;);var fs = require(&#39;fs&#39;);var rd = require(&#39;rd&#39;);var express = require(&#39;express&#39;);var app = express();  
app.use("/static", express.static(dirname + &#39;/static&#39;));//引入静态文件夹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(&#39;/getvdojson&#39;, 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中文网其它相关文章！

热AI工具

Undresser.AI Undress

人工智能驱动的应用程序，用于创建逼真的裸体照片

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

免费脱衣服图片

Clothoff.io

AI脱衣机

Video Face Swap

使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸！

显示更多

热工具

MinGW - 适用于 Windows 的极简 GNU

这个项目正在迁移到osdn.net/projects/mingw的过程中，你可以继续在那里关注我们。MinGW：GNU编译器集合（GCC）的本地Windows移植版本，可自由分发的导入库和用于构建本地Windows应用程序的头文件；包括对MSVC运行时的扩展，以支持C99功能。MinGW的所有软件都可以在64位Windows平台上运行。