基于Bookstrap/Jquery+Express的简易个人主页——学习工作专用(支持部署在手机上)

100 阅读2分钟

持续创作,加速成长!这是我参与「掘金日新计划 · 6 月更文挑战」的第1天,点击查看活动详情

前言

  • 本文将分享博主本人开源的一个简易的个人主页网站,实际上是一个日程规划和日志记录网站,同时学习之余还可听听音乐,由于时间有限,界面制作粗糙,不喜勿喷哈哈。
  • 网页主体采用响应式布局,移动端也有较好的体验,同时使用iframe嵌入网页(有点过时),实现了音乐不间断播放。
  • 相关技术:Nodejs、Express、HTML、JavaScript、CSS、Jquery、Bookstrap等。
  • 此项目大部分功能由常规的web开发技术实现,由于计划进行技术架构升级,此项目不再维护。
  • 此项目博主本人部署在华为平板上,供考研备考学习使用,已运行了仅半年时间,缝缝补补修复了一些bug,大体上不会有重大问题。项目中包含了部分学习日志的数据文件哈哈(未删除,勿喷)。
  • 具体功能如下:
功能名称英文别名具体描述
日程安排Calendar显示、增加、修改、删除日程安排
记事本Notebook显示、增加、修改、删除备忘录
日志记录Journal显示、增加、修改、删除日志
音乐播放Music Player底部音乐播放控制台、音乐搜索、音乐播放(列表播放)、歌词显示(滚动效果、专辑背景)、页面内部的高级播放控制台(播放、暂停、切歌、显示隐藏歌词、播放进度控制)
其他说明Other页面背景切换(将图片素材放置到资源目录下,可通过按钮进行切换背景)、隐私保护(单用户登录,防止被局域网内的用户访问)

预览

  • Calendar 在这里插入图片描述

  • 记事本在这里插入图片描述

  • 日志 在这里插入图片描述

  • 音乐播放器 在这里插入图片描述

音源:使用了某某云的接口

  • 响应式布局
    • 在这里插入图片描述在这里插入图片描述在这里插入图片描述 在这里插入图片描述

项目地址

codechina:nodejs_Home_Pro

安装步骤(附移动设备部署方法)

# 1、安装nodejs
①windows:可在nodejs官网下载安装包安装,或下载二进制文件手动配置安装
①Linux系统:
Ubuntu:可采用apt安装:sudo apt install nodejs -y
Centos:可采用yum安装:sudo yum install nodejs -y
③安卓/鸿蒙系统:下载安装f-droid软件,在f-droid中搜索安装termux,在termux中采用pkg安装:pkg install nodejs
# 2、安装git等工具
①windows:可在git官网下载安装包安装
①Linux系统:
Ubuntu:sudo apt install git -y
Centos:sudo yum install git -y
③安卓/鸿蒙系统:在termux中,pkg install git
# 3、拉取克隆项目:
git@codechina.csdn.net:weixin_44002829/nodejs_home_pro.git
# 4、安装依赖:
cd nodejs_home_pro
npm install
# 5、运行(默认9000端口)
node app.js