vue-iview:搭建一個簡單框架

搭建項目

全局安裝 vue-cli

npm install --global vue-cli
vue init webpack my-project

項目目錄

登陸頁面

源代碼

(1)component文件夾下添加Login.vue，index.js引入頁面。

(2)安裝iview: 控制檯:npm install iview --save，main.js添加以下代碼，引入iview

import iView from 'iview'

import 'iview/dist/styles/iview.css'

Vue.use(iView)

(3)提交=>跳轉到Home頁面

先在index.js添加Home頁面路由

登陸成功跳轉主頁面:self.$router.push({path: '/page/home'})

主頁面

源代碼

axios

axios用於在node.js中發送請求。

(1)安裝axios

npm install axios --save

(2)引入方式

在安裝其餘插件式，能夠直接在main.js中引入，並使用Vue.use()來註冊，但因爲axios不是vue的插件，因此要使用以下方法在main.js文件中進行註冊。

import axios from 'axios'

Vue.prototype.$axios = axios

注:Vue.prototype指原型屬性。若是在不少組件用到同一數據，可是不想污染全局做用域，能夠經過原型定義，使這個數據能夠在每一個Vue實例中使用。

(3)使用方法

mock.js插件

mockjs用於模擬數據實現先後端分離。在開發過程當中，前端開發須要後端接口才能進行，在後端不能及時提供接口時，有沒有可能模擬後端接口呢?因而就用到了mock.js插件，模擬後端數據來實現增刪改查操做。

(1)安裝mockjs

npm install mockjs --save

(2)引入方式

在main.js中添加require('mockjs')

(3)使用方法

項目目錄：

前端發送請求:

模擬數據:

鏈接後臺

在config目錄下的index.js文件中修改以下代碼能夠關聯後臺代碼並修改端口爲8888。proxyTable是代理表,做用是用來建一個虛擬api服務器用來代理本機的請求，只能用於開發模式。vue-cli使用這個功能是藉助http-proxy-middleware插件，通常解決跨域請求api。

注: proxyTable: {
'/list': {
target: ' http://api.xxxxxxxx.com', -> 目標url地址
changeOrigin: true, -> 指示是否跨域
pathRewrite: {
'^/list': '/list' -> 可使用 /list 等價於 api.xxxxxxxx.com/list
} } }

SessionStorage登陸狀態存儲頁面

保存數據到sessionStorage

sessionStorage.setItem('key', 'value');

http響應攔截(前端實現登陸攔截)

頁面發送請求時,例如查詢場點數據,要進行登錄判斷，若是已經登陸就顯示數據，沒登陸要跳轉到登陸頁面。響應攔截器。想要統一處理請求和響應就會用到axios攔截器。

利用vue-router提供的鉤子函數beforeEach()對路由進行判斷。

參數:

to: 即將要進入的目標 路由對象

from: 當前導航正要離開的路由

next:function 使用beforEach最後都要調用next(),若是不傳遞參數,to:/login,就會跳轉到login界面。若是傳遞參數,例如next('/home')，to:/login就會失效，只會跳轉到home界面。

組件

麪包屑

源碼

1.在主頁面中添加麪包屑組件。


2.爲了route同步，主要watch $route的值，$routed.matched獲得的是一個數組。

3.作完只顯示二級目錄

4.爲了顯示三級目錄，添加貨架管理。

(1)判斷是否有上級目錄

(2)index.js路由裏添加上級目錄描述和空路徑。

(3)路徑爲空不能連接，路徑不爲空能夠連接。