vue開發後臺管理系統小結

時間 2019-11-11

標籤 vue 開發後臺管理系統小結简体版

原文原文鏈接

最近工做須要用vue開發了後臺管理系統，因爲是第一次開發後臺管理系統，中間也遇到了一些坑，想在這裏作個總結，也算是對於本身工做的一個確定。咱們金融性質的網站因此就不將代碼貼出來哈javascript

1、項目概述html

首先工做需求是這樣的，開發一個公司的總後臺，包含各個不一樣的模塊，整體難度通常，沒有開發ui圖，用的vue-cli 、elementui框架、webpack打包。前端

總需求的思惟導圖見連接 http://naotu.baidu.com/file/e8c31b43dfb2f18a3c523e0fa1393c02?token=945b226dc67040a4vue

總結了下後臺管理系統主要的內容包括：一、各類列表的增刪改查（其中表的增刪改查是重點，其中結合分頁和詳情顯示）二、權限的控制（權限的控制主要是後臺的控制、前端的顯示）三、篩選功能（篩選數據在後臺中幾乎和表格同樣多）四、系統設置（菜單列表和我的界面、信息的設置）java

2、項目的構建用的是vue-cli自動生成的，其中引入了vue-router、axios、element-ui等模塊，生成header組件和分頁組件來公用。webpack

這是目錄結構build用來放置webpack的配置，dist是發佈在服務器上的文件，src下面是代碼文件，文件入口時mian.js.ios

3、總結vue經常使用小的知識點web

一、傳值（子父組件之間、頁面跳轉之間）vue-router

（1）父組件經過props給子組件傳遞參數vue-cli

<!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）頁面跳轉之間

　　一、路由傳值

方法一（直接用路由路徑）：
this.$router.push({
    path:'/index' ,query:{"id":'傳遞的id值'}
})

在index頁面接收參數
this.$route.query.id

方法二（定義好路由名稱）：
this.$router.push({
   name:'index',
   query/params:{
       id:'傳遞的id值‘
    }        
)

params刷新頁面參數丟失，因此建議query傳參

　　二、利用vue實例來傳值

　　　　第一：先定義一個全局

　　　　var bus = new Vue();

　　　　第二：在須要傳參的組件中定義$emit

　　　　bus.$emit('sendVal',id)

　　　　第三：在須要接收的組件中用$on來監聽參數的改變

　　　　bus.$on('sendVal',function(val){console.info(val)});

　　　　第四:在鉤子函數beforeDestroy()中關閉

　　　　bus.$off('sendVal')

　　三、<router-link :to="{ path: 'register', query: { id:'id' }}">Register</router-link>

二、路由鉤子函數

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能夠理解成到哪一個頁面去，從哪一個頁面來，容許跳轉，在判斷是否跳轉到登錄頁面使用。

三、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;
})

四、favcion webpack處理問題

　　在管理後臺的開發中，當添加favcion時<link href="/favicon.ico" rel="icon" type="image/x-icon" />，卻不能顯示出來，最後將.ico文件放在了static下在本地終於成功的顯示了出來，但在webpack打包的時候卻遇到了問題，查了不少資料，最後在webpack的配置文件中增長了一行代碼，favicon.ico文件放在根目錄下面終於成功。

五、查漏補缺：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];