这次给大家带来用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写入以下代码
小视频
[站外图片上传中……(2)]
欢迎来到XXX(公告或广告位)
[站外图片上传中……(3)]
欢迎来到XXX(公告或广告位)
[站外图片上传中……(4)]
欢迎来到XXX(公告或广告位)
[站外图片上传中……(5)]
欢迎来到XXX(公告或广告位)
[站外图片上传中……(6)]
欢迎来到XXX(公告或广告位)
[站外图片上传中……(7)]
欢迎来到XXX(公告或广告位)
[站外图片上传中……(8)]
欢迎来到XXX(公告或广告位)
[站外图片上传中……(9)]
欢迎来到XXX(公告或广告位)
[站外图片上传中……(10)]
欢迎来到XXX(公告或广告位)
[站外图片上传中……(11)]
欢迎来到XXX(公告或广告位)
[站外图片上传中……(12)]
欢迎来到XXX(公告或广告位)
[站外图片上传中……(13)]
欢迎来到XXX(公告或广告位)
加载中...
访问http://127.0.0.1:5000/ 查看效果
效果示例:
Paste_Image.png
第三步 前后台结合：
1.修改index.html为以下代码(请注意修改变化)
小视频
加载中...
[为什么不直接显示视频而偏偏搞个截图?--因为本人前写过类似小网站,发现如果后台插件获取视频截图麻烦,但直接显示视频也就是video标签的话会出现当加载大量视频时,出现卡顿,导致部分视频无法显示缩略图和无法播放的现象。]
运行项目重新访问http://127.0.0.1:5000/ 查看效果
第四步 添加点击播放功能：
1.修改index.html为以下代码(请注意修改变化)
小视频
加载中...
相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！
相关阅读：
