vue開發後臺管理系統小結
最近工作需要用vue開發了後臺管理系統，由於是第一次開發後臺管理系統，中間也遇到了一些坑，想在這裏做個總結，也算是對於自己工作的一個肯定。我們金融性質的網站所以就不將代碼貼出來哈
一、項目概述
首先工作需求是這樣的，開發一個公司的總後臺，包含各個不同的模塊，總體難度一般，沒有開發ui圖，用的vue-cli 、elementui框架、webpack打包。
總需求的思維導圖見鏈接 http://naotu.baidu.com/file/e8c31b43dfb2f18a3c523e0fa1393c02?token=945b226dc67040a4
總結了下後臺管理系統主要的內容包括：1、各種列表的增刪改查（其中表的增刪改查是重點，其中結合分頁和詳情顯示）2、權限的控制（權限的控制主要是後臺的控制、前端的顯示） 3、篩選功能（篩選數據在後臺中幾乎和表格一樣多） 4、系統設置（菜單列表和個人界面、信息的設置）
二、項目的構建用的是vue-cli自動生成的，其中引入了vue-router、axios、element-ui等模塊，生成header組件和分頁組件來公用。
這是目錄結構build用來放置webpack的配置，dist是發布在服務器上的文件，src下面是代碼文件，文件入口時mian.js.
三、總結vue常用小的知識點
1、傳值（子父組件之間、頁面跳轉之間）
（1）父組件通過props給子組件傳遞參數
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="https://unpkg.com/vue"></script>
</head>
<body>
<div id="app">
<my-component :my-message="value"></my-component>
</div>
<script>
//註冊組件
Vue.component(‘my-component‘,{
//組件模板
template:‘<div>我是全局組件/{{myMessage}}</div>‘,
//父組件通過props傳遞參數給子組件
props:[‘myMessage‘]
})
//實例化vue
new Vue({
el:‘#app‘,
data () {
return {
value:‘我是父組件傳過來的‘
}
}
})
</script>
</body>
</html>
（2）子組件通過props給父組件傳遞參數
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="https://unpkg.com/vue"></script>
</head>
<body>
<div id="app">
<child v-on:send-val="getVal"></child>
</div>
<script>
Vue.component(‘child‘,{
template:‘<button v-on:click="handleClick">我是子組件</button>‘,
data () {
return {
value:1
}
},
methods:{
handleClick:function() {
this.value += 1;
//子組件通過$emit傳遞事件
this.$emit(‘send-val‘,this.value)
}
}
})
new Vue({
el:‘#app‘,
methods:{
getVal(val){
console.info(‘val‘,val)
}
}
})
</script>
</body>
</html>
（3）頁面跳轉之間
1、路由傳值
方法一（直接用路由路徑）：
this.$router.push({
path:‘/index‘ ,query:{"id":‘傳遞的id值‘}
})
在index頁面接收參數
this.$route.query.id
方法二（定義好路由名稱）：
this.$router.push({
name:‘index‘,
query/params:{
id:‘傳遞的id值‘
}
)
params刷新頁面參數丟失，所以建議query傳參
2、利用vue實例來傳值
第一：先定義一個全局
var bus = new Vue();
第二：在需要傳參的組件中定義$emit
bus.$emit(‘sendVal‘,id)
第三：在需要接收的組件中用$on來監聽參數的改變
bus.$on(‘sendVal‘,function(val){console.info(val)});
第四:在鉤子函數beforeDestroy()中關閉
bus.$off(‘sendVal‘)
3、<router-link :to="{ path: ‘register‘, query: { id:‘id‘ }}">Register</router-link>
2、路由鉤子函數
router.beforeEach((to, from, next) => {
if (to.path == ‘/login‘) {
sessionStorage.removeItem(‘userInfo‘);
}
let userInfo = sessionStorage.getItem(‘userInfo‘);
if (!userInfo && to.path != ‘/login‘) {
next({ path: ‘/login‘ })
} else {
next()
}
if(to.path == ‘/‘){
next({path:‘login‘})
}else{
next();
}
})
參數to from next可以理解成到哪個頁面去 ，從哪個頁面來，允許跳轉，在判斷是否跳轉到登陸頁面使用。
3、vue2.0過濾器
vue2.0去掉了1.0自帶的過濾器，可以自己定義
//銀行過濾器
Vue.filter(‘bankTran‘,function(value){
let bank_name = ‘‘;
switch(value){
case ‘COMM‘:bank_name = ‘中國交通銀行‘;break;
case ‘SPDB‘:bank_name = ‘上海浦東發展銀行‘;break;
case ‘CMB‘ :bank_name = ‘招商銀行‘;break;
case ‘HXB‘ :bank_name = ‘華夏銀行‘;break;
case ‘CIB‘:bank_name = ‘興業銀行‘;break;
case ‘CITIC‘:bank_name = ‘中信銀行‘;break;
case ‘GDB‘:bank_name = ‘廣東發展銀行‘;break;
case ‘CEB‘:bank_name = ‘光大銀行‘;break;
case ‘CMBC‘:bank_name = ‘民生銀行‘;break;
case ‘SZPAB‘:bank_name = ‘平安銀行‘;break;
case ‘PSBC‘:bank_name = ‘中國郵政儲蓄銀行‘;break;
case ‘CCB‘:bank_name = ‘中國建設銀行‘;break;
case ‘BOC‘:bank_name = ‘中國銀行‘;break;
case ‘ABC‘:bank_name = ‘中國農業銀行‘;break;
case ‘ICBC‘:bank_name = ‘中國工商銀行‘;break;
}
return bank_name;
})
4、favcion webpack處理問題
在管理後臺的開發中，當添加favcion時<link href="/favicon.ico" rel="icon" type="image/x-icon" />，卻不能顯示出來，最後將.ico文件放在了static下在本地終於成功的顯示了出來，但在webpack打包的時候卻遇到了問題，查了很多資料，最後在webpack的配置文件中增加了一行代碼，favicon.ico文件放在根目錄下面 終於成功。
5、查漏補缺：js數組梳理問題
判斷數組a中是否有重復的值（1）
var a = [1,2,3,4];
var s = a.join(‘,‘)+‘,‘;
for(var i=0;i<a.length;i++){
if(s.replace(arr[i]+‘,‘,‘‘).indexOf(a[i]>-1)){
console.info(‘找到‘)
}else{
console.info(‘沒有找到‘)
}
判斷數組arr中是否有重復的值（2）
var arr = [1,2,3,4];
var arr1 = arr.sort();
for(var i=0;i<arr.length;i++){
if(arr[i]==arr1[i]){
console.info(‘有相等的值‘，arr[i])
}
}
判斷一個變量是否為一個數組
function isArray(obj){
return obj && typeof obj==‘object‘ && obj.constructor == Array
}
四、其他
1、emement-ui框架地址 http://element.eleme.io/#/zh-CN/component/installation
2、期間用到的時間處理：moment
vue開發後臺管理系統小結