用node.js做简介的网站

来源：动视网责编：小采时间：2020-11-27 20:01:25

用node.js做简介的网站

用node.js做简介的网站:这次给大家带来用nodejs做简介的网站，用nodejs做网站的注意事项有哪些，下面就是实战案例，一起来看一下。首先你要有nodejs环境和会使用npm,不会自行Google或百度。（相关推荐：Node.js视频教程）ok！开始吧！第一步用nodejs编写后台:1.新建项目2

推荐度：

点击下载本文 文档为doc格式

导读用node.js做简介的网站:这次给大家带来用nodejs做简介的网站，用nodejs做网站的注意事项有哪些，下面就是实战案例，一起来看一下。首先你要有nodejs环境和会使用npm,不会自行Google或百度。（相关推荐：Node.js视频教程）ok！开始吧！第一步用nodejs编写后台:1.新建项目2

这次给大家带来用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" style="">
 加载中... </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/>",{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" style="">
 加载中... </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 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: 0px; 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为加载动画
 } 
 }; </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() { //更新后回调
 });//瀑布流插件初始化
 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>

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

用node.js做简介的网站

推荐度：

点击下载本文 文档为doc格式

标签：网站使用介绍

热门焦点

用node.js做简介的网站

用node.js做简介的网站

用node.js做简介的网站

最新推荐

猜你喜欢

热门推荐