资源下载地址:/download/sheziqiong/86781841
资源下载地址:/download/sheziqiong/86781841
目录
实验报告 1
【实验工具】 1【运行方法】 1【文件说明】 1【使用说明】 2
没有生成目录时的页面 3
生成目录后,自动播放歌曲 4
显示状态的歌词与目录 5
隐藏状态的歌词与目录 6
5.【实现方式】 7
1.目录生成: 7
2.切换歌曲 7
3.获取歌词 7
4.单曲循环播放歌曲 8
5.列表顺序播放歌曲 8
6.【心得体会】 8
实验报告
1.【实验工具】
实验平台:Node.js及其Web应用框架Express
html模板引擎:Jade
开发工具:Webstorm
2.【运行方法】
1.安装node.js后,在命令行窗口cd到bin文件夹,运行www文件
2在浏览器输出localhost:3000进入主页
3.【文件说明】
Node_module文件夹中是程序中用到的node.js的模块;public文件夹的images放了背景图,javascripts存放是func.js和jquery函数库,resource中放了媒体资源文件,stylesheets中是css文件,本文转载自http://www.biyezuopin.vip/onews.asp?id=14805 routes文件夹用来存放路由监听的代码相关文件,views中是模板引擎.jade文件。
这里resource中只放了少量资源文件进行测试。
4.【使用说明】
1.主页有两个链接,点击分别进入喜欢的歌和不喜欢的歌两个页面,这一过程中服务端向前端传递了存放歌曲文件夹的地址,以及遍历文件夹获得的歌曲名
var express = require('express');var path = require('path');var router = express.Router();/* GET home page. */router.get('/', function(req, res, next) {//用于进入主页res.render('index.jade', {title: '音乐播放器' });//渲染页面并传递参数});router.get('/likes',function(req,res){readDirSync(root1);res.render('likes.jade',{title:"喜欢的歌",catalog:titles,getPrefix:root1});//返回信息});router.get('/dislikes',function(req,res){readDirSync(root2);res.render('dislikes.jade',{title:"不喜欢的歌",catalog:titles,getPrefix:root2});//返回信息});var fs = require('fs');var path=require("path");var root1 = "../public/resource/likes";//当前文件夹var root2="../public/resource/dislikes";//当前文件夹var titles=null;function readDirSync(path){var cnt=0;titles=null;var pa = fs.readdirSync(path);pa.forEach(function(ele,index){var info = fs.statSync(path+"/"+ele);if(getdir(ele)=="mp3"){//只获取后缀为mp3的文件//console.log("file: "+ele); //ele即文件全名if(cnt++==0)titles=ele+' ';else {titles = titles + ele + ' ';//titles是一个字符串,格式如001.mp3 002.mp3,并发送给likes/dislikes页面}}});}function getdir(url){var arr = url.split('.');var len = arr.length;return arr[len-1];}module.exports = router;
资源下载地址:/download/sheziqiong/86781841
资源下载地址:/download/sheziqiong/86781841