DBBlog 前端代码分析

后台管理页面

前端代码结构

dbblog-manage-frontend
├─ src
│  ├─ App.vue
│  ├─ assets # 公共组件
│  │  ├─ img
│  │  │  ├─ avatar.jpeg
│  │  │  ├─ login_bg.jpg
│  │  │  └─ no_picture.jpeg
│  │  ├─ logo.png
│  │  └─ scss
│  │     ├─ index.scss
│  │     ├─ _base.scss
│  │     ├─ _normalize.scss
│  │     └─ _variables.scss
│  ├─ element-ui# elementUI主题
│  │  └─ index.js
│  ├─ element-ui-theme# elementUI主题
│  ├─ components # 公共组件
│  │  ├─ icon-svg
│  │  │  └─ index.vue
│  │  └─ table-tree-column
│  │     └─ index.vue  
│  ├─ icons
│  ├─ main.js
│  ├─ router  #路由
│  │  ├─ import-development.js
│  │  ├─ import-production.js
│  │  └─ index.js
│  ├─ store  # vuex
│  │  ├─ index.js
│  │  └─ modules
│  │     ├─ common.js
│  │     └─ user.js
│  ├─ utils #js 工具类 
│  │  ├─ httpRequest.js #axios 配置
│  │  ├─ index.js # 
│  │  └─ validate.js
│  └─ views # 视图
│     ├─ common # 公模块
│     │  ├─ 404.vue
│     │  ├─ components
│     │  │  ├─ lineChart.vue
│     │  │  └─ panelGroup.vue
│     │  ├─ home.vue
│     │  ├─ login.vue
│     │  └─ theme.vue
│     ├─ main-content.vue
│     ├─ main-navbar-update-password.vue
│     ├─ main-navbar.vue
│     ├─ main-sidebar-sub-menu.vue
│     ├─ main-sidebar.vue
│     ├─ main.vue
│     └─ modules
│        ├─ article # 文章模块
│        │  ├─ article-add-or-update.vue
│        │  └─ article.vue
│        ├─ book # 图书模块
│        │  ├─ book-add-or-update.vue
│        │  ├─ book.vue
│        │  ├─ note-add-or-update.vue
│        │  └─ note.vue
│        ├─ operation # 运维模块
│        │  ├─ category-add-or-update.vue
│        │  ├─ category.vue
│        │  ├─ link-add-or-update.vue
│        │  ├─ link.vue
│        │  ├─ recommend-add-or-update.vue
│        │  ├─ recommend.vue
│        │  ├─ tag-add-or-update.vue
│        │  └─ tag.vue
│        └─ sys # 系统模块
│           ├─ menu-add-or-update.vue
│           ├─ menu.vue
│           ├─ param-add-or-update.vue
│           ├─ param.vue
│           ├─ role-add-or-update.vue
│           ├─ role.vue
│           ├─ user-add-or-update.vue
│           └─ user.vue

```

main.js

#利用  Vue.prototype.$xxx = xxx 挂载全局变量，不使用 $ 会被本地变量覆盖
// 挂载全局
Vue.prototype.$http = httpRequest // Ajax 请求方法
Vue.prototype.isAuth = isAuth // 权限方法
Vue.prototype.getSysParam = getSysParam // 获取参数
Vue.prototype.getSysParamArr = getSysParamArr // 获取参数

# 保存整站vuex本地储存初始状态，目前不太清楚？？？？？？？？？？？
window.SITE_CONFIG['storeState'] = cloneDeep(store.state)

router包

utils包

httpRequest.js

使用axios 创建 http ，对http 各个 对象进行配置

• 请求拦截，带上token http
• 响应拦截，判断token是否有效
• 请求地址处理 ？？？？？？？？？？？？？
• POST请求参数处理，

最终将 http 暴露出去

index.js

• 获取 UUID
• 权限验证，从 sessionStorage 获取 permission，鉴权
• 树形数据转换
• 清除登录信息
• 根据 Type 和 key 获取参数 对应从 sysParamList 中查找
• 根据 type 获取参数列表
• debounce 函数，没看懂？？？？？？？？？？？？？？