Website using node.js as an introduction-JS Tutorial-php.cn

Website using node.js as an introduction

php中世界最好的语言

Release： 2018-03-10 15:34:23

Original

2904 people have browsed it

这次给大家带来用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('启动服务器完成');
});

Copy after login

写入代码后运行。

浏览器访问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");
});

Copy after login

2.static文件夹下创建img,js和css文件夹分别存放img,js和css文件

3.在项目下创建index.html写入以下代码


    
    小视频
    
    
    

    
    
        
        
            [站外图片上传中……(2)]            
                欢迎来到XXX(公告或广告位)            
         
            [站外图片上传中……(3)]            
                欢迎来到XXX(公告或广告位)            
         
        
            [站外图片上传中……(4)]            
                欢迎来到XXX(公告或广告位)            
         
        
            [站外图片上传中……(5)]            
                欢迎来到XXX(公告或广告位)            
         
        
            [站外图片上传中……(6)]            
                欢迎来到XXX(公告或广告位)            
         
        
            [站外图片上传中……(7)]            
                欢迎来到XXX(公告或广告位)            
         
        
            [站外图片上传中……(8)]            
                欢迎来到XXX(公告或广告位)            
         
        
            [站外图片上传中……(9)]            
                欢迎来到XXX(公告或广告位)            
         
        
            [站外图片上传中……(10)]            
                欢迎来到XXX(公告或广告位)            
         
        
            [站外图片上传中……(11)]            
                欢迎来到XXX(公告或广告位)            
         
        
            [站外图片上传中……(12)]            
                欢迎来到XXX(公告或广告位)            
         
        
            [站外图片上传中……(13)]            
                欢迎来到XXX(公告或广告位)            
         
    
    
        加载中...

Copy after login

访问http://127.0.0.1:5000/ 查看效果
效果示例:

Paste_Image.png

第三步前后台结合：

1.修改index.html为以下代码(请注意修改变化)


    
    小视频
    
    
    
    

    
    
        
        
            [站外图片上传中……(14)]            
                欢迎来到XXX(公告或广告位)            
          
    
    
        加载中...

Copy after login

[为什么不直接显示视频而偏偏搞个截图?--因为本人前写过类似小网站,发现如果后台插件获取视频截图麻烦,但直接显示视频也就是video标签的话会出现当加载大量视频时,出现卡顿,导致部分视频无法显示缩略图和无法播放的现象。]
运行项目重新访问http://127.0.0.1:5000/ 查看效果

第四步添加点击播放功能：

1.修改index.html为以下代码(请注意修改变化)


    
    小视频
    
    
    
    

    
    
        
        
            [站外图片上传中……(15)]            
                欢迎来到XXX(公告或广告位)            
        
    
    
        加载中...