模板地址
https://gitee.com/yurunfei/jiuwei-manager
模板截圖
技術(shù)框架：
vue-router+axios +vuex +sass+md5 + element ui
開(kāi)發(fā)前準(zhǔn)備
使用yarn來(lái)管理和導(dǎo)入組件
1.導(dǎo)入sass的方式：
高版本可能會(huì)導(dǎo)致未知問(wèn)題，以下面的版本為主，可以正常導(dǎo)入和運(yùn)行：
1. yarn add sass-loader@7.1.0 --dev
2. yarn add node-sass@4.12.0 --dev
引入其他scss文件的時(shí)候需要導(dǎo)入：
3. yarn add sass-resources-loader@2.0.1 --dev
全部導(dǎo)入完成后，打開(kāi)webpack.base.conf.js： 在rules下面添加：
{
test: / \.scss$ / ,
loaders: [ 'style' , 'css' , 'sass' ]
}
scss使用測(cè)試：如下測(cè)試修改字體顏色
< style lang = "scss" >
$color : red ;
div { color : $color ;}
</ style >
2.導(dǎo)入Element UI的方式：
yarn add element-ui
main.js
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI, { size: 'small', zIndex: 3000 });
3.normalize可以適配各種瀏覽器，使其樣式保持一致：
yarn add normalize.css
在main.js里面引入：
import 'normalize.css/normalize.css'
開(kāi)發(fā)過(guò)程
1.項(xiàng)目整體布局文件：
可以copy現(xiàn)有的style文件，去除原有樣式布局。
在static文件夾下建立icon文件夾存放圖標(biāo)文件，img文件夾存放png圖片。如果使用阿里巴巴圖標(biāo)庫(kù)的圖標(biāo)，可以從圖標(biāo)庫(kù)獲取鏈接地址，比如：
拷貝至index.html里面：
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>櫻花后臺(tái)管理系統(tǒng)</title>
<link rel="stylesheet" >
</head>
用的時(shí)候：
<i class="iconfont icon-weibo"></i>
在App.vue里面導(dǎo)入自定義樣式文件：
<style lang="scss">
@import "./style/style";
@import "../static/icon/iconfont.css";
</style>
2.工具類存放文件：
建立utils文件夾，存放內(nèi)容為：
公共類方法
json文件
路由文件router.js（為了統(tǒng)一管理，摒棄router文件）
全局狀態(tài)管理文件store.js（為了方便管理放在此處）
3.建立頁(yè)面路由，router.js：
將登陸頁(yè)設(shè)置為根路由:
import Vue from 'vue'
import Router from 'vue-router'
import Index from '@/page/index' // 登錄頁(yè)
Vue.use(Router)
export default Router({
routes: [
{
path:'/',
component: Index
}
]
})
4.搭建完登錄頁(yè)面之后進(jìn)入管理后臺(tái)首頁(yè)，需要注意：
- 首頁(yè)左側(cè)的菜單項(xiàng)、右側(cè)頂部的狀態(tài)欄是一直存在的，所以，作為主體框架，切換的每個(gè)功能頁(yè)都為主體框架的子路由。
import Vue from 'vue'
import Router from 'vue-router'
import Index from '@/page/index' // 登錄頁(yè)
import Admin from '@/page/admin' // 主體框架
Vue.use(Router)
export default Router({
routes: [
{
path:'/',
component: Index
},
{
path:'/admin',
component: Admin,
children:[ // 子路由
// 產(chǎn)品頁(yè)
{ path: '/home', component: () => import('@/page/home/home') },
]
}
]
})
這里使用了懶加載的方式，為了避免以后頁(yè)面越來(lái)越多，打包后加載緩慢的問(wèn)題，懶加載路由可以使頁(yè)面按需加載，進(jìn)行首屏優(yōu)化
5.admin.vue為主體框架頁(yè)，包含：左側(cè)菜單欄和頂部狀態(tài)欄
左側(cè)菜單欄單獨(dú)封裝成組件，放在components文件夾下，是為了方便做權(quán)限管理，使結(jié)構(gòu)看起來(lái)更清晰。
如果想讓admin下的子路由顯示出來(lái)，需要添加
<router-view class="content" :class="{ 'side-hide': collapse }"></router-view>
讓子路由有一個(gè)入口可以添加進(jìn)當(dāng)前路由。
5.首頁(yè)的統(tǒng)計(jì)圖表使用的是v-chanrt，分為：純數(shù)字統(tǒng)計(jì)、折線圖、條形圖、餅圖、環(huán)形圖幾種常用圖表
注意：1.數(shù)字顯示千分位可以使用方法：.toLocaleString()
2.適配手機(jī)，需要設(shè)置css當(dāng)屏幕寬度小于500的時(shí)候，改變內(nèi)容寬度
.tl1-item {
width: calc((100% - 60px) / 4);
}
@media screen and (max-width: 768px) {
.tl1-item {
width: 100%;
}
}
具體用法可以參考這篇博客：https://blog.csdn.net/piano9425/article/details/99283830
6.頂部tags標(biāo)簽記錄導(dǎo)航
每次打開(kāi)新的頁(yè)面，頂部自動(dòng)增加tags標(biāo)簽，點(diǎn)擊跳轉(zhuǎn)到對(duì)應(yīng)的路由。
因?yàn)椴辉谝粋€(gè)頁(yè)面，需要用到vuex狀態(tài)管理。最好對(duì)不同功用的狀態(tài)單獨(dú)建立modules模塊，然后統(tǒng)一導(dǎo)入，導(dǎo)入方式為：
inddex.js:
import Vue from 'vue'
import Vuex from 'vuex'
import getters from './getters'
Vue.use(Vuex)
// https://webpack.js.org/guides/dependency-management/#requirecontext
const modulesFiles = require.context('./modules', true, /\.js$/)
// you do not need `import app from './modules/app'`
// it will auto require all vuex module from modules file
const modules = modulesFiles.keys().reduce((modules, modulePath) => {
// set './app.js' => 'app'
const moduleName = modulePath.replace(/^\.\/(.*)\.\w+$/, '$1')
const value = modulesFiles(modulePath)
modules[moduleName] = value.default
return modules
}, {})
const store = new Vuex.Store({
modules,
getters
})
export default store
在標(biāo)簽組件的watch里面對(duì) $route進(jìn)行監(jiān)聽(tīng)，每當(dāng) $route發(fā)生改變時(shí)就調(diào)用vuex里面添加路由的方法。首次運(yùn)行頁(yè)面，路由還沒(méi)有發(fā)生改變，需要在mounted里面調(diào)用一次添加路由的方法
需要注意的是關(guān)閉圖標(biāo)在tag里面，點(diǎn)擊的時(shí)候容易遇到冒泡，需要使用@click.stop阻止冒泡，關(guān)閉標(biāo)簽的方法寫在vuex里面。
deleteTagsAction: (state, view) => {
state.visitedViews.splice(state.visitedViews.indexOf(view), 1)
},
如果是把當(dāng)前頁(yè)關(guān)掉了，就加載標(biāo)簽數(shù)組的最后一個(gè)路由
const lastView = visitedViews.slice(-1)[0]
if (lastView) {
this.$router.push(lastView.path)
} else {
this.$router.push('/')
}
刪除數(shù)組元素的時(shí)候用splice，而獲取數(shù)組某個(gè)元素的時(shí)候使用slice，-1表示從最后數(shù)起的第一個(gè)元素，因?yàn)楂@取到的是一個(gè)數(shù)組，所以需要[0]取值
7.表格高度動(dòng)態(tài)計(jì)算
this.$nextTick(() => {
let windowHeight =
document.documentElement.clientHeight || document.body.clientHeight;
let topHeight =
64 + 54 + 20 + 56 + 40 + this.$refs.searchv.clientHeight;
let tableH = windowHeight - topHeight - 75;
this.tableH = tableH ;
});
- 頂部狀態(tài)欄高度：64
- 路由標(biāo)簽高度：54
- 導(dǎo)航文字距離固定欄距離：20
- 導(dǎo)航文字高度：56
- 正文與導(dǎo)航文字的總間距：40
- 隨著菜單欄收縮可變搜索欄高度： this.$refs.searchv.clientHeight
- 預(yù)留給底部分頁(yè)器的高度：75
目前存在的bug：可以監(jiān)聽(tīng)到菜單欄的收縮，但是再重新計(jì)算高度的時(shí)候，ref獲取到的搜索欄高度沒(méi)變，實(shí)際已經(jīng)發(fā)生改變，導(dǎo)致表格下移，有一部分分頁(yè)器淹沒(méi)在頁(yè)面下面
6.產(chǎn)品列表頁(yè)
- 添加了切換表格和卡片的功能，點(diǎn)擊查看詳情可以跳轉(zhuǎn)到詳情頁(yè)，并從詳情頁(yè)返回；
- 點(diǎn)擊查詢可以打印出搜索參數(shù)，便于數(shù)據(jù)請(qǐng)求；
- 新增按鈕添加了常用的表單選項(xiàng)，因?yàn)?strong>ant-design-vue可以提供更為炫酷的動(dòng)畫效果，所以此處采取按需導(dǎo)入的方式，導(dǎo)入了ant-design-vue的Model組件，與Element ui的Form組件搭配使用
image.png
7.權(quán)限管理
大致說(shuō)一下權(quán)限管理的思路：
左側(cè)菜單欄的路由已經(jīng)在本地配置好了，但不是所有人都有權(quán)限看見(jiàn)，比如在管理后臺(tái)創(chuàng)建三種角色，分別為：管理員、商務(wù)、臨時(shí)用戶，管理員可以添加用戶，但是商務(wù)不能，就得對(duì)商務(wù)這個(gè)角色隱藏權(quán)限管理的模塊。
因此，給每個(gè)角色配置好權(quán)限后，再由后臺(tái)返回該角色能夠看到的菜單項(xiàng)，與本地做比對(duì)，如果后臺(tái)沒(méi)有返回就不顯示，返回才顯示。
一般的權(quán)限管理分為三級(jí)，比如權(quán)限管理模塊為一級(jí)，其下所包含的用戶管理為二級(jí)，用戶管理頁(yè)面的修改密碼按鈕為三級(jí)。
一級(jí)和二級(jí)都可以在el-menu里面處理，三級(jí)需要另寫方法。
全局狀態(tài)管理可以使用vuex存儲(chǔ)后臺(tái)返回的數(shù)據(jù)。
模擬權(quán)限管理：使用賬號(hào)1登錄是管理員權(quán)限，可以看到所有菜單，使用其他賬號(hào)登錄，看不到權(quán)限管理菜單
項(xiàng)目結(jié)構(gòu)：
- 登錄
- 首頁(yè)統(tǒng)計(jì)
- 商品列表
- 商品詳情
- 菜單權(quán)限
- 權(quán)限組
- 權(quán)限分配
- 401/403/404錯(cuò)誤頁(yè)面
- 個(gè)人中心
可以使用的小技巧
1.快速刪除node_modules：
在碰到node_modules包出現(xiàn)問(wèn)題報(bào)錯(cuò)，這種事情經(jīng)常發(fā)生╮(╯▽╰)╭，可能裝包的時(shí)候沒(méi)裝好就會(huì)報(bào)這種錯(cuò)，如果是把node_modules整個(gè)刪除到垃圾桶里，需要等待超級(jí)長(zhǎng)的時(shí)間，實(shí)在是太麻煩啦，所以只需要安裝一個(gè)管理工具，敲一行代碼，幾秒鐘就可以刪掉：
1、安裝npm包–rimraf
npm install rimraf -g
2、在cmd指令下，進(jìn)入所需刪除的node_modules文件夾的位置
3、輸入以下指令進(jìn)行刪除
rimraf node_modules
這樣就可以簡(jiǎn)單粗暴得秒刪。O(∩_∩)O~~
附帶yarn清除緩存命令：
yarn cache clean
