这次给大家带来用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中文网其它相关文章!
相关阅读:
以上是用node.js做簡介的網站的詳細內容。更多資訊請關注PHP中文網其他相關文章!