用node.js做簡介的網(wǎng)站

來源：懂視網(wǎng) 責(zé)編：小采時(shí)間：2020-11-27 20:01:25

用node.js做簡介的網(wǎng)站

用node.js做簡介的網(wǎng)站:這次給大家?guī)碛胣odejs做簡介的網(wǎng)站，用nodejs做網(wǎng)站的注意事項(xiàng)有哪些，下面就是實(shí)戰(zhàn)案例，一起來看一下。首先你要有nodejs環(huán)境和會使用npm,不會自行Google或百度。（相關(guān)推薦：Node.js視頻教程）ok！開始吧！第一步用nodejs編寫后臺:1.新建項(xiàng)目2

推薦度：

點(diǎn)擊下載本文 文檔為doc格式

導(dǎo)讀用node.js做簡介的網(wǎng)站:這次給大家?guī)碛胣odejs做簡介的網(wǎng)站，用nodejs做網(wǎng)站的注意事項(xiàng)有哪些，下面就是實(shí)戰(zhàn)案例，一起來看一下。首先你要有nodejs環(huán)境和會使用npm,不會自行Google或百度。（相關(guān)推薦：Node.js視頻教程）ok！開始吧！第一步用nodejs編寫后臺:1.新建項(xiàng)目2

這次給大家?guī)碛胣odejs做簡介的網(wǎng)站，用nodejs做網(wǎng)站的注意事項(xiàng)有哪些，下面就是實(shí)戰(zhàn)案例，一起來看一下。

首先你要有nodejs環(huán)境和會使用npm,不會自行Google或百度。（相關(guān)推薦：Node.js視頻教程）

ok！開始吧！

第一步用nodejs編寫后臺:

1.新建項(xiàng)目

2.創(chuàng)建static文件夾(可自行更改)

3.static文件夾下創(chuàng)建videos文件夾(可自行更改)

4.在項(xiàng)目目錄創(chuàng)建 app.js 內(nèi)部代碼如下

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'));//引入靜態(tài)文件夾var vdo_path = dirname + "\\static\\videos\\";//視頻文件夾路徑(可自行更改)var vdo_info_ls = [];//獲取到的文件信息集function getFileInfo(path) {//遍歷文件夾
 try { var files = rd.readSync(path);//獲取目錄下所有文件和文件夾
 for (var i in files) {//循環(huán)遍歷
 if (!fs.lstatSync(files[i]).isDirectory()) {//判斷是否為文件 
 if (files[i].toLowerCase().split(".mp4").reverse()[0].length== 0) {//判斷是否為MP4格式文件(這里默認(rèn)以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//修改時(shí)間作為發(fā)布時(shí)間
 }//添加信息到文件信息集
 }
 }
 }
 } catch (e) { console.log(e)
 }
}function reGetFileInfos() {//這里是為了大家以后寫后臺進(jìn)行文件刷新時(shí)使用
 vdo_info_ls = [];//初始化集合
 getFileInfo(vdo_path); //遍歷文件夾
 vdo_info_ls.sort(function (a, b) {//時(shí)間排序
 return Date.parse(b.ctime) - Date.parse(a.ctime);//時(shí)間正序(不過這個(gè)方法好像只能對月日起效 對年好像不起作用)
 }); 
} 
var page_count = 20;//分頁條數(shù)app.get('/getvdojson', function (req, res) { var ret = [];//返回的分頁json初始化
 if (req.query.page) {//判斷是否有g(shù)et參數(shù)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}); 
// 創(chuàng)建服務(wù)端http.createServer(app).listen('5000', function () {
 reGetFileInfos();//初始化文件信息集
 console.log('啟動(dòng)服務(wù)器完成');
});

寫入代碼后運(yùn)行。

瀏覽器訪問http://127.0.0.1:5000/getvdojson?page=0 查看效果

改變url的page參數(shù)查看效果。

如果運(yùn)行正常頁面會返回json。(如:[{“name”:”一分鐘學(xué)唱《loser》…..”mtime”:”2016-07-27T11:11:28.501Z”}])

第二步編寫網(wǎng)站前臺主頁面：

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

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

2.static文件夾下創(chuàng)建img,js和css文件夾分別存放img,js和css文件

3.在項(xiàng)目下創(chuàng)建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() { //更新后回調(diào)
 });//瀑布流插件初始化
 window.addEventListener('resize', function() {//窗口大小改變自動(dòng)排版
 minigrid('#photo-box', '.photo');
 }); 
 
 </script></body></html>

訪問http://127.0.0.1:5000/ 查看效果
效果示例:

Paste_Image.png

第三步前后臺結(jié)合：

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為加載動(dòng)畫
 } 
 }; </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() { //更新后回調(diào)
 });//瀑布流插件初始化
 window.addEventListener('resize', function() {//窗口大小改變自動(dòng)排版
 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(); //獲取滾動(dòng)條的位置
 var sctop = $(document).height() - $(window).height(); if(tops >= sctop) //成立說明滾動(dòng)條已在最底部
 {
 page = page + 1; //傳遞頁碼 
 b_load(page);
 }
 };
 b_load(page);
 page=page+1;
 b_load(page); 
</script></body></html>

[為什么不直接顯示視頻而偏偏搞個(gè)截圖?--因?yàn)楸救饲皩戇^類似小網(wǎng)站,發(fā)現(xiàn)如果后臺插件獲取視頻截圖麻煩,但直接顯示視頻也就是video標(biāo)簽的話會出現(xiàn)當(dāng)加載大量視頻時(shí),出現(xiàn)卡頓,導(dǎo)致部分視頻無法顯示縮略圖和無法播放的現(xiàn)象。]
運(yùn)行項(xiàng)目重新訪問http://127.0.0.1:5000/ 查看效果

第四步添加點(diǎn)擊播放功能：

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為加載動(dòng)畫
 } 
 }; </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() { //更新后回調(diào)
 });//瀑布流插件初始化
 window.addEventListener('resize', function() {//窗口大小改變自動(dòng)排版
 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>(發(fā)布:"+(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(); //獲取滾動(dòng)條的位置
 var sctop = $(document).height() - $(window).height(); if(tops >= sctop) //成立說明滾動(dòng)條已在最底部
 {
 page = page + 1; //傳遞頁碼 
 b_load(page);
 }
 }; //默認(rèn)先加載
 b_load(page);
 page=page+1;
 b_load(page); 
 //播放時(shí)阻止 滾動(dòng)條 上下滾動(dòng) 防止?jié)L動(dòng)加載
 $.fn.scrollUnique = function() { return $(this).each(function() { var eventType = 'mousewheel'; if(document.mozHidden !== undefined) {
 eventType = 'DOMMouseScroll';
 }
 $(this).on(eventType, function(event) { // 一些數(shù)據(jù)
 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瀏覽器下滾動(dòng)會跨越邊界直接影響父級滾動(dòng)，因此，臨界時(shí)候手動(dòng)邊界滾動(dòng)定位
 this.scrollTop = delta > 0 ? 0 : scrollHeight; // 向上滾 || 向下滾
 event.preventDefault();
 }
 });
 });
 };
 $('.mask').scrollUnique();//事件綁定</script></body></html>

相信看了本文案例你已經(jīng)掌握了方法，更多精彩請關(guān)注Gxl網(wǎng)其它相關(guān)文章！

相關(guān)閱讀：

ES6的拓展運(yùn)算符詳解

ES6的變量的作用域與聲明詳解

commonJS與es6規(guī)范的引入導(dǎo)出

聲明：本網(wǎng)頁內(nèi)容旨在傳播知識，若有侵權(quán)等問題請及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com