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"/>