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

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

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

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

相关推荐
叫我龙翔27 分钟前
【Linux】进程间关系与守护进程
linux·运维·服务器·计算机网络
小诸葛的博客29 分钟前
Ubuntu如何如何安装tcpdump
linux·ubuntu·tcpdump
S hh1 小时前
【Linux】进程地址空间
java·linux·运维·服务器·学习
康熙38bdc2 小时前
Linux 进程优先级
linux·运维·服务器
hhzz3 小时前
Linux Shell编程快速入门以及案例(Linux一键批量启动、停止、重启Jar包Shell脚本)
android·linux·jar
只是有点小怂3 小时前
parted是 Linux 系统中用于管理磁盘分区的命令行工具
linux·运维·服务器
三枪一个麻辣烫3 小时前
linux基础命令
linux·运维·服务器
知否技术3 小时前
为什么nodejs成为后端开发者的新宠?
前端·后端·node.js
cuisidong19974 小时前
如何在 Kali Linux 上安装 Google Chrome 浏览器
linux·运维·chrome
光通信学徒4 小时前
ubuntu图形界面右上角网络图标找回解决办法
linux·服务器·ubuntu·信息与通信·模块测试