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

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

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

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

相关推荐
独小乐9 分钟前
009.中断实践之实现按键测试|千篇笔记实现嵌入式全栈/裸机篇
linux·c语言·驱动开发·笔记·嵌入式硬件·arm
披着羊皮不是狼14 分钟前
将Ubuntu从C盘移动到D盘
linux·运维·ubuntu
l2ohvef22 分钟前
Windows 7 虚拟机 VMware Tools 安装失败:无法自动安装VSock 驱动程序
linux·运维·服务器
嵌入式×边缘AI:打怪升级日志30 分钟前
从零开始写Linux字符设备驱动:一个不操作硬件的Hello驱动
linux·运维·数据库
Benszen33 分钟前
Ansible自动化运维实战
linux·运维·自动化·ansible
艾莉丝努力练剑1 小时前
C++ 核心编程练习:从基础语法到递归、重载与宏定义
linux·运维·服务器·c语言·c++·学习
Trouvaille ~2 小时前
【MySQL篇】从零开始:安装与基础概念
linux·数据库·mysql·ubuntu·c·教程·基础入门
Curtain_Gin2 小时前
windows vim 配置
linux·编辑器·vim
Dontla2 小时前
(龙虾)OpenClaw(原 Clawdbot / Moltbot)常见部署方式介绍(Linux部署、Windows桌面部署)
linux·运维·服务器
Ghost Face...2 小时前
Linux USB 全栈解析:OTG + Type-C + PD 内核架构(架构师级)
linux·c语言·架构