• Front-End of Vue-Express-MongoDB-Blog by hjwforever
  • Project setup
    • Compiles and hot-reloads for development
    • Compiles and minifies for production
    • Lints and fixes files
    • Customize configuration
  • 项目结构
  • 部分界面预览
    • 注册界面
    • 登录界面
    • 个人信息界面
    • 主页界面
      • 主页
      • 文章列表随页面向下滚动不断加载
      • 点赞文章及主页文章列表加载完毕
    • 文章管理界面
      • 界面
      • 发表新文章
      • 编辑已有文章
      • 普通账户没有管理员权限进行 删除或更新文章
      • 文章列表分页

Front-End of Vue-Express-MongoDB-Blog by hjwforever

示例网站1、示例网站2

本项目为纯前端项目, 后端项目可移步vue-express-mongdb-blog-server, 前后端整合对接版本可移步vue-express-mongdb-blog-server/release

Project setup

npm install

Compiles and hot-reloads for development

npm run serve

Compiles and minifies for production

npm run build

Lints and fixes files

npm run lint

Customize configuration

See Configuration Reference.

项目结构

思维导图下载链接： 前端项目结构思维导图

├─.gitignore 
├─babel.config.js 
├─build --------------------- // build后的文件导出目录
├─package-lock.json 
├─package.json 
├─public 
│ ├─favicon.ico 
│ └─index.html 
├─README.md 
├─src 
│ ├─App.vue 
│ ├─assets 
│ │ ├─bg.jpg 
│ │ └─logo.png 
│ ├─components -------------- // Vue组件
│ │ ├─Footer.vue ------------ // 页脚组件
│ │ ├─Home.vue -------------- // 主页
│ │ ├─Infinite -------------- // 无限加载模块(随页面滚动无限从服务器数据库加载文章)
│ │ │ ├─Error.vue ----------- // 向服务器请求文章出错
│ │ │ ├─NoMore.vue ---------- // 当没有更多文章后显示提示
│ │ │ ├─NoResults.vue ------- // 请求没有结果时提示
│ │ │ └─PostItem.vue -------- // 文章列表中的文章组件
│ │ ├─Post.vue -------------- // 组件， 编辑文章
│ │ ├─PostDialogFrom.vue ---- // 组件， 添加新文章
│ │ ├─PostsList.vue --------- // 文章管理界面
│ │ └─Snackbar.vue ---------- // 已全局注册的消息组件，显示为可自定义文本、颜色、时间的顶部小消息条
│ ├─http.js ----------------- // axios，定义API请求的基路由及请求头
│ ├─main.js ----------------- // 入口文件，全局注册众多组件，如vuetify组件(本项目使用的UI框架)、Infinite组件(页面滚动无限加载模块）、Snackbar.send（自行封装及全局注册的顶部消息条）、VueSweetalert2(确认框组件)等等
│ ├─models ------------------ // 模型文件类
│ │ └─user.js --------------- // 用户Model
│ ├─plugins ----------------- // 插件
│ │ └─vuetify.js ------------ // vuetify(本醒目使用的UI框架)
│ ├─router ------------------ // 路由文件, 包括重定向等
│ │ └─index.js 
│ ├─services ---------------- // 服务模块， 用于登录验证（包括有效期为24小时的accessToken）、请求文章的方法等
│ │ ├─auth-header.js -------- // 定义登录、注册及登出的axios请求方法
│ │ ├─auth.service.js ------- // 设置登录注册请求头
│ │ ├─PostDataService.js ---- // 定义基于axios请求的对文章的各种请求服务
│ │ └─user.service.js ------- // 用户服务，对应账户的不同类型，如user、admin等
│ ├─store ------------------- // 全局存储模块
│ │ ├─auth.module.js -------- // 登录、注册状态
│ │ ├─index.js -------------- // 入口文件
│ │ └─snackbar.module.js ---- // 定义消息条基本函数，以用于之后全局注册及使用
│ └─views ------------------- // 视图模块
│   ├─BoardUser.vue --------- // 用户界面，即为文章管理界面(注意删除及更新已有文章需要管理员权限)
│   ├─Login.vue ------------- // 登录界面
│   ├─Profile.vue ----------- // 个人信息界面，显示部分token、id、用户名、邮箱及已授权权限(所有已注册账户都有user权限，但admin等高级权限才可以在前端界面进行删除或修改文章)
│   └─Register.vue ---------- // 注册界面
└─vue.config.js ------------- // vue配置文件，配置了前端运行端口以及申明转译依赖：(vuetify，本项目所使用的UI框架）

部分界面预览

注册界面

登录界面

个人信息界面

主页界面

主页

文章列表随页面向下滚动不断加载

点赞文章及主页文章列表加载完毕

文章管理界面

界面

发表新文章

编辑已有文章

编辑文章

普通账户没有管理员权限进行 删除或更新文章

图片1 图片2

文章列表分页

文章列表分页