一个小项目打通全栈的任督二脉

今天闲来无事想写个小玩具，回顾一下知识，顺便给有想法的前端小伙伴交流交流 这个小项目（叫它项目都有点大了）分三个部分 项目效果

1. 前端部分：就3个页面（歌手列表，歌手的mv，mv播放页）musicH5
2. 后端部分：是一个开源的网易云音乐api项目
3. 服务器简单运维知识（把项目部署到自己的云服务器，可以公网访问）

一：兵马未动，粮草先行，先把数据搞定，先说后端部分

把 网易云音乐api项目 下载到本地后运行起来，这是个nodejs项目，前端同学默认都会，

由于我是有华为云服务器，所以我直接把后端项目部署到我的服务器上了，所以我先说说部署的事

二：把音乐接口项目部署到服务器

我个人建议使用华为云轻量级服务器，新手就买最低配 1核2G 一年 30块左右（具体自己看看，价格不定，活动价30左右），有了服务器后，要在服务器上安装node环境，个人建议把 pm2 也安装上，方便管理node进程

三：操作服务器，安装nginx

我一直想给前端小伙伴说的是“不要把自己锁死在前端”，前端只是我们进入互联网行业的敲门砖，人人都是全栈，没有玩过服务器的小伙伴查查资料，从0到1很难，从1到1万贵在坚持。 安装好nginx后把那几个前端页面上传到nginx对应的目录

我放在/usr/local/nginx/html/musicapp 下 接下来修改nginx配置文件。/usr/local/nginx/conf/nginx.conf

两步 1，配置 location /music 访问http://120.46.156.99/music 时候显示musicapp 下的index.html 2,配置跨域转发

接口都以/musicApi 开头，供nginx捕获请求并转发，解决跨域

三：前端部分，

页面写的很简陋，样式能看，分页或者触底加载更多啥都没有，旨在说明问题，细节随后再说 页面使用纯原生方法写的，数据请求回来之后使用innerHTML 替换内容

三个页面长这样 先说这么多，后续再补充，欢迎感兴趣的小伙伴一起学习