/fireblogs

https://jiaqicoder.com/fireblogs

Primary LanguageVue

项目介绍

使用vue 3 + vuex + vue-router + scss,用vite 2.0打包 ,并用firebase当做数据库,构造一个博客的响应式前端页面。

firebase 为谷歌提供的服务,需要代理才能正常使用

目前:已经实现注册登录,新增,预览,修改,删除博客,添加管理员等等功能。

TODO:

  • 实现加载时的骨架屏
  • 增加评论功能

未登录页面

电脑端

未注册登录时,navigation栏会显示注册登录,且第一个大的banner提示注册登录。

image-20210913235458784

之后还会显示2个具体的文章的大banner,点击可以查看,最后为博客卡片和页面底部信息。

image-20210913235827576

手机端

image-20210914090402471

image-20210914090416735

注册登录

由于使用firebase作为后端,因此已经实现注册登录,重置密码功能。

电脑端

注册

image-20210914090602710

登录

image-20210914090524872

image-20210914091113310

重置密码

image-20210914091005510

手机端

注册

image-20210914090630307

登录

image-20210914090658940

重置密码

image-20210914090717549

已经登录

电脑端左侧会显示由用户昵称构成的头像;如果用户注册时申请为管理员,此时导航栏上会有还会新增发布文章功能。

第一个提示用户登录的大banner已经消失,取而代之的是博客。

image-20210914091146796

用户信息修改

单击用户头像,可以看到一个弹出的modal。

image-20210914091508892

  • 账号设置: 修改用户姓名和用户名

    image-20210914091704376

  • 管理员主页:

    如果登录的用户是管理员,可以通过邮箱将其他的已经注册的用户设置为管理员。

    image-20210914091822200

  • 退出登录

发布文章

只有登录的用户是管理员,才有这个功能。

image-20210914092354462

可以上传封面,预览封面和发布前预览文章。

修改删除文章

如果用户是管理员,还可以在博客页面,修改和删除文章。

image-20210914092457904

image-20210914092613600

最后,fireblogs使用vue-router 实现了导航守卫,如果用户没有登录,是无法进入到需要权限的页面。