communauté Apprendre Bibliothèque d'outils Loisirs
recherche
Français
Maison > interface Web > js tutoriel > Site Web utilisant node.js comme introduction

Site Web utilisant node.js comme introduction

php中世界最好的语言
Libérer： 2018-03-10 15:34:23
original
3070 Les gens l'ont consulté

这次给大家带来用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;);
});
Copier après la connexion

写入代码后运行。

浏览器访问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");
});
Copier après la connexion

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>
Copier après la connexion

访问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>
Copier après la connexion

[为什么不直接显示视频而偏偏搞个截图?--因为本人前写过类似小网站,发现如果后台插件获取视频截图麻烦,但直接显示视频也就是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>
Copier après la connexion

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

相关阅读：

ES6的拓展运算符详解

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

commonJS与es6规范的引入导出

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Étiquettes associées：
javascript nodejs 简介
source：php.cn
Article précédent：Comment configurer des projets multipages dans Vue.js Article suivant：Éditeur Markdown avec une technologie frontale pure pour un aperçu en temps réel
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Derniers numéros
Méthode CSS uniquement pour modifier dynamiquement le src de l'image au clic sans utiliser JavaScript Je dois changer le src d'une image en cliquant sur la souris en utilisant uniquement du CS...
Depuis 2024-04-06 19:25:49
0
1
505
Les points de nuage de points ne conservent pas leurs valeurs lors du zoom dans d3.js C'est la première fois que j'utilise d3.js, alors soyez indulgents avec moi. Je l'ai implé...
Depuis 2024-04-06 18:16:26
0
1
403
Événements de survol JavaScript sur des pseudo-éléments spécifiques au fournisseur Il s'agit de HTMLinput.$("input[type='range']::-webkit-slider-thumb").on('hover'...
Depuis 2024-04-06 15:35:24
0
1
274
Soumettre le formulaire sans bouton en utilisant Javascript/Jquery J'essaie de soumettre un formulaire sans bouton en appelant une fonction JavaScript et en ...
Depuis 2024-04-06 14:54:03
0
2
421
Personnalisez l'apparence des en-têtes accordéon Bootstrap à l'aide de la classe CollapseDisplay Je souhaite styliser le titre de la carte d'un panneau avec la classeeffondrementshow. Dan...
Depuis 2024-04-06 12:53:11
0
1
376
Rubriques connexes
Plus>
Recommandations populaires
Tutoriels populaires
Plus>
Tutoriels associés
Recommandations populaires
Derniers cours
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal