目錄結構

├──public│? └── logo.png? ? ? ? ? ? # LOGO|└── index.html? ? ? ? ? # Vue 入口模板├── src│? ├── api? ? ? ? ? ? ? ? ? #Apiajax 等│? ├── assets? ? ? ? ? ? ? # 本地靜態(tài)資源│? ├── config? ? ? ? ? ? ? # 項目基礎配置蒸眠，包含路由扁位，全局設置│? ├── components? ? ? ? ? # 業(yè)務通用組件│? ├── core? ? ? ? ? ? ? ? # 項目引導,全局配置初始化刻两，依賴包引入等│? ├── router? ? ? ? ? ? ? # Vue-Router│? ├── store? ? ? ? ? ? ? ? # Vuex│? ├── utils? ? ? ? ? ? ? ? # 工具庫│? ├── locales? ? ? ? ? ? ? # 國際化資源│? ├── views? ? ? ? ? ? ? ? # 業(yè)務頁面入口和常用模板│? ├── App.vue? ? ? ? ? ? ? # Vue 模板入口│? └── main.js? ? ? ? ? ? ? # Vue 入口 JS│? └── permission.js? ? ? ? # 路由守衛(wèi)(路由權限控制)├── tests? ? ? ? ? ? ? ? ? ? # 測試工具├── README.md└── package.json

路由和菜單

基本結構

路由和菜單是組織起一個應用的關鍵骨架隘世，pro 中的路由為了方便管理菇民，使用了中心化的方式，在 ==router.config.js== 統(tǒng)一配置和管理。

路由管理 通過約定的語法根據(jù)在==router.config.js==中配置路由。

菜單生成 根據(jù)路由配置來生成菜單绍豁。菜單項名稱，嵌套路徑與路由高度耦合牙捉。

面包屑 組件 ==PageHeader== 中內(nèi)置的面包屑也可由腳手架提供的配置信息自動生成竹揍。

路由

目前腳手架中所有的路由都通過 ==router.config.js== 來統(tǒng)一管理，在 ==vue-router== 的配置中我們增加了一些參數(shù)邪铲，如 ==hideChildrenInMenu==,==meta.title==,==meta.icon==,==meta.permission==芬位，來輔助生成菜單。其中：

hideChildrenInMenu 用于隱藏不需要在菜單中展示的子路由带到。用法可以查看 分步表單 的配置昧碉。

hidden 可以在菜單中不展示這個路由，包括子路由阴孟。效果可以查看 other 下的路由配置晌纫。

meta.title 和 meta.icon分別代表生成菜單項的文本和圖標。

meta.permission 用來配置這個路由的權限永丝，如果配置了將會驗證當前用戶的權限，并決定是否展示 *（默認情況下）箭养。

meta.hidden 可以強制子菜單不顯示在菜單上(和父級 hideChildrenInMenu 配合)

meta.hiddenHeaderContent 可以強制當前頁面不顯示 PageHeader 組件中的頁面帶的 面包屑和頁面標題欄

路由配置項

/**

* 路由配置說明：

* 建議：sider menu 請不要超過三級菜單慕嚷，若超過三級菜單，則應該設計為頂部主菜單 配合左側(cè)次級菜單

*

**/{redirect:noredirect,//重定向name:'router-name',//路由名稱hidden:true,//可以在菜單中不展示這個路由毕泌，包括子路由喝检。效果可以查看 other 下的路由配置。meta:{title:'title',//菜單項名稱icon:'a-icon',//菜單項圖標keepAlive:true,//緩存頁面permission：[string]//用來配置這個路由的權限撼泛，如果配置了將會驗證當前用戶的權限挠说，并決定是否展示 *（默認情況下）hiddenHeaderContent:true,//可以強制當前頁面不顯示 PageHeader 組件中的頁面帶的 面包屑和頁面標題欄}}

具體請參考https://pro.loacg.com/docs/router-and-nav

菜單

菜單根據(jù) ==router.config.js== 生成，具體邏輯在 ==src/store/modules/permission.js== 中的 ==actions.GenerateRoutes== 方法實現(xiàn)愿题。

Ant Design Pro 的布局

在 Ant Design Pro 中损俭，我們抽離了使用過程中的通用布局蛙奖，都放在 ==/components/layouts== 目錄中，分別為：

BasicLayout：基礎頁面布局杆兵，包含了頭部導航雁仲，側(cè)邊欄和通知欄：

UserLayout：抽離出用于登陸注冊頁面的通用布局

PageView：基礎布局，包含了面包屑琐脏，和中間內(nèi)容區(qū) (slot)

RouterView：空布局攒砖，專門為了二級菜單內(nèi)容區(qū)自定義

BlankLayout：空白的布局

定義全局樣式

/* 定義全局樣式 */:global(.text){font-size:16px;}/* 定義多個全局樣式 */:global{.footer{color:#ccc;}.sider{background:#ebebeb;}}//覆蓋組件樣式// 使用 css 時可以用 >>> 進行樣式穿透.test-wrapper>>>.ant-select{font-size:16px;}// 使用 scss, less 時，可以用 /deep/ 進行樣式穿透.test-wrapper/deep/.ant-select{font-size:16px;}// less CSS modules 時亦可用 :global 進行覆蓋.test-wrapper{:global{.ant-select{font-size:16px;}}}

與服務器交互

在 Ant Design Pro 中日裙，一個完整的前端 UI 交互到服務端處理流程是這樣的：

UI 組件交互操作吹艇；

調(diào)用統(tǒng)一管理的 api service 請求函數(shù)；

使用封裝的 request.js 發(fā)送請求昂拂；

獲取服務端返回掐暮；

更新 data。

從上面的流程可以看出政钟，為了方便管理維護路克，統(tǒng)一的請求處理都放在 @/src/api 文件夾中，并且一般按照 model 緯度進行拆分文件养交，如：

api/? user.js? permission.js? goods.js? ...

其中精算，==@/src/utils/request.js== 是基于 ==axios== 的封裝，便于統(tǒng)一處理 ==POST==碎连，==GET== 等請求參數(shù)灰羽，請求頭，以及錯誤提示信息等鱼辙。具體可以參看 ==request.js==廉嚼。 它封裝了全局 request 攔截器、response 攔截器倒戏、統(tǒng)一的錯誤處理怠噪、baseURL 設置等。

例如在 api 中的一個請求用戶信息的例子：

// api/user.jsimport{axios}fromm'@/utils/request'constapi={info:'/user',list:'/users'}// 根據(jù)用戶 id 獲取用戶信息exportfunctiongetUser(id){returnaxios({url:`${api.user}/${id}`,method:'get'})}// 增加用戶exportfunctionaddUser(parameter){returnaxios({url:api.user,method:'post',data:parameter})}// 更新用戶 // or (id, parameter)exportfunctionupdateUser(parameter){returnaxios({url:`${api.user}/${parameter.id}`,// or `${api.user}/${id}`method:'put',data:parameter})}// 刪除用戶exportfunctiondeleteUser(id){returnaxios({url:`${api.user}/${id}`,method:'delete',data:parameter})}// 獲取用戶列表 parameter: { pageSize: 10, pageNo: 1 }exportfunctiongetUsers(parameter){returnaxios({url:api.list,method:'get',params:parameter})}

<template><div><a-button@click="queryUser"></a-button><a-table:dataSource="list"></a-table></div></template><script>import { getUser, getUsers } from '@/api/user'export default {? ? data () {? ? ? ? return {? ? ? ? ? ? id: 0,? ? ? ? ? ? queryParam: {? ? ? ? ? ? ? ? pageSize: 10,? ? ? ? ? ? ? ? pageNo: 1,? ? ? ? ? ? ? ? username: ''? ? ? ? ? ? },? ? ? ? ? ? info: {},? ? ? ? ? ? list: []? ? ? ? }? ? },? ? methods: {? ? ? ? queryUser () {? ? ? ? ? ? const { $message } = this? ? ? ? ? ? getUser(this.id).then(res => {? ? ? ? ? ? ? ? this.info = res.data? ? ? ? ? ? }).catch(err => {? ? ? ? ? ? ? ? $message.error(`load user err: ${err.message}`)? ? ? ? ? ? })? ? ? ? },? ? ? ? queryUsers () {? ? ? ? ? ? getUsers(this.queryParam).then(res => {? ? ? ? ? ? ? ? this.list = res? ? ? ? ? ? })? ? ? ? }? ? }}</script>

***獲取裁剪后的圖片*/cropImage(){this.form.cropimg=this.$refs.cropper.getCroppedCanvas().toDataURL();},/**

? ? * 確認裁剪

? ? */sureCrop(){this.dialogVisible=false},/**

? ? * 上傳裁剪后的圖片到服務器

? ? */upCropImg(){//判斷是否是新增還是編輯if(this.$route.query.id&&this.$route.query.id!=''){//如果是編輯的就直接提交this.onSubmit()}else{//否則先上傳裁剪圖片杜跷，將64位圖片轉(zhuǎn)換為二進制數(shù)據(jù)流varformdata1=newFormData();// 創(chuàng)建form對象formdata1.append('file',convertBase64UrlToBlob(this.form.cropimg),'aaa.png');//this.$ajax.post(this.$api+"/upload/singleUploadImg",formdata1,{headers:{'Content-Type':'multipart/form-data'}}).then(response=>{if(response.data.msg=="success"&&response.data.code==1){this.form.imgUrl=response.data.data.imgUrlthis.onSubmit()}else{console.log(response)this.$message.error(response.data.msg);}}).catch(function(error){console.log(error);});}},

引入外部模塊

$ npm install'組件名字'--save

使用

//全局引入importVuefrom'vue'importVueQuillEditorfrom'vue-quill-editor'// require stylesimport'quill/dist/quill.core.css'import'quill/dist/quill.snow.css'import'quill/dist/quill.bubble.css'Vue.use(VueQuillEditor,/* { default global options } */)

<template><div><quill-editorref="myTextEditor"v-model="content":config="editorOption"@blur="onEditorBlur($event)"@focus="onEditorFocus($event)"@ready="onEditorReady($event)"></quill-editor></div></template><script>//按需加載import 'quill/dist/quill.core.css'import 'quill/dist/quill.snow.css'import 'quill/dist/quill.bubble.css'import { quillEditor } from 'vue-quill-editor'export default {? components: {? ? quillEditor? },? data () {? ? ? return {? ? ? ? ? content: '<h2>I am Example</h2>',? ? ? ? ? editorOption: {? ? ? ? ? // something config? ? ? ? ? }? ? ? }? },? // 如果需要手動控制數(shù)據(jù)同步傍念，父組件需要顯式地處理changed事件? methods: {? ? onEditorBlur(editor) {? ? ? console.log('editor blur!', editor)? ? },? ? onEditorFocus(editor) {? ? ? console.log('editor focus!', editor)? ? },? ? onEditorReady(editor) {? ? ? console.log('editor ready!', editor)? ? },? ? onEditorChange({ editor, html, text }) {? ? ? // console.log('editor change!', editor, html, text)? ? ? this.content = html? ? }? },? // 如果你需要得到當前的editor對象來做一些事情，你可以像下面這樣定義一個方法屬性來獲取當前的editor對象葛闷，實際上這里的$refs對應的是當前組件內(nèi)所有關聯(lián)了ref屬性的組件元素對象? computed: {? ? editor() {? ? ? return this.$refs.myTextEditor.quillEditor? ? }? },? mounted() {? ? // you can use current editor object to do something(editor methods)? ? console.log('this is my editor', this.editor)? ? // this.editor to do something...? }}</script>

引入業(yè)務圖標

參考：https://pro.loacg.com/docs/biz-icon憋槐、

國際化

參考：https://pro.loacg.com/docs/i18n

權限管理

參考：https://pro.loacg.com/docs/authority-management

自定義使用規(guī)則

修改網(wǎng)站icon的文件地址在 ==public文件夾==中把logo.png換成自定義的，也可在==public/index.html==自定義

<!DOCTYPE html><htmllang="zh-cmn-Hans"><head><metacharset="utf-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewport"content="width=device-width,initial-scale=1.0"><linkrel="icon"href="<%= BASE_URL %>logo.png"><title>共享云店</title><style>#loading-mask{position:fixed;left:0;top:0;height:100%;width:100%;background:#fff;user-select:none;z-index:9999;overflow:hidden}.loading-wrapper{position:absolute;top:50%;left:50%;transform:translate(-50%,-100%)}.loading-dot{animation:antRotate 1.2s infinite linear;transform:rotate(45deg);position:relative;display:inline-block;font-size:64px;width:64px;height:64px;box-sizing:border-box}.loading-dot i{width:22px;height:22px;position:absolute;display:block;background-color:#1890ff;border-radius:100%;transform:scale(.75);transform-origin:50% 50%;opacity:.3;animation:antSpinMove 1s infinite linear alternate}.loading-dot i:nth-child(1){top:0;left:0}.loading-dot i:nth-child(2){top:0;right:0;-webkit-animation-delay:.4s;animation-delay:.4s}.loading-dot i:nth-child(3){right:0;bottom:0;-webkit-animation-delay:.8s;animation-delay:.8s}.loading-dot i:nth-child(4){bottom:0;left:0;-webkit-animation-delay:1.2s;animation-delay:1.2s}@keyframes antRotate{to{-webkit-transform:rotate(405deg);transform:rotate(405deg)}}@-webkit-keyframes antRotate{to{-webkit-transform:rotate(405deg);transform:rotate(405deg)}}@keyframes antSpinMove{to{opacity:1}}@-webkit-keyframes antSpinMove{to{opacity:1}}</style></head><body><noscript><strong>We're sorry but vue-antd-pro doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><divid="app"><divid="loading-mask"><divclass="loading-wrapper"><spanclass="loading-dot loading-dot-spin"><i></i><i></i><i></i><i></i></span></div></div></div><!-- built files will be auto injected --></body></html>

-更換logo在==src\components\tools\Logo.vue==中更換

<template><divclass="logo"><router-link:to="{name:'dashboard'}"><LogoSvgalt="logo"/>//這是logo<h1v-if="showTitle">{{ title }}</h1>//這是網(wǎng)站標題</router-link></div></template><script>import LogoSvg from '@/assets/logo.svg?inline';export default {? name: 'Logo',? components: {? ? LogoSvg? },? props: {? ? title: {? ? ? type: String,? ? ? default: 'Admin For Ok',? ? //網(wǎng)站默認標題? ? ? required: false? ? },? ? showTitle: {? ? ? ? ? ? ? ? ? //是否顯示網(wǎng)站標題淑趾，默認不顯示? ? ? type: Boolean,? ? ? default: true,? ? ? required: false? ? }? }}</script>

pro權限管理和路由控制思路分析(粗略分析)

主要是通過三個文件實現(xiàn),==src\mock\services\user.js==文件通過登陸的角色獲取對應的鑒權規(guī)則阳仔，具體可查看該文件下的源碼

==src\config\router.config.js==文件為路由配置文件，可增加路由取消路由等扣泊，變量asyncRouterMap為主要路由數(shù)組集合近范，可配置鑒權權限嘶摊，變量constantRouterMap為基礎路由，不參與鑒權

==src\permission.js==文件為動態(tài)配置路由的主要邏輯顺又，代碼如下

importVuefrom'vue'importrouterfrom'./router'importstorefrom'./store'importNProgressfrom'nprogress'// progress barimport'nprogress/nprogress.css'// progress bar styleimportnotificationfrom'ant-design-vue/es/notification'import{setDocumentTitle,domTitle}from'@/utils/domUtil'import{ACCESS_TOKEN}from'@/store/mutation-types'NProgress.configure({showSpinner:false})// NProgress ConfigurationconstwhiteList=['login','register','registerResult']// no redirect whitelist配置白名單router.beforeEach((to,from,next)=>{NProgress.start()// start progress bar//生成動態(tài)網(wǎng)站標題to.meta&&(typeofto.meta.title!=='undefined'&&setDocumentTitle(`${to.meta.title} - ${domTitle}`))if(Vue.ls.get(ACCESS_TOKEN)){/* has token 如果有token并且是從登錄頁來的就直接跳到工作空間*/if(to.path==='/user/login'){next({path:'/dashboard/workplace'})NProgress.done()}else{//否則檢測是不是沒有檢測到規(guī)則更卒，請求獲取用戶信息，獲取用戶權限if(store.getters.roles.length===0){//請求mock模擬數(shù)據(jù)獲取用戶權限store.dispatch('GetInfo').then(res=>{constroles=res.result&&res.result.role//調(diào)用src\store\modules\permission.js里面的GenerateRoutes方法稚照，處理數(shù)據(jù)store.dispatch('GenerateRoutes',{roles}).then(()=>{// 根據(jù)roles權限生成可訪問的路由表// 動態(tài)添加可訪問路由表router.addRoutes(store.getters.addRouters)constredirect=decodeURIComponent(from.query.redirect||to.path)if(to.path===redirect){// hack方法 確保addRoutes已完成 ,set the replace: true so the navigation will not leave a history recordnext({...to,replace:true})}else{// 跳轉(zhuǎn)到目的路由next({path:redirect})}})}).catch(()=>{notification.error({message:'錯誤',description:'請求用戶信息失敗蹂空，請重試'})store.dispatch('Logout').then(()=>{next({path:'/user/login',query:{redirect:to.fullPath}})})})}else{next()}}}else{if(whiteList.includes(to.name)){// 在免登錄白名單，直接進入next()}else{next({path:'/user/login',query:{redirect:to.fullPath}})NProgress.done()// if current page is login will not trigger afterEach hook, so manually handle it}}})router.afterEach(()=>{NProgress.done()// finish progress bar})

==src\store\modules\permission.js==文件為路由數(shù)據(jù)的詳細處理邏輯果录，配合src\permission.js文件使用上枕，代碼如下：

import{asyncRouterMap,constantRouterMap}from'@/config/router.config'/**

* 過濾賬戶是否擁有某一個權限，并將菜單從加載列表移除

*

* @param permission

* @param route

* @returns {boolean}

*/functionhasPermission(permission,route){if(route.meta&&route.meta.permission){letflag=falsefor(leti=0,len=permission.length;i<len;i++){flag=route.meta.permission.includes(permission[i])if(flag){returntrue}}returnfalse}returntrue}/**

* 單賬戶多角色時弱恒，使用該方法可過濾角色不存在的菜單

*

* @param roles

* @param route

* @returns {*}

*/// eslint-disable-next-linefunctionhasRole(roles,route){if(route.meta&&route.meta.roles){returnroute.meta.roles.includes(roles.id)}else{returntrue}}functionfilterAsyncRouter(routerMap,roles){constaccessedRouters=routerMap.filter(route=>{if(hasPermission(roles.permissionList,route)){if(route.children&&route.children.length){route.children=filterAsyncRouter(route.children,roles)}returntrue}returnfalse})returnaccessedRouters}constpermission={state:{routers:constantRouterMap,addRouters:[]},mutations:{SET_ROUTERS:(state,routers)=>{state.addRouters=routers? ? ? state.routers=constantRouterMap.concat(routers)}},actions:{GenerateRoutes({commit},data){returnnewPromise(resolve=>{const{roles}=dataconstaccessedRouters=filterAsyncRouter(asyncRouterMap,roles)commit('SET_ROUTERS',accessedRouters)resolve()})}}}exportdefaultpermission

跨域請求設置

在==vue.config.js==文件中修改

// 配置跨域devServer:{// development server port 8000// port: 8000,proxy:{'/apis':{// target: 'https://mock.ihx.me/mock/5baf3052f7da7e07e04a5116/antd-pro',target:'http://192.168.1.73:8092/okcloud/',// target: 'http://39.107.78.120:8083/okcloud/',ws:false,changeOrigin:true,//是否允許跨域pathRewrite:{'^/apis':''}}}

axios攔截器

在文件==src\utils\request.js==中設置

// request interceptorservice.interceptors.request.use(config=>{consttoken=Vue.ls.get(ACCESS_TOKEN)if(token){config.headers['okcloud_token']=token// 讓每個請求攜帶自定義 token 請根據(jù)實際情況自行修改}returnconfig},err)// response interceptorservice.interceptors.response.use((response)=>{if(response.data.code===10000){notification.warning({message:'提示',description:response.data.message})}else{returnresponse.data}},err)

自定義角色的菜單權限

在==src\main.js==文件中注釋掉"http:// import './permission' // permission control? 權限控制"

自定義路由權限文件==src\routeGuard.js==辨萍，代碼如下

importVuefrom'vue'importrouterfrom'./router'// import store from './store'importNProgressfrom'nprogress'// progress barimport'nprogress/nprogress.css'// progress bar styleimport{setDocumentTitle,domTitle}from'@/utils/domUtil'import{ACCESS_TOKEN}from'@/store/mutation-types'NProgress.configure({showSpinner:false})// NProgress Configurationrouter.beforeEach((to,from,next)=>{NProgress.start()// start progress barto.meta&&(typeofto.meta.title!=='undefined'&&setDocumentTitle(`${to.meta.title} - ${domTitle}`))if(to.path==='/user/login'&&Vue.ls.get(ACCESS_TOKEN)){next({path:'/dashboard/workplace'})NProgress.done()}elseif(to.path!=='/user/login'&&!Vue.ls.get(ACCESS_TOKEN)){next({path:'/user/login'})NProgress.done()}else{next()NProgress.done()}})router.afterEach(()=>{NProgress.done()// finish progress bar})

在==main.js==中引入import './routeGuard'

對==src\components\Menu\menu.js==文件進行自定義菜單改造

在==src\store\modules\app.js==文件中store加入menu,在actions中進行獲取菜單的異步操作，獲取菜單信息返弹，然后進行全局變量動態(tài)獲取

在==src\layouts\BasicLayout.vue==中進行全局變量的引用

...mapState({// 動態(tài)主路由menus:state=>state.app.menu}),

動態(tài)方法的引用

...mapActions(['setSidebar', 'setMenu']),

調(diào)用獲取動態(tài)方法

this.setMenu()

作者：27億光年中的小小塵埃

鏈接：http://www.reibang.com/p/2c004a98ebf1

來源：簡書

著作權歸作者所有锈玉。商業(yè)轉(zhuǎn)載請聯(lián)系作者獲得授權，非商業(yè)轉(zhuǎn)載請注明出處义起。