update some

- 新增标签导航功能（tagsView）动态路由（addRoutes）重定向页面（redirect） - 修改拆分store使用vuex的module模式权限验证逻辑（permission.js） - 修复表单格式传输多文件的时候，嵌套的对象数据不能转换问题（request.js）
uncleLian · Jun 27, 2019 · c37a000 · c37a000
1 parent 74274a3
commit c37a000
Show file tree

Hide file tree

Showing 27 changed files with 734 additions and 293 deletions.
diff --git a/README.md b/README.md
@@ -1,87 +1,56 @@
-# vue-blog-template
+# vueBlog-template
 
-[![image](https://img.shields.io/badge/vue-2.6.8-brightgreen.svg)](https://github.com/vuejs/vue)
-[![image](https://img.shields.io/badge/vue--router-3.0.2-brightgreen.svg)](https://github.com/vuejs/vue-router)
-[![image](https://img.shields.io/badge/vuex-3.1.0-brightgreen.svg)](https://github.com/vuejs/vuex)
-[![image](https://img.shields.io/badge/vue--cli-3.x-brightgreen.svg)](https://cli.vuejs.org/zh/)
-[![image](https://img.shields.io/badge/element--ui-2.7.0-9cf.svg)](https://github.com/ElemeFE/element)
-[![GitHub release](https://img.shields.io/github/release/uncleLian/vue-blog-template.svg)](https://github.com/uncleLian/vue-blog/releases)
+![image](https://img.shields.io/badge/vue-2.6.8-green.svg)
+![image](https://img.shields.io/badge/vue--router-3.0.2-green.svg)
+![image](https://img.shields.io/badge/vuex-3.1.0-green.svg)
+![image](https://img.shields.io/badge/element--ui-2.10.0-blue.svg)
 
-##### 注：master分支基于 vue-cli-3.x，vue-cli-2.x请移步到v1.0分支
 
 > 这是一个极简的管理后台模板，它只包含了搭建管理后台的一些必要功能
 
+##### 注：master分支基于 vue-cli-3.x，vue-cli-2.x请移步到[v1.0分支](https://github.com/uncleLian/vueBlog-template/tree/v1.0)
+
 - [在线演示](http://template.liansixin.win)
-- [使用文档](https://unclelian.github.io/vue-blog-docs/)
+- [使用文档](http://liansixin.win/vue-blog-book)
 
-<img src="http://poci6sbqi.bkt.clouddn.com/vue-blog-template.png" width="900px" style="max-width: 100%;"/>
+<img src="https://github.com/uncleLian/vueBlog-template/raw/gh-pages/screenshots/dashboard.png" width="900px" style="max-width: 100%;"/>
 
 ## 功能
-功能持续迭代中，欢迎 [pr](https://github.com/uncleLian/vue-blog/pulls) 和 [issue](https://github.com/uncleLian/vue-blog/issues)
-
-``` 
-- 登录/注销
-- 权限验证
-    - 页面级权限
-    - 按钮级权限
-- 多环境
-    - dev
-    - prod
-    - stage
-- 动态侧边栏
-- 动态面包屑
-- 错误处理
-    - 401
-    - 404
-    - 错误日志
-- 其他处理
-    - axios封装
-    - cache封装
-    - 页面平滑过渡
-    - css预处理器全局变量
-    - 包体积优化
-- svg icon / iconfont
-- mock
-- 进度条
-```
-
-## 开发
+- [x] 登录/注销
+- [x] 权限验证（页面级）
+- [x] 动态侧边栏
+- [x] 动态面包屑
+- [x] 导航标签
+- [x] 401、404、全局错误捕捉
+- [x] 多环境（dev、sit、prod）
+- [x] svg icon / iconfont
+- [x] 进度条
+- [x] element-ui
+- [x] axios封装（统一处理请求、拦截、报错等）
+- [x] cache封装
+
+
+## 开发和发布
 ```bash
 # 克隆项目
-git clone https://github.com/uncleLian/vue-blog-template.git
+git clone https://github.com/uncleLian/vueBlog-template.git
 
 # 安装依赖
 npm install
 
-# 启动服务：localhost:8003
+# 启动服务
 npm run dev
-```
-
-## 发布
-```bash
-# 构建测试环境
-npm run build:stage
 
-# 构建生产环境
+# 发布
 npm run build
 
-# 查看构建报告
+# 测试环境
+npm run build:stage
+
+# 报告
 npm run build:report
 ```
 
-## 版本日志
-[发行说明](https://github.com/uncleLian/vue-blog-template/releases)中记录了每个版本的详细更改。
-
-## Browsers support
-| [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/edge/edge_48x48.png" alt="IE / Edge" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>IE / Edge | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png" alt="Firefox" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Firefox | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png" alt="Chrome" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Chrome | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/safari/safari_48x48.png" alt="Safari" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Safari | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/opera/opera_48x48.png" alt="Opera" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Opera |
-| --------- | --------- | --------- | --------- | --------- |
-| IE10, IE11, Edge| last 2 versions| last 2 versions| last 2 versions| last 2 versions
-
-## 捐赠
-如果觉得这个项目帮助到了你，你可以请作者喝杯饮料表示支持 :green_heart:
-
-![image](http://poci6sbqi.bkt.clouddn.com/donate.jpg)
-
 ## 交流
 欢迎热爱学习、忠于分享的朋友一起来交流
 - Vue交流群：338241465

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "vue-blog-template",
-    "version": "2.0.0",
+    "version": "2.1.0",
     "private": true,
     "scripts": {
         "dev": "vue-cli-service serve",
@@ -11,7 +11,7 @@
     },
     "dependencies": {
         "axios": "^0.18.0",
-        "element-ui": "^2.7.2",
+        "element-ui": "^2.10.0",
         "js-cookie": "^2.2.0",
         "mockjs": "^1.0.1-beta3",
         "normalize.css": "^8.0.1",

diff --git a/src/App.vue b/src/App.vue
@@ -1,6 +1,6 @@
 <template>
     <div id="app">
-        <app-view />
+        <app-pageView />
         <vue-progress-bar />
     </div>
 </template>

diff --git a/src/api/login.js b/src/api/login.js
@@ -7,6 +7,6 @@ export function getLogin(form) {
 }
 // 用户信息
 export function getUser(token) {
-    let res = request('/api/user', 'GET', token)
+    let res = request('/api/user', 'POST', token)
     return res
 }
diff --git a/src/components/UserSelect/index.vue b/src/components/UserSelect/index.vue
@@ -14,18 +14,19 @@
 import { mapState } from 'vuex'
 export default {
     computed: {
-        ...mapState([
-            'user'
-        ]),
+        ...mapState('login', {
+            user: state => state.user
+        }),
         version() {
             return 'v' + require('../../../package.json').version
         }
     },
     methods: {
         onSelected(val) {
             if (val === 'exit') {
-                this.$store.commit('SET_LOGOUT')
-                this.$router.push('/login')
+                this.$store.dispatch('login/logout').then(() => {
+                    this.$router.push('/login')
+                })
             }
         }
     }

diff --git a/src/components/index.js b/src/components/index.js
@@ -1,8 +1,8 @@
 import Vue from 'vue'
-import view from '@/layout/view'
+import PageView from '@/layout/PageView'
 
 const components = {
-    'app-view': view
+    'app-pageView': PageView
 }
 
 // 注册全局组件

diff --git a/src/filters/index.js b/src/filters/index.js
@@ -1,9 +1,6 @@
 import Vue from 'vue'
 
 const filters = {
-    devide_10k: function (num) {
-        return num >= 10000 ? (num / 10000).toFixed(1) + '万' : num
-    },
     // 时间格式化
     formatTime: function (time, formatType) {
         if (arguments.length === 0) {

diff --git a/src/layout/NavBar/index.vue b/src/layout/NavBar/index.vue
@@ -0,0 +1,63 @@
+<template>
+    <div id="navBar">
+        <div class="navBar-left">
+            <!-- 侧边栏伸缩按钮 -->
+            <Cola class="left-item ishover" />
+            <!-- 面包屑 -->
+            <breadcrumb class="left-item" />
+        </div>
+        <div class="navBar-right">
+            <!-- 错误日志 -->
+            <error-log class="right-item ishover" />
+            <!-- 用户选项 -->
+            <user-select class="right-item ishover" />
+        </div>
+    </div>
+</template>
+<script>
+import Cola from '@/components/Cola'
+import Breadcrumb from '@/components/Breadcrumb'
+import UserSelect from '@/components/UserSelect'
+import ErrorLog from '@/components/ErrorLog'
+export default {
+    components: {
+        Cola,
+        Breadcrumb,
+        UserSelect,
+        ErrorLog
+    }
+}
+</script>
+<style lang='stylus' scoped>
+#navBar {
+    position: relative;
+    width: 100%;
+    height: 50px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    box-shadow: 0 1px 2px rgba(0, 21, 41, 0.08);
+    .navBar-left {
+        display: flex;
+        align-items: center;
+        height: 100%;
+    }
+    .navBar-right {
+        display: flex;
+        align-items: center;
+        height: 100%;
+        margin-right: 30px;
+    }
+    .left-item, .right-item {
+        flex-center();
+        height: 100%;
+        font-size: 18px;
+        padding: 0 10px;
+        cursor: pointer;
+        >>> .item-container {
+            flex-center();
+            height: 100%;
+        }
+    }
+}
+</style>
diff --git a/src/layout/view.vue → src/layout/PageView/index.vue b/src/layout/view.vue → src/layout/PageView/index.vue
diff --git a/src/layout/Sidebar/index.vue b/src/layout/Sidebar/index.vue
@@ -11,7 +11,6 @@
 </template>
 <script>
 import sideItem from './sideItem'
-import { sideRoutes } from '@/router'
 export default {
     components: { sideItem },
     data() {
@@ -21,20 +20,24 @@ export default {
         }
     },
     computed: {
+        sideRoutes() {
+            return this.$store.state.routes.sideRoutes[0].children
+        },
         isCollapse() {
             return !this.$store.state.sidebarStatus
         },
         minWidth() {
-            return this.isCollapse ? '36px' : this.$style.menuWidth
+            return this.isCollapse ? this.$style.menuIconWidth : this.$style.menuWidth
         }
     },
     created() {
-        this.filterRoutes = this.handleRoutes(sideRoutes)
+        this.filterRoutes = this.handleRoutes(this.sideRoutes)
     },
     methods: {
         // 递归过滤路由
         handleRoutes(Arr) {
             const Routes = Arr.filter(route => {
+                // 侧边栏路由强制写name，不然会导致很多问题（缓存、跳转等问题）
                 if (route.name) {
                     if (route.meta) {
                         if (route.meta.hidden) {
@@ -50,6 +53,9 @@ export default {
                     }
                     return true
                 } else {
+                    if (!route.path.includes('redirect')) {
+                        console.warn(`路由【${route.path}】：缺少name属性，存在bug隐患`)
+                    }
                     return false
                 }
             })
@@ -62,7 +68,8 @@ export default {
 :export {
     menuBg: #304156;
     menuText: #f5f5f5;
-    menuWidth: 180px;
+    menuWidth: 210px;
+    menuIconWidth: 36px;
 }
 </style>
 <style lang="stylus">

diff --git a/src/layout/Sidebar/sideLink.vue b/src/layout/Sidebar/sideLink.vue
@@ -1,4 +1,5 @@
 <script>
+import { isExternal } from '@/utils/validate'
 export default {
     name: 'sideLink',
     functional: true,
@@ -10,8 +11,7 @@ export default {
     render(h, context) {
         const { to } = context.props
         const vnodes = []
-        const isExternal = /^(https?:|mailto:|tel:)/.test(to.path)
-        if (isExternal) {
+        if (isExternal(to.path)) {
             vnodes.push(<a href={to.path} target='_blank'>{context.children}</a>)
         } else {
             vnodes.push(<router-link to={{ 'name': to.name }}>{context.children}</router-link>)