Vue3+Nest实战,极简书签导航

背景

作为一名切图仔,其实一直想捣鼓一个完整的Web应用。前段时间一直在学习《Nest 通关秘籍》,就更想自己动手试试了。之前一直在Chrome浏览器上使用一款名为Homely的插件,这个插件我已经使用好几年了,在这里也安利给大家。 然后我想着这玩意能不能做成在线的呀,于是就开发了Myhomely极简书签导航这款应用,下面就具体介绍下。

产品介绍

登录系统后,内置了「文档/论坛」、「工具」两个初始书签栏。点击有右下角「加号」按钮,即可新增书签栏。鼠标浮动到书签栏名字右方,有操作项下拉菜单,可以完成书签栏编辑,删除操作。点击具体的书签,即可跳转到具体的页面。每个书签栏中可以新增单个网页书签,也可以新增一个组,再添加若干相关书签,大家可以自行体验下,操作起来还是很方便的,如果有好的想法或者交互,也可以告诉我哈。

技术栈

前端层面主要采用了Vue3官方脚手架、并且配合Antd Design Vue,TailwindCSS。 服务端采用Nest完成HTTP接口逻辑,配合TypeORM、Mysql、Redis完成数据持久化存储。 本项目部署在腾讯云服务器上,并且采用Docker,Docker-Compose完成整体流程。为了加速前端静态资源访问速度,将打包后的静态资源上传至腾讯云COS中,并且采用CDN进行访问加速。

页面展示

登录页

注册页

引导页

书签编辑

暗黑模式

项目地址

前端仓库:github.com/honorsuper/...

服务端仓库:github.com/honorsuper/...

本地启动服务端项目时,本地需要先确保启动Mysql、Redis服务,并且创建好对应的库,最好还需要配置好对应的环境变量参数。具体细节可以参考项目README。

结尾

对于Myhomely极简书签导航,还是希望能给大家日常工作带来一些便利,成为大家的办公助手。同时也是基于现有技术的一种探索尝试,不可避免肯定还是存在诸多问题,希望大家可以积极反馈,最后,喜欢本项目的可以点个Star😊

相关推荐
慧一居士14 小时前
Element Plus 按需引入的配置使用说明和完整示例
前端·vue.js
CoderWeen18 小时前
我写了个能一步步点着看的 Dijkstra 可视化项目(Vue3 + Leaflet + Generator)
前端·javascript·vue.js
无人生还19 小时前
第 1 篇:从 Vue3 到 React 的思维转变
前端·vue.js·react.js
就业发动机19 小时前
我用 Tauri 做了一个约 1.5 MB 的开源屏幕标注工具:MarkerOn
vue.js·rust
爱分享的程序猿-Clark19 小时前
【前端分享】vue开发项目,如何实现 从A页面跳转到B页面,并传值!
前端·javascript·vue.js
徐小夕20 小时前
花了3天,我写了一款开源AI公众号编辑器
前端·vue.js·github
come1123421 小时前
Vue 2 与 Vue 3 语法区别及使用技巧
前端·javascript·vue.js
腻害兔21 小时前
【若依项目-产品经理视角】RuoYi-Vue-Pro 源码拆解:ERP 企业资源模块,一个轻量级进销存的完整实现?
前端·javascript·vue.js·人工智能·前端框架·产品经理·ai编程
Allshadow21 小时前
Nest.js - 目录结构
javascript·nestjs
Simon_He1 天前
AI 对话里的流式 Markdown 为什么难:从不完整 Token 到增量渲染
vue.js