構建基於Vue.js的前後端於一體的開發環境(三)
目錄
4 基於傳統方式的使用
所謂傳統方式，就是我們基於之前比較傳統的，整個js引入的方式來使用Vue.js；這個方式的優點是學習成本低，可以快速的實現前端的功能，缺點那就是會產生大量的冗餘程式碼，不能進行專案Maven那樣的工程化的構建和元件管理；這種方式比較適合頁面（功能）不多，可以接受部分冗餘程式碼的小系統；
做前端的都知道，如果用這種方式來做大型網站、系統的話，大量的html、js檔案堆疊到一起，那簡直是人間地獄。但是這種方式有一個最大的好處就是學習成本低，可以快速建站。相對的自然是修改和維護成本會非常高。
4.1 基礎專案搭建
方式1：CDN方式
通過CND的方式使用，這種方式使用最簡單，一個html頁面即可；
我們在web-normal/main/resources/static目錄下新建一個cdn.html檔案，內容如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 執行效果如下：
出現以上頁面表示我們的前端已經可以正常運行了。
方式2：專案內建檔案方式
很多應用都是在客戶的內網執行，某些內網是不能訪問外網的（或者訪問外網很慢）。這就是需要將前端的檔案都放在我們的專案中，以使瀏覽器能夠載入到我們的檔案。我們將之前的CDN的檔案下載下來，除了上面的三個檔案外，還需要三個iview的樣式資原始檔，具體檔案如下：
下一步我們在專案的html檔案中引入這些檔案即可；
我們在web-normal/main/resources/static目錄下新建一個index.html檔案,內容如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue Demo</title>
<link rel="stylesheet" type="text/css" href="/assets/css/iview.css">
<script type="text/javascript" src="/assets/js/vue.min.js"></script>
<script type="text/javascript" src="/assets/js/iview.min.js"></script>
</head>
<body>
<div id="app">
<i-button @click="show">點我啊!</i-button>
<Modal v-model="visible" title="Welcome">Welcome to Vue.js!</Modal>
</div>
<script>
new Vue({
el: '#app',
data: {
visible: false
},
methods: {
show: function () {
this.visible = true;
}
}
})
</script>
</body>
</html>
我們從瀏覽器訪問這個檔案，出現方式1中展示的介面並且能夠正常點選按鈕彈出彈框，這樣我就構建好了一個最簡單的Vue.js前端的開發環境。
詳細的程式碼以及示例請檢視gitee（https://gitee.com/derstsea/vue-demo ）上的原始碼。
後續的內容我們均以專案內建檔案的方式進行介紹，實際專案中也推薦這種方式。使用這種方式有兩個好處：
- 第一、在沒有網際網路的環境中可以正常使用（在銀行和一些國企中這樣的環境非常常見）；
- 第二、可以顯式的控制版本，避免新版本中攜帶的問題影響我們的專案功能（CDN方式同樣也可以指定具體的版本，但是沒有網際網路這種方式就徹底歇菜了）。
4.2 引入基礎工具
一般的專案都離不開兩個工具：非同步互動（axios）和時間工具（moment.js）,下面以這兩個工具為例說明一下如何引入，其他工具引入方式類似。
非同步互動
我們直接去npm網站（https://www.npmjs.com/package/axios ）下載axios檔案即可，在hmtl頭部宣告引入後，我們將其放到Vue的例項屬性中以方便在Vue中直接使用。
<script type="text/javascript" src="/assets/js/axios.min.js"></script>
在Vue例項化之前的程式碼中寫入：
Vue.prototype.$http = axios;
即完成了axios的例項屬性的設定，屬性前加$符號是為了避免和方法函式、計算屬性產生衝突。
Vue例項屬性詳解：https://cn.vuejs.org/v2/cookbook/adding-instance-properties.html
使用示例：
this.$http.post("/work/getInitData", {}).then((response) => {
//獲得相應資料
let data = response.data;
console.log(data);
}).catch(function (error) {
//異常處理
this.$Message.info(error);
console.log(error);
});
詳細可以參考axios相關使用文件：
https://www.npmjs.com/package/axios
https://www.jianshu.com/p/7a9fbcbb1114
更詳細的資料載入示例，請見專案原始碼，web-normal 子專案下的 axios.html檔案。
時間元件
moment.js使用文件：http://momentjs.com/docs/
我們之間去上面的網站中之間下載js檔案後，引入到html中即可：
<script type="text/javascript" src="/assets/js/moment.min.js"></script>
我們可以結合Vue.js的過濾器，直接對頁面的時間進行格式化顯示，這個是最常用的方式。另外有一些時間計算用這個元件也是比較好用的。詳細的使用方式，請參見官方的使用文件。
4.3 元件化開發
我們都知道元件化的開發是Vue.js的核心，也是Vue.js最強大的地方。那麼在傳統的使用方式下我們能不能也採用元件化的方式來開發那？答案是肯定的。與工程化的開發方式相比，我們這種方式元件、工具的組織和管理都是靠我們手工來完成的，效率較低。
既然是元件化開發，那麼你就需要先了解一下Vue.js元件化開發的基本知識。大家看一下官方文件（ https://cn.vuejs.org/v2/guide/components.html ）熟悉一下基本語法和原理即可，專案中的示例都非常簡單。我們直接上栗子。
我們這裡以開發一個網站的TopBar元件為例，因為不用webpack編譯，那麼我們的元件就不能寫到.vue檔案中，那麼寫到那裡那？沒錯，肯定是js檔案中啊，.vue最終也是編譯成js檔案的。
上程式碼：
- 元件：topbar.js
//宣告元件
const TopBar = Vue.extend({
props: ['userName', 'title'],
template: `
<row type="flex" justify="space-between">
<i-col span="20" style="padding-left: 15px;">
<icon type="md-paper" size="50" color="#FFFFFF"></icon>
<span class="sys-name">{{title}}</span>
</i-col>
<i-col span="2" style="text-align: right;padding-right: 15px;">
<tooltip placement="bottom-end" :content="welcomeLabel" :delay="200">
<avatar style="background-color: #FF9900;" size="large">
{{headLetter}}
</avatar>
</tooltip>
</i-col>
</row>
`,
methods: {},
computed: {
welcomeLabel() {
return 'Welcome ' + this.userName;
},
headLetter() {
let lArray = this.userName.split("");
return lArray[0].toUpperCase();
}
}
});
//將元件註冊到Vue（全域性）
Vue.component('ly-topbar', TopBar);
- 使用元件的頁面：compontent.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue Demo</title>
<link rel="stylesheet" type="text/css" href="/assets/css/iview.css">
<link rel="stylesheet" type="text/css" href="/assets/css/demo.css">
<script type="text/javascript" src="/assets/js/vue.min.js"></script>
<script type="text/javascript" src="/assets/js/iview.min.js"></script>
</head>
<body>
<div id="app">
<layout>
<i-header class="header">
<ly-topbar user-name="derstsea" :title="appTitle"></ly-topbar>
</i-header>
<i-content>
<label for="">改變標題：</label>
<i-input v-model="appTitle"></i-input>
</i-content>
</layout>
</div>
<script type="text/javascript" src="/assets/js/components/topbar.js"></script>
<script>
new Vue({
el: '#app',
data: {
visible: false,
appTitle:'元件開發小栗子'
},
methods: {
}
})
</script>
</body>
</html>
- 執行效果：
在改變標題輸入框，輸入你要改變的標題內容，可以直接改變tobar的標題。
詳細程式碼請檢視gitee（https://gitee.com/derstsea/vue-demo ）上的原始碼。
4.4 使用前端路由
既然可以元件化，那麼在傳統使用方式下，能不能使用前端路由來避免頁面的服務端跳轉，以此來提升使用者體驗那？查了一下Vue.js的官方文件，答案也是肯定的。
首先我們直接去github（https://github.com/vuejs/vue-router ）下載一個最新版本引入到vue.js後邊即可完成引入操作，詳細請參加gitee（https://gitee.com/derstsea/vue-demo ）上專案的router.html檔案。
Vue-Router官方文件：https://router.vuejs.org/zh/
話不多說，上栗子！
我們模擬三個模組的切換，那麼我們首先要編寫三個元件模組,我們這裡用顏色和文字來區分不同的模組：
- 紅色模組：redmodule.js
//宣告元件
const RedModule = Vue.extend({
template: `
<div style="background-color: #990000;width: 600px;height: 300px;">
<h1 style="color: #f5f5f5">我是紅色模組</h1>
</div>
`,
methods: {}
});
//將元件註冊到Vue（全域性）
Vue.component('ly-redmodule', RedModule);
- 黃色模組：redmodule.js
//宣告元件
const YellowModule = Vue.extend({
template: `
<div style="background-color: #9e8821;width: 600px;height: 300px;">
<h1 style="color: #f5f5f5">我是黃色模組</h1>
</div>
`,
methods: {}
});
//將元件註冊到Vue（全域性）
Vue.component('ly-yellowmodule', YellowModule);
- 藍色模組：redmodule.js
//宣告元件
const BuleModule = Vue.extend({
template: `
<div style="background-color: #163599;width: 600px;height: 300px;">
<h1 style="color: #f5f5f5">我是藍色模組</h1>
</div>
`,
methods: {}
});
//將元件註冊到Vue（全域性）
Vue.component('ly-bluemodule', BuleModule);
模組與普通的元件沒有什麼差別，只是我們劃分程式碼功能的一個單元，類似於java中的類。
- 使用前端路由的頁面：router.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue Demo</title>
<link rel="stylesheet" type="text/css" href="/assets/css/iview.css">
<link rel="stylesheet" type="text/css" href="/assets/css/demo.css">
<script type="text/javascript" src="/assets/js/vue.min.js"></script>
<script type="text/javascript" src="/assets/js/vue-router.min.js"></script>
<script type="text/javascript" src="/assets/js/iview.min.js"></script>
</head>
<body>
<div id="app">
<layout>
<i-header class="header">
<ly-topbar user-name="derstsea" :title="appTitle"></ly-topbar>
</i-header>
<i-content>
<layout>
<sider>
<button-group vertical>
<i-button to="/red" >紅色模組</i-button>
<i-button to="/yellow">黃色模組</i-button>
<i-button to="/blue">藍色模組</i-button>
</button-group>
</sider>
<i-content>
<router-view></router-view>
</i-content>
</layout>
</i-content>
</layout>
</div>
<script type="text/javascript" src="/assets/js/components/topbar.js"></script>
<script type="text/javascript" src="/assets/js/components/redmodule.js"></script>
<script type="text/javascript" src="/assets/js/components/yellowmodule.js"></script>
<script type="text/javascript" src="/assets/js/components/bluemodule.js"></script>
<script>
const routes = [
{path: '/red', component: RedModule},
{path: '/yellow', component: YellowModule},
{path: '/blue', component: BuleModule},
{path: '/', redirect: '/red'}
];
const router = new VueRouter({
routes
});
new Vue({
el: '#app',
router: router,
data: {
visible: false,
appTitle: 'Vue前端路由栗子'
},
methods: {}
})
</script>
</body>
</html>
- 執行效果：
點選左側的按