Vue3+Egg.js开发一个浏览器首页

Vue3+Egg.js开发一个浏览器首页

2022年08月24日 阅读:4 字数:603 阅读时长:2 分钟

为了复习Vue3和Egg.js,做了一个简单的像电脑桌面那样个性化的浏览器首页。

在线体验:https://nav.timelessq.com/ ,功能还不完善慢慢补

源码:https://github.com/Spacesless/homepage

网上像百度、必应这样的浏览器首页很多,为啥要自己开发一个?

  1. 帮助自己复习 Vue3和Egg.js,突破个人系统开发设计能力的边界
  2. 想要一个比较个性化的首页
  3. 像桌面图标一样管理网站导航的功能
  4. 添加时间、天气、TodoList、看板娘之类的小组件
  5. 闲着没事干~

功能和特性

前端

搜索:可使用百度、谷歌、必应、B站、头条,后续提供自定义搜索引擎。

桌面小组件:TodoList(未完成、已完成),Live2D,天气,时钟

网站图标:提供常用网站导航选择,也能自定义添加网站,根据网址找不到网站对应的图标则使用canvas将网站名称首字符展示出来。

壁纸设置:可以更改背景图片,可以用必应每日图片以及个人图床的图片,或者自定义背景图

用户:用户注册(不需要填写手机、邮箱,填个密保问题用于密码找回就行)、登录、找回密码,用户设置的获取以及云端存储

后端

用户:用户注册(不用存啥隐私数据)、登录、找回密码,用户设置的获取以及云端存储

技术栈

前端

主要技术:

  • Vue 3
  • Vite 2
  • Ant Design Vue 3 组件库
  • Pinia 2 状态管理
  • TypeScript 类型控制
  • Eslint 代码规范控制
  • Prettier 美化代码

依赖库:

  • axios 网络请求
  • lodash 工具库

后端

主要技术:

  • Node.js
  • Egg.js
  • MySQL

后端没用TypeScript,Egg.js 添加这个有点麻烦,开发的时候用过被卡脖子了,功能有点少就先不加了

系统设计

设计理念

  1. 好扩展,方便添加"桌面组件"
  2. 重前端轻后端:除了用户设置等核心模块外,尽量不请求后端
  3. 不登录也能使用,配置存于浏览器存储
  4. 不同设备登录可选择同步云端配置或将本机设置更新到云端

后续功能规划

  • 添加时间、看板娘桌面组件
  • 桌面组件添加拖拽移动功能
  • 搜索引擎添加自定义地址
  • 用户设置查询添加缓存
  • 参考鱼皮的网站 https://github.com/liyupi/yuindex,添加一个终端命令输入功能

就我这拖延症,下次更新不知道啥时候了~

推荐阅读

恰饭区

评论区 0

0/500

还没有评论,快来抢第一吧