这次给大家带来用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('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" >
加载中... </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/ 查看效果
效果示例:
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 src="/static/imghwm/default1.png" data-src="/static/js/jquery-2.1.4.min.js" class="lazy" / alt="用node.js做簡介的網站" >",{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" >
加载中... </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 ></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 / alt="用node.js做簡介的網站" >",{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" >
加载中... </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>相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！
相关阅读：
以上是用node.js做簡介的網站的詳細內容。更多資訊請關注PHP中文網其他相關文章！
陳述
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn
C和JavaScript：連接解釋Apr 23, 2025 am 12:07 AMC 和JavaScript通過WebAssembly實現互操作性。 1）C 代碼編譯成WebAssembly模塊，引入到JavaScript環境中，增強計算能力。 2）在遊戲開發中，C 處理物理引擎和圖形渲染，JavaScript負責遊戲邏輯和用戶界面。
從網站到應用程序：JavaScript的不同應用Apr 22, 2025 am 12:02 AMJavaScript在網站、移動應用、桌面應用和服務器端編程中均有廣泛應用。 1)在網站開發中，JavaScript與HTML、CSS一起操作DOM，實現動態效果，並支持如jQuery、React等框架。 2)通過ReactNative和Ionic，JavaScript用於開發跨平台移動應用。 3)Electron框架使JavaScript能構建桌面應用。 4)Node.js讓JavaScript在服務器端運行，支持高並發請求。
Python vs. JavaScript：比較用例和應用程序Apr 21, 2025 am 12:01 AMPython更適合數據科學和自動化，JavaScript更適合前端和全棧開發。 1.Python在數據科學和機器學習中表現出色，使用NumPy、Pandas等庫進行數據處理和建模。 2.Python在自動化和腳本編寫方面簡潔高效。 3.JavaScript在前端開發中不可或缺，用於構建動態網頁和單頁面應用。 4.JavaScript通過Node.js在後端開發中發揮作用，支持全棧開發。
C/C在JavaScript口譯員和編譯器中的作用Apr 20, 2025 am 12:01 AMC和C 在JavaScript引擎中扮演了至关重要的角色，主要用于实现解释器和JIT编译器。1）C 用于解析JavaScript源码并生成抽象语法树。2）C 负责生成和执行字节码。3）C 实现JIT编译器，在运行时优化和编译热点代码，显著提高JavaScript的执行效率。
JavaScript在行動中：現實世界中的示例和項目Apr 19, 2025 am 12:13 AMJavaScript在現實世界中的應用包括前端和後端開發。 1)通過構建TODO列表應用展示前端應用，涉及DOM操作和事件處理。 2)通過Node.js和Express構建RESTfulAPI展示後端應用。
JavaScript和Web：核心功能和用例Apr 18, 2025 am 12:19 AMJavaScript在Web開發中的主要用途包括客戶端交互、表單驗證和異步通信。 1)通過DOM操作實現動態內容更新和用戶交互；2)在用戶提交數據前進行客戶端驗證，提高用戶體驗；3)通過AJAX技術實現與服務器的無刷新通信。
了解JavaScript引擎：實施詳細信息Apr 17, 2025 am 12:05 AM理解JavaScript引擎內部工作原理對開發者重要，因為它能幫助編寫更高效的代碼並理解性能瓶頸和優化策略。 1)引擎的工作流程包括解析、編譯和執行三個階段；2)執行過程中，引擎會進行動態優化，如內聯緩存和隱藏類；3)最佳實踐包括避免全局變量、優化循環、使用const和let，以及避免過度使用閉包。
Python vs. JavaScript：學習曲線和易用性Apr 16, 2025 am 12:12 AMPython更適合初學者，學習曲線平緩，語法簡潔；JavaScript適合前端開發，學習曲線較陡，語法靈活。 1.Python語法直觀，適用於數據科學和後端開發。 2.JavaScript靈活，廣泛用於前端和服務器端編程。
熱AI工具
Undresser.AI Undress
人工智慧驅動的應用程序，用於創建逼真的裸體照片
AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。
Undress AI Tool
免費脫衣圖片
Clothoff.io
AI脫衣器
Video Face Swap
使用我們完全免費的人工智慧換臉工具，輕鬆在任何影片中換臉！
熱門文章
刺客信條陰影：貝殼謎語解決方案
3 週前ByDDD
Windows 11 KB5054979中的新功能以及如何解決更新問題
2 週前ByDDD
在哪裡可以找到原子中的起重機控制鑰匙卡
3 週前ByDDD
<🎜>：死鐵路 - 如何完成所有挑戰
4 週前ByDDD
Atomfall指南：項目位置，任務指南和技巧
4 週前ByDDD
熱工具
SublimeText3 Linux新版
SublimeText3 Linux最新版
VSCode Windows 64位元 下載
微軟推出的免費、功能強大的一款IDE編輯器
MinGW - Minimalist GNU for Windows
這個專案正在遷移到osdn.net/projects/mingw的過程中，你可以繼續在那裡關注我們。 MinGW：GNU編譯器集合（GCC）的本機Windows移植版本，可自由分發的導入函式庫和用於建置本機Windows應用程式的頭檔；包括對MSVC執行時間的擴展，以支援C99功能。 MinGW的所有軟體都可以在64位元Windows平台上運作。
Dreamweaver Mac版
視覺化網頁開發工具
DVWA
Damn Vulnerable Web App (DVWA) 是一個PHP/MySQL的Web應用程序，非常容易受到攻擊。它的主要目標是成為安全專業人員在合法環境中測試自己的技能和工具的輔助工具，幫助Web開發人員更好地理解保護網路應用程式的過程，並幫助教師/學生在課堂環境中教授/學習Web應用程式安全性。 DVWA的目標是透過簡單直接的介面練習一些最常見的Web漏洞，難度各不相同。請注意，該軟體中
