基于VueJS和NodeJs实现的个人数字花园项目

5,110 阅读3分钟

心流:构建您的个人数字花园

前言:

项目介绍

这是一个使用vue.js和node.js的express.js开发的网站,它可以让用户在浏览器中查看和上传markdown格式的笔记,并且可以自由挑选视频来学习或放松。这个网站的目标是帮助用户构建自己的数字花园,也就是一个可以记录、整理、分享和回顾自己学习的知识和经验的个人空间。

项目起名的启发

心流的英文是 Flow,在中文世界中也翻译为福乐、沉醉感、沉浸感、流畅感等等。心流是指人们在当下的一种情绪体验,此时此刻,人们对某一活动或事物表现出浓厚的兴趣并完全投入其中。

心流是你从当前所从事的活动中直接获得的情绪体验,回忆或想象等不能产生这种体验

最早是想单纯做一下知识管理,现在是信息化时代,每个人每时每刻都在有意无意地生产自己的数字信息,这些信息或是图文或是视频,并且从组织上来看常常是松散的,要么在自己的某个U盘,要么不知道在电脑上某个不知道第几级,要么不知道在哪个平台上,散装的知识信息难以让人进入高效的心流状态。

因此项目愿景是:

  • 提高用户的学习效率和效果,可以通过笔记和视频的结合,加深对知识的理解和记忆,也可以通过分类标签快速定位到感兴趣或遗忘的内容。
  • 增强用户的学习动力和乐趣,可以通过markdown语法,创造出美观和有趣的笔记,也可以通过视频播放,享受视听的体验。
  • 拓展用户的学习资源和社区,可以通过导入和导出功能,分享自己的笔记和视频给其他人。
  • 当然,个人能力有限,时间有限,两周只全栈开发了个基础原型(太累啦,务必放假几天,(手动狗头保护)咳咳)

如何运行

数据库

导入数据库:

数据库文件在src/utils/下面,直接将sql文件导入到mysql就好

截屏2023-06-30 22.54.57.png

如果导入失败报错了:

因为我是macOS,在迁移到Windows电脑的时候确实发现有个小问题: 因为在Windows上的mysql没找到这个COLLATE,所以报错啦,问题不大,把这个删了就好

截屏2023-06-30 22.58.23.png

修改数据库连接语句

修改这个数据库连接文件 src\utils\DB_conn.js

截屏2023-06-30 23.01.45.png

修改为你mysql的账号密码

截屏2023-06-30 23.00.30.png

安装需要的依赖

sudo npm install

热编译启动或直接启动

热编译

sudo npm start

直接启动

sudo node app.js

项目效果预览

登录注册

截屏2023-06-30 23.07.22.png

截屏2023-06-30 23.07.45.png

首页

截屏2023-06-30 23.08.09.png

笔记

截屏2023-06-30 23.08.32.png

截屏2023-06-30 23.08.56.png

视频

截屏2023-06-30 23.09.15.png

截屏2023-06-30 23.09.33.png

个人中心

截屏2023-06-30 23.09.48.png

截屏2023-06-30 23.10.08.png

管理

管理笔记

截屏2023-06-30 23.10.23.png

截屏2023-06-30 23.10.36.png

管理视频

截屏2023-06-30 23.11.58.png

截屏2023-06-30 23.12.09.png

管理用户

截屏2023-06-30 23.12.20.png

截屏2023-06-30 23.12.35.png

内容投稿

投稿笔记 截屏2023-06-30 23.10.52.png

投稿视频 截屏2023-06-30 23.12.54.png