Vue-cli3.x+Element-UI实现博客后台管理系统

项目地址：http://admain.nodebook.top

GitHub : https://github.com/cgq001/adm...

欢迎下载使用

nuxt-admin

初始化

yarn install

运行

yarn serve

打包

yarn run build

测试

yarn run test

element-UI 侧边栏导航

一、侧边栏导航的路由跳转

<el-menu
        default-active="2"
        class="el-menu-vertical-demo"
        active-text-color="#1890FF"
        @open="handleOpen"
        @close="handleClose"
        router  //开启路由模式
        :default-active="routerli"  //..对应路由
        >
        //..须要在要跳转的路由中 经过index指定跳转的地址
        <el-submenu index="2-1" class="acts">
              <template slot="title">标签管理</template>
              <el-menu-item index="/tablelist">所有表情</el-menu-item>
              <el-menu-item index="/addtable">添加标签</el-menu-item>
        </el-submenu>
</el-menu>

二、关于element-UI 侧边栏导航的高亮没法对应三级路由的问题

:default-active="routerli" //..element-ui 导航栏配置
computed:{   //计算属性
    routerli:function(){
    // 对应路由
    let pathStr=this.$route.path.split('/')
        //console.log(pathStr)
        return '/'+pathStr[1]
    }
}
//方法分析：既然导航栏是根据返回的路由信息来高亮显示左侧菜单的，那既能够经过改变路由信息的返回值，来对象左侧导航

三、关于改变 侧边导航栏的 高亮样式

//侧边导航栏，须要给 具体 导航的 父级 加 class "acts" 则能够修改 acts 下一级的is-active Class的样式来实现 高亮状态
    .tac .acts .is-active{
        background: #CFEEFD;
        border-right: 4px solid #06ADFB;
        box-sizing: border-box;
    }

关于axios 的拦截请求(配合element-UI动画)

import axios from 'axios'
import { Message,Loading } from 'element-ui';
let loading;
//开始动画
function startLoading(){
    console.log('开始请求')
    loading=Loading.service({
        lock: true,
        text: '拼命加载中...',
        background: 'rgba(0,0,0,0.7)'
    })
}
//结束动画
function endLoading(){
    console.log('结束请求')
    loading.close()
}

一、若是指定了名称的拦截请求，须要挂载在该名称上，不然无效(测试所得经验，无理论支持)

let instance = axios.create({
    baseURL: 'http://127.0.0.1:5000/book/',
    timeout: 5000
});

二、挂载拦截器

instance.interceptors.request.use(config=>{
    //加载动画
    startLoading()
    return config
},error =>{
    return Promise.reject(error)
})
instance.interceptors.response.use(response=>{
    endLoading()
    return response;

},error =>{
endLoading()
Message.error(error.response.data)
return Promise.reject(error)
})

关于element-ui

一、关于element-ui 失去焦点时即刻验证用户名是否存在

<el-form-item label="用户名" prop="name">
            <el-input v-model="formTab.name" placeholder="请输入用户名"></el-input>
</el-form-item>
//数据
    formTab:{
            name:''
        }
//验证规则
formTabs:{ 
    name:[
        { required: true, message: '请输入用户名', trigger: 'blur' },
        { min: 2, max: 15, message: '长度在 2 到 15 个字符', trigger: 'blur' },
        { validator: validateName, trigger: 'blur' }
        ] 
    }
// 自定义用户名是否存在的规则validateName(这里的axios须要从新导入，没法使用Vue原型上挂载的this.axios)
let validateName=function(rule, value, callback){
          axios({
              url:'Name',
              method:"POST",
              data:{
                  name:value
              }
              }).then(res=>{
                  if(res.data.code==0){
                        if(res.data.data==0){
                            callback();
                        }else{
                            callback(new Error('用户名已存在'));
                        }
                    }else{
                        callback(new Error('未知错误'));
                    }
              }).catch(error=>{
                   callback(new Error('未知错误'));
              })        
    };

关于正则表达式

一、验证中文、数字、字母、下划线

reg=/[\u4e00-\u9fa5_a-zA-Z0-9_]{2,15}/;

二、验证字母、数字

reg=/^[a-zA-Z][a-zA-Z0-9]{6,30}$/;

关于Token和自定义请求头

一、token存储

//this.formTab.checked为是否选择了七天免登录，根据此判断 是否永久存储token
 if(this.formTab.checked){
        window.localStorage.setItem('token',res.data.data)
    }else{
        window.sessionStorage.setItem('token',res.data.data)
    }

二、验证token

//从本地存储中获取Toekn
        let token=''
        if(window.localStorage.getItem('token')){
          token=window.localStorage.getItem('token')
        }else if(window.sessionStorage.getItem('token')){
          token=window.sessionStorage.getItem('token')
        }else{
          token=''
        }
    //发送验证请求
    if(token){
     this.$http({
          url:'Token',
          methos: 'POST',
          headers:{   //自定义 请求头(携带Token)
            'Authorization':token
          }
        }).then(res=>{
          console.log(res.data)
        }).catch(error=>{
          console.log('error')
        })
    }

关于权限配置，简易版

//Router路由中：
{   //新增分类
      path:'addclass,
      name: 'Addclass',
      component:Addclass,
      meta:{
        requiresAuth:2
      }
}
//全局导航守卫

routers.beforeEach((to,from,next)=>{
      if (to.path === '/loading') {
            next();
          } else {
            let desc= store.state.power;  //获取本用户的权限
            let meats=to.meta.requiresAuth  //获取路由写入权限
              if(desc>=to.meta.requiresAuth){  //逻辑
                next()
              }else{
                next('/')
              }
              // to.matched.some(
              //   r => {
              //     console.log(r.meta.requiresAuth)  查看是否存在权限
              //   })
          }
    })

关于MarkDown编辑器 mavon-editor

一、安装：

npm install mavon-editor --save

二、全局注册

// 全局注册
// import with ES6
import Vue from 'vue'
import mavonEditor from 'mavon-editor'
import 'mavon-editor/dist/css/index.css'
// use
Vue.use(mavonEditor)

三、使用

<mavon-editor v-model="value"/>

四、如何将获取到的MakeDown内容，下载保存之本地文件？(代码参考别人的)

function saveShareContent (content, fileName) {
        let downLink = document.createElement('a')
        downLink.download = fileName
        //字符内容转换为blod地址
        let blob = new Blob([content])
        downLink.href = URL.createObjectURL(blob)
        // 连接插入到页面
        document.body.appendChild(downLink)
        downLink.click()
        // 移除下载连接
        document.body.removeChild(downLink)
    }

五、HTML5 原生的download属性

原理：content是须要下载的内容
 fileName是保存的文件的名字
 原理就是利用Blob对象把须要下载的内容转换为二进制，而后借助<a>标签的href属性和download属性，实现下载

六、仅作展现：

<mavon-editor :boxShadow='false' :defaultOpen='previews' :subfield="false" :toolbarsFlag='false'  v-model="txt"/>