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

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

  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 替换内容

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

相关推荐
忧郁的蛋~16 分钟前
HTML表格导出为Excel文件的实现方案
前端·html·excel
然我37 分钟前
别再只用 base64!HTML5 的 Blob 才是二进制处理的王者,面试常考
前端·面试·html
小飞悟41 分钟前
前端高手才知道的秘密:Blob 居然这么强大!
前端·javascript·html
即将头秃的程序媛2 小时前
centos 7.9安装tomcat,并实现开机自启
linux·运维·centos
fangeqin2 小时前
ubuntu源码安装python3.13遇到Could not build the ssl module!解决方法
linux·python·ubuntu·openssl
爱奥尼欧4 小时前
【Linux 系统】基础IO——Linux中对文件的理解
linux·服务器·microsoft
超喜欢下雨天4 小时前
服务器安装 ros2时遇到底层库依赖冲突的问题
linux·运维·服务器·ros2
然我4 小时前
React 开发通关指南:用 HTML 的思维写 JS🚀🚀
前端·react.js·html
tan77º5 小时前
【Linux网络编程】网络基础
linux·服务器·网络
笑衬人心。5 小时前
Ubuntu 22.04 + MySQL 8 无密码登录问题与 root 密码重置指南
linux·mysql·ubuntu