index.html , 以及reset.css 和 style.css
编写网易云音主页的hmtl源代码, 并进行一定的css的样式的编写, 模仿网易云页面的主页, 使用定位技术, 页面浮动技术等, 列表页面等.共同完成主页html与css的编写. 此时页面为静态数据, 将静态布局页面完成之后, 再编写动态数据.
使用网络上下载来的网易云接口对服务器发出请求各种数据. 将使用node服务启动到本地的接口处, 然后在自己编写的项目中进行访问链接, 将从接口获取到的json数据根据静态页面渲染到网页上, 完成动态数据的加载.
与主页相同, 首先编写静态html页面与css的样式, 同时通过网易云音乐的接口获取到相关的信息, 这里还需要使用npm的包管理工具导入一个处理歌词的包模块, 并根据其具体的使用教程完成歌词部分的代码逻辑编写. 并通过js加载为动态的数据
如上相同, 编写评论的html及css的样式, 但是本次我们将会通过使用本地的数据库来渲染数据. 即本机将会作为服务器来提供数据服务. 访问本地的接口来实现. 并且通过前端页面的正常使用, 能够将评论数据写入到数据库中.
同理, 首先编写静态页面的数据, 随后再编写有接口请求得到的动态数据渲染到前端页面中.
随后再在此页面中实现搜索的功能, 在文本框中输入信息能够调用接口来显示推荐信息. 模仿网易云的搜索功能. 并且能够利用浏览器的本地缓存对搜索内容保存到localStorage中.
最后本项目实现语音搜索功能, 利用科大讯飞的语音识别API (https://www.xfyun.cn/services/rtasr), 在点击麦克风图标之后, 说出想要搜索的内容, 浏览器便能够使用电脑的麦克风功能, 录入到声音, 并通过科大讯飞的接口来实现实时语音转换功能.
稍微修改一下demo中的源代码, 使它符合自身项目代码的需求即可正常使用. 便实现了语音转换功能. 随后便会接着调用搜索建议函数, 完成推荐歌曲的功能
npm install数据库配置文件为 server/config/config.js
node server/http.js使用vscode 插件live server启动index.html