1. vue.js研究
1.1 vue.js介紹
- vue.js是什么？
Vue (讀音 /vju?/樊销，類似于 view) 是一套用于構建用戶界面的漸進式框架钦奋。與其它大型框架不同的是财边，Vue 被設計為可以自底向上逐層應用着撩。Vue 的核心庫只關注視圖層崇猫，不僅易于上手沈条，還便于與第三方庫或既有項目整合。另一方面诅炉，當與現(xiàn)代化的工具鏈以及各種支持類庫結合使用時蜡歹，Vue 也完全能夠為復雜的單頁應用提供驅動。
漸進式框架：Progressive涕烧，說明vue.js的輕量月而，是指一個前端項目可以使用vue.js一兩個特性也可以整個項目都用
vue.js。
自底向上逐層應用：作為漸進式框架要實現(xiàn)的目標就是方便項目增量開發(fā)议纯。參考：https://cn.vuejs.org/v2/guide/
1.2 Vue.js的使用
在html頁面使用script引入vue.js的庫即可使用父款。
使用Npm管理依賴，使用webpack打包工具對vue.js應用打包痹扇。大型應用推薦此方案铛漓。
-
Vue-CLI腳手架
使用vue.js官方提供的CLI腳本架很方便去創(chuàng)建vue.js工程雛形。
1.3 vue.js有哪些功能?
-
聲明式渲染
Vue.js 的核心是一個允許采用簡潔的模板語法來聲明式地將數(shù)據(jù)渲染進 DOM 的系統(tǒng)鲫构。比如：使用vue.js的插值表達式放在Dom的任意地方浓恶， 差值表達式的值將被渲染在Dom中。
-
條件與循環(huán)
dom中可以使用vue.js提供的v-if结笨、v-for等標簽包晰，方便對數(shù)據(jù)進行判斷湿镀、循環(huán)。
-
雙向數(shù)據(jù)綁定
Vue 提供v-model 指令伐憾，它可以輕松實現(xiàn)Dom元素和數(shù)據(jù)對象之間雙向綁定勉痴，即修改Dom元素中的值自動修改綁定的數(shù)據(jù)對象，修改數(shù)據(jù)對象的值自動修改Dom元素中的值树肃。
-
處理用戶輸入
為了讓用戶和你的應用進行交互蒸矛，我們可以用
v-on指令添加一個時間監(jiān)聽器，通過它調用在 Vue 實例中定義的方法 -
組件化應用構建
vue.js可以定義一個一個的組件胸嘴，在vue頁面中引用組件雏掠，這個功能非常適合構建大型應用。
2. Vue.js基礎
2.1 MVVM模式
vue.js是一個MVVM的框架劣像，理解MVVM有利于學習vue.js乡话。
- MVVM拆分解釋為：
- Model:負責數(shù)據(jù)存儲
- View:負責頁面展示
- View Model:負責業(yè)務邏輯處理（比如Ajax請求等），對數(shù)據(jù)進行加工后交給視圖展示
- MVVM要解決的問題是將業(yè)務邏輯代碼與視圖代碼進行完全分離耳奕，使各自的職責更加清晰绑青，后期代碼維護更加簡單
- 用圖解的形式分析Ajax請求回來數(shù)據(jù)后直接操作Dom來達到視圖的更新的缺點，以及使用MVVM模式是如何來解決這個缺點的
- Vue中的 MVVM
從上圖看出屋群，VM(ViewModel)可以把view視圖和Model模型解耦合闸婴，VM的要做的工作就是vue.js所承擔的。
2.2 入門程序
本次測試我們在門戶目錄中創(chuàng)建一個html頁面進行測試谓晌，正式的頁面管理前端程序會單獨創(chuàng)建工程掠拳。在門戶目錄中創(chuàng)建vuetest目錄癞揉，并且在目錄下創(chuàng)建vue_01.html文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF‐8">
<title>vue.js入門程序</title>
<script src="/js/vue/vue.min.js"></script>
</head>
<body>
<div id="app">
{{name}}
<!‐‐ 在Vue接管區(qū)域中使用Vue的系統(tǒng)指令呈現(xiàn)數(shù)據(jù)這些指令就相當于是MVVM中的View這個角色 ‐‐>
</div>
</body>
<script>
// 實例化Vue對象
//vm :叫做MVVM中的 View Model
var VM = new Vue({
el:"#app",//表示當前vue對象接管app的div區(qū)域
data:{
name:'傳智播客'// 相當于是MVVM中的Model這個角色
}
});
</script>
</html>
代碼編寫步驟：
- 定義html纸肉，引入vue.js
- 定義app div，此區(qū)域作為vue的接管區(qū)域
- 定義vue實例喊熟，接管app區(qū)域柏肪。
- 定義model（數(shù)據(jù)對象）
- VM完成在app中展示數(shù)據(jù)
2.3 1+1=2
實現(xiàn)效果：
代碼如下：
<!DOCTYPE html>
<html lang="en" xmlns:v‐on="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF‐8">
<title>vue.js入門程序</title>
</head>
<body>
<div id="app">
<!‐‐{{name}}解決閃爍問題使用v‐text‐‐>
<a v‐bind:href="url"><span v‐text="name"></span></a>
<input type="text" v‐model="num1">+
<input type="text" v‐model="num2">=
<span v‐text="result"></span>
<!‐‐ <span v‐text="Number.parseInt(num1)+Number.parseInt(num2)"></span>‐‐>
<!‐‐{{num1+num2}}‐‐>
<!‐‐<input type="text" v‐model="result">‐‐>
<button v‐on:click="change">計算</button>
<!‐‐ 在Vue接管區(qū)域中使用Vue的系統(tǒng)指令呈現(xiàn)數(shù)據(jù)這些指令就相當于是MVVM中的View這個角色 ‐‐>
</div>
</body>
<script src="/js/vue/vue.min.js"></script>
<script>
// 實例化Vue對象
//vm :叫做MVVM中的 View Model
var VM = new Vue({
el:"#app",//表示當前vue對象接管app的div區(qū)域data:{
name:'黑馬程序員',// 相當于是MVVM中的Model這個角色
num1:0, num2:0, result:0,
url:'http://www.itcast.cn'
},
methods:{
change:function(){
this.result = Number.parseInt(this.num1)+Number.parseInt(this.num2) alert(this.result)
}
}
});
</script>
</html>
-
v-model：在表單控件或者組件上創(chuàng)建雙向綁定
v-model僅能在如下元素中使用：input select textarea components（Vue中的組件） -
解決插值表達式閃爍問題，使用
v-textv-text可以將一個變量的值渲染到指定的元素中,它可以解決插值表達式閃爍的問題 v-on綁定一個按鈕的單擊事件-
v-bind1芥牌、作用： v‐bind可以將數(shù)據(jù)對象綁定在dom的任意屬性中烦味。 v‐bind可以給dom對象綁定一個或多個特性，例如動態(tài)綁定style和class 2壁拉、舉例： <img v‐bind:src="imageSrc"> <div v‐bind:style="{ fontSize: size + 'px' }"></div> 3谬俄、縮寫形式 <img :src="imageSrc"> <div :style="{ fontSize: size + 'px' }"></div>
2.4 v-if和v-for
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF‐8">
<title>Document</title>
<script src="/js/vue/vue.min.js"></script>
</head>
<body>
<div id="app">
<ul>
<!‐‐只顯示偶數(shù)行‐‐>
<li v‐for="(item,index) in list" :key="index" v‐if="index % 2==0">{{index}}‐{{item}}
</li>
<li v‐for ="(value,key) in user">{{key}}‐{{value}}</li>
<li v‐for="(item,index) in userlist" :key="item.user.uname">
<div v‐if="item.user.uname=='heima'" style="background: chartreuse"><!‐‐名稱為heima的加背景色‐‐>
{{index}}‐{{item.user.uname}}‐{{item.user.age}}
</div>
<div v‐else="">
{{index}}‐{{item.user.uname}}‐{{item.user.age}}
</div>
</li>
</ul>
</div>
</body>
<script>
new Vue({
el:'#app', data:{
list:[1,2,3,4,4],
user:{uname:'itcast',age:10}, userlist:[
{ user:{uname:'itcast',age:10}},
{ user:{uname:'heima',age:11}}
]
}
});
</script>
</html>
3. webpack入門
使用vue.js開發(fā)大型應用需要使用webpack打包工具，本節(jié)研究webpack的使用方法弃理。
3.1 webpack介紹
Webpack 是一個前端資源的打包工具溃论，它可以將js、image痘昌、css等資源當成一個模塊進行打包钥勋。
從圖中我們可以看出炬转，Webpack 可以將js、css算灸、png等多種靜態(tài)資源 進行打包扼劈，使用webpack有什么好處呢？
-
模塊化開發(fā)
程序員在開發(fā)時可以分模塊創(chuàng)建不同的js菲驴、 css等小文件方便開發(fā)荐吵，最后使用webpack將這些小文件打包成一個文件，減少了http的請求次數(shù)赊瞬。
webpack可以實現(xiàn)按需打包捍靠，為了避免出現(xiàn)打包文件過大可以打包成多個文件。
-
編譯typescript森逮、ES6等高級js語法
隨著前端技術的強大榨婆，開發(fā)中可以使用javascript的很多高級版本，比如：typescript褒侧、ES6等良风，方便開發(fā)，
webpack可以將打包文件轉換成瀏覽器可識別的js語法闷供。
-
CSS預編譯
webpack允許在開發(fā)中使用Sass 和 Less等原生CSS的擴展技術烟央，通過sass-loader、less-loader將Sass 和 Less的語法編譯成瀏覽器可識別的css語法歪脏。
webpack的缺點：
- 配置有些繁瑣
- 文檔不豐富
3.2 安裝webpack
-
安裝Node.js
webpack基于node.js運行疑俭，首先需要安裝node.js广料。
下載對應你系統(tǒng)的Node.js版本: https://nodejs.org/en/download/
測試：
node -v -
安裝NPM
- 自動安裝NPM
npm全稱Node Package Manager寞冯，他是node包管理和分發(fā)的工具，使用NPM可以對應用的依賴進行管理窍箍，NPM
的功能和服務端項目構建工具maven差不多豪硅，我們通過npm 可以很方便地下載js庫哩照，打包js文件。
node.js已經(jīng)集成了npm工具懒浮，在命令提示符輸入 npm -v 可查看當前npm版本
-
設置包路徑
包路徑就是npm從遠程下載的js包所存放的路徑飘弧。
使用 npm con?g ls 查詢NPM管理包路徑（NPM下載的依賴包所存放的路徑）
NPM默認的管理包路徑在C:/用戶/[用戶名]/AppData/Roming/npm/node_meodules，為了方便對依賴包管理砚著，我 們將管理包的路徑設置在單獨的地方次伶，本教程將安裝目錄設置在node.js的目錄下，**創(chuàng)建npm_modules和npm_cache**稽穆，執(zhí)行下邊的命令：
本教程安裝node.js在D:\Software\node-v10.16.0\node下所以執(zhí)行命令如下：
```
npm con?g set pre?x "D:\Software\node-v10.16.0\node\npm_modules"
npm con?g set cache "D:\Software\node-v10.16.0\node\npm_cache"
```
- 安裝cnpm
npm默認會去國外的鏡像去下載js包冠王，在開發(fā)中通常我們使用國內鏡像，這里我們使用淘寶鏡像下邊我們來安裝cnpm：
有時我們使用npm下載資源會很慢秧骑，所以我們可以安裝一個cnmp(淘寶鏡像)來加快下載速度版确。
輸入命令扣囊，進行全局安裝淘寶鏡像。
```
npm install -g cnpm --registry=https://registry.npm.taobao.org
```
安裝后绒疗，我們可以使用以下命令來查看cnpm的版本
```
cnpm -v
```
`nrm ls` 查看鏡像已經(jīng)指向taobao
使`nrm use XXX`切換 鏡像
如果nrm沒有安裝則需要進行全局安裝：`cnpm install -g nrm`
-
安裝webpack
連網(wǎng)安裝
本地安裝：將webpack安裝到指定應用程序的目錄下侵歇。
進入這個目錄，執(zhí)行
npm install --save-dev webpack 或 cnpm install --save-dev webpack全局安裝：將webpack安裝npm默認的依賴包的目錄（前邊配置在了nodejs的安裝目錄下）在任意目錄吓蘑，執(zhí)行
npm install -g webpack 或 cnpm install -g webpack建議指定webpack的版本進行安裝
全局安裝：
npm install webpack@3.6.0 -g或 cnpm install webpack@3.6.0 -g本地安裝
npm install --save-dev webpack@3.6.0 或 cnpm install --save-dev webpack@3.6.0
3.3 入門程序
-
通過入門程序實現(xiàn)對js文件的打包惕虑，體會webpack是如何對應用進行模塊化管理。 對上邊1+1=2的例子使用webpack進行模塊化管理
-
定義模塊：創(chuàng)建webpacktest01目錄磨镶，將vue.min.js及vue_02.html拷貝到目錄下溃蔫。
-
定義model01.js
在webpacktest01目錄下創(chuàng)建model01.js
將本程序使用的加法運算的js方法抽取到一個js文件，此文件就是一個模塊
// 定義add函數(shù) function add(x, y) { return x + y } // function add2(x, y) { // return x + y+1 // } // 導出add方法 module.exports.add = add; // module.exports ={add,add2};//如果有多個方法這樣導出 // module.exports.add2 = add2//如果有多個方法也可以這樣導出 -
定義main.js
在webpacktest01目錄下創(chuàng)建main.js琳猫，main.js是本程序的js主文件伟叛，包括如下內容：
在此文件中會引用model01.js模塊
引用vue.min.js（它也一個模塊）
-
將html頁面中構建vue實例的代碼放在main.js中。
var {add} = require('./model01.js'); var Vue = require('./vue.min'); var VM = new Vue({ el:"#app",//表示當前vue對象接管app的div區(qū)域 data:{ name:'黑馬程序員',// 相當于是MVVM中的Model這個角色 num1:0, num2:0, result:0, url:'http://www.itcast.cn' }, methods:{ change:function(){ //這里使用了導入的model01.js文件中的add方法 this.result = add(Number.parseInt(this.num1),Number.parseInt(this.num2)) alert(this.result) } } })
-
打包測試
上邊將mode01.js模塊及main.js主文件編寫完成脐嫂，下邊使用webpack對這些js文件進行打包
進入程序目錄统刮，執(zhí)行
webpack main.js build.js，這段指令表示將main.js打包輸出為 build.js文件執(zhí)行完成账千，觀察程序目錄是否出現(xiàn)build.js侥蒙。-
在html中引用build.js
<!DOCTYPE html> <html lang="en" xmlns:v‐on="http://www.w3.org/1999/xhtml"> <head> <meta charset="UTF‐8"> <title>vue.js入門程序</title> </head> <body> <div id="app"> <!‐‐{{name}}解決閃爍問題使用v‐text‐‐> <a v‐bind:href="url"><span v‐text="name"></span></a> <input type="text" v‐model="num1">+ <input type="text" v‐model="num2">= <span v‐text="result"></span> <!‐‐{{num1+num2}}‐‐> <!‐‐<input type="text" v‐model="result">‐‐> <button v‐on:click="change">計算</button> <!‐‐ 在Vue接管區(qū)域中使用Vue的系統(tǒng)指令呈現(xiàn)數(shù)據(jù)這些指令就相當于是MVVM中的View這個角色 ‐‐> </div> </body> <script src="build.js"></script> <script> </script> </html>
-
3.4 webpack-dev-server
webpack-dev-server開發(fā)服務器，它的功能可以實現(xiàn)熱加載 并且自動刷新瀏覽器匀奏。
創(chuàng)建一個新的程序目錄鞭衩，這里我們創(chuàng)建webpacktest02目錄，將webpack入門程序的代碼拷貝進來娃善，并在目錄下創(chuàng) 建src目錄论衍、dist目錄。
將main.js和model01.js拷貝到src目錄会放。
3.4.1 安裝配置
-
安裝webpack-dev-server
cnpm install webpack@3.6.0 webpack-dev-server@2.9.1 html-webpack-plugin@2.30.1 --save-dev安裝完成自動創(chuàng)建package.json(記錄了本程序所依賴的包信息)
安裝完成自動創(chuàng)建node_modules(存放了本程序所依賴的包)
-
在package.json中配置script(運行命令)
"scripts": { "dev": "webpack‐dev‐server ‐‐inline ‐‐hot ‐‐open ‐‐port 5008" }, -
配置webpack.config.js
在webpacktest02目錄下創(chuàng)建 webpack.con?g.js
webpack的配置文件饲齐，配置了入口文件、輸入文件的路徑咧最、依賴的插件。
-
配置模板文件
將原來的vue_02.html作為模板文件御雕，為了和內存中的index.html文件名區(qū)別矢沿，注意將vue_02.html中的script標簽去掉，內容如下：
<!DOCTYPE html> <html lang="en" xmlns:v‐on="http://www.w3.org/1999/xhtml"> <head> <meta charset="UTF‐8"> <title>vue.js入門程序</title> </head> <body> <div id="app"> <!‐‐{{name}}解決閃爍問題使用v‐text‐‐> <a v‐bind:href="url"><span v‐text="name"></span></a> <input type="text" v‐model="num1">+ <input type="text" v‐model="num2">= <span v‐text="result"></span> <!‐‐{{num1+num2}}‐‐> <!‐‐<input type="text" v‐model="result">‐‐> <button v‐on:click="change">計算</button> <!‐‐ 在Vue接管區(qū)域中使用Vue的系統(tǒng)指令呈現(xiàn)數(shù)據(jù)這些指令就相當于是MVVM中的View這個角色 ‐‐> </div> </body> </html> -
配置html-webpack-plugin
在webpack.con?g.js中配置html-webpack-plugin插件
var htmlwp = require('html‐webpack‐plugin'); module.exports={ entry:'./src/main.js', //指定打包的入口文件 output:{ path : dirname+'/dist', // 注意： dirname表示webpack.config.js所在目錄的絕對路徑 filename:'build.js' //輸出文件 }, plugins:[ new htmlwp({ title: '首頁', //生成的頁面標題<head><title>首頁</title></head> filename: 'index.html', //webpack‐dev‐server在內存中生成的文件名稱酸纲，自動將build注入到這個頁面底部捣鲸，才能實現(xiàn)自動刷新功能 template: 'vue_02.html' //根據(jù)index1.html這個模板來生成(這個文件請程序員自己生成) }) ] }
-
-
使用webpack的命令去運行程序
進入 webpacktest02目錄，執(zhí)行
npm run dev -
使用debugger進行調試
-
在webpack.con?g.js中配置：
devtool: 'eval‐source‐map',webpack.con?g.js部分內容如下：
var htmlwp = require('html‐webpack‐plugin'); module.exports={ entry:'./src/main.js', //指定打包的入口文件 output:{ path : dirname+'/dist', // 注意： dirname表示webpack.config.js所在目錄的絕對路徑 filename:'build.js' //輸出文件 }, devtool: 'eval‐source‐map', ...... 在要打斷點的代碼處加debugger
-
4. CMS前端工程創(chuàng)建
4.1 導入系統(tǒng)管理前端工程
CMS系統(tǒng)使用Vue-cli腳手架創(chuàng)建闽坡， Vue-cli是Vue官方提供的快速構建單頁應用的腳手架栽惶，github地址： https://github.com/vuejs/vue-cli（有興趣的同學可以參考官方指導使用vue-cli創(chuàng)建前端工程）愁溜，本項目對Vue-cli 創(chuàng)建的工程進行二次封裝，下邊介紹CMS工程的情況外厂。
4.1.1 工程結構
如果我要基于Vue-Cli創(chuàng)建的工程進行開發(fā)還需要在它基礎上作一些封裝冕象，導入課程資料中提供Vue-Cli封裝工程。
將課程資料中的xc-ui-pc-sysmanage.7z拷貝到UI工程目錄中汁蝶，并解壓渐扮，用WebStorm打開xc-ui-pc-sysmanage目錄。
4.1.2 package.json
package.json記錄了工程所有依賴掖棉，及腳本命令：
- 開發(fā)使用：
npm run dev - 打包使用：
npm run build
4.1.3 webpack.base.conf.js
webpack.base.conf.js就是webpack的webpack.con?g.js配置文件墓律，在此文件中配置了入口文件及各種Loader。
webpack是通過vue-load解析.vue文件幔亥，通過css-load打包css文件等耻讽。
4.1.4 main.js
main.js是工程的入口文件，在此文件中加載了很多第三方組件帕棉，如：Element-UI齐饮、Base64、VueRouter等笤昨。index.html是模板文件祖驱。
4.1.5 src目錄
src目錄下存放頁面及js代碼。
- assets：存放一些靜態(tài)文件瞒窒，如圖片捺僻。
- base：存放基礎組件
- base/api：基礎api接口
- base/component：基礎組件，被各各模塊都使用的組件base/router：總的路由配置崇裁，加載各模塊的路由配置文件匕坯。
- common：工具類
- component：組件目錄，本項目不用拔稳。
- mock：存放前端單元測試方法葛峻。
- module：存放各業(yè)務模塊的頁面和api方法。 下級目錄以模塊名命名巴比，下邊以cms舉例：
- cms/api：cms模塊的api接口
- cms/component：cms模塊的組件
- cms/page： cms模塊的頁面
- cms/router：cms模塊的路由配置
- statics：存放第三方組件的靜態(tài)資源
- vuex：存放vuex文件术奖，本項目不使用
- static：與src的平級目錄，此目錄存放靜態(tài)資源
- 它與assets的區(qū)別在于轻绞，static目錄中的文件不被webpack打包處理采记，會原樣拷貝到dist目錄下。
5. CMS前端頁面查詢開發(fā)
5.1 頁面結構
在model目錄創(chuàng)建 cms模塊的目錄結構
在page目錄新建page_list.vue政勃，擴展名為.vue唧龄。
.vue文件的結構如下：
<template>
<!‐‐編寫頁面靜態(tài)部分，即view部分‐‐>
測試頁面顯示...
</template>
<script>
/*編寫頁面靜態(tài)部分奸远，即model及vm部分既棺。*/
</script>
<style>
/*編寫頁面樣式讽挟，不是必須*/
</style>
在頁面的template中填寫 “測試頁面顯示...”。
注意：template內容必須有一個根元素丸冕，否則vue會報錯耽梅，這里我們在template標簽內定義一個div。
5.2 頁面路由
在cms目錄下創(chuàng)建page_list.vue頁面晨仑。
現(xiàn)在先配置路由褐墅，實現(xiàn)url訪問到頁面再進行內容完善與調試。
5.2.1 在cms的router下配置路由
import Home from '@/module/home/page/home.vue';
import page_list from '@/module/cms/page/page_list.vue';
export default [{
path: '/cms',
component: Home,
name: 'CMS內容管理',
hidden: false,
children:[
{path:'/cms/page/list',name:'頁面列表',component: page_list,hidden:false}
]
}]
5.2.2 在base目錄下的router導入cms模塊的路由
5.3 頁面內容完善
根據(jù)需求完善頁面內容洪己，完善列表字段妥凳，添加分頁組件。
<template>
<div>
<!--編寫頁面靜態(tài)部分答捕，即view部分-->
<el-button type="primary" size="small" v-on:click="query">查詢</el-button>
<el-table
:data="list"
stripe
style="width: 100%">
<el-table-column type="index" width="60">
</el-table-column>
<el-table-column prop="pageName" label="頁面名稱" width="120">
</el-table-column>
<el-table-column prop="pageAliase" label="別名" width="120">
</el-table-column>
<el-table-column prop="pageType" label="頁面類型" width="150">
</el-table-column>
<el-table-column prop="pageWebPath" label="訪問路徑" width="250">
</el-table-column>
<el-table-column prop="pagePhysicalPath" label="物理路徑" width="250">
</el-table-column>
<el-table-column prop="pageCreateTime" label="創(chuàng)建時間" width="180" >
</el-table-column>
</el-table>
<el-pagination
layout="prev, pager, next"
:total="total"
:page-size="params.size"
:current-page="params.page"
v-on:current-change="changePage"
style="float:right">
</el-pagination>
</div>
</template>
<script>
/*編寫頁面靜態(tài)部分逝钥，即model及vm部分。*/
import * as cmsApi from '../api/cms'
export default {
data() {
return {
list: [],
total:0,
params:{
page:1,
size:10
}
}
},
methods:{
query:function(){
// alert('查詢')
//調用服務端的接口
cmsApi.page_list(this.params.page,this.params.size).then((res)=>{
//將res結果數(shù)據(jù)賦值給數(shù)據(jù)模型對象
this.list = res.queryResult.list;
this.total = res.queryResult.total;
})
},
changePage:function(page){//形參就是當前頁碼
//調用query方法
// alert(page)
this.params.page = page;
this.query()
}
},
mounted(){
//當DOM元素渲染完成后調用query
this.query()
}
}
</script>
<style>
/*編寫頁面樣式拱镐，不是必須*/
</style>
5.4. Api調用
在cms模塊的api目錄定義cms.js艘款，
在cms.js中定義如下js方法，此方法實現(xiàn)http請求服務端頁面查詢接口沃琅。
//public是對axios的工具類封裝哗咆，定義了http請求方法
import http from './../../../base/api/public'
export const page_list = (page,size,params) => {
return http.requestQuickGet('http://localhost:31001/cms/page/list/'+page+'/'+size)
}
axios實現(xiàn)了http方法的封裝，vue.js官方不再繼續(xù)維護vue-resource,推薦使用 axios益眉。
前端頁面導入cms.js晌柬，調用js方法請求服務端頁面查詢接口。
-
導入cms.js
-
在query方法中調用 page_list方法
5.5 跨域問題解決
No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:11000' is therefore not allowed access.
原因：瀏覽器的同源策略不允許跨域訪問郭脂，所謂同源策略是指協(xié)議年碘、域名、端口相同展鸡。 解決：采用proxyTable解決屿衅。
proxyTable是什么？
vue-cli 提 供 的 解 決 vue 開 發(fā) 環(huán) 境 下 跨 域 問 題 的 方 法 莹弊，proxyTable 的 底 層 使 用 了 http-proxy- middleware（https://github.com/chimurai/http-proxy-middleware）涤久，它是http代理中間件，它依賴node.js箱硕， 基本原理是用服務端代理解決瀏覽器跨域：
cms跨域解決原理：
- 訪問頁面
http://localhost:11000/ - 頁面請求
http://localhost:11000/cms由于url由http://localhost:31001/cms...改為“http://localhost:11000/cms."拴竹，所以不存在跨域 - 通過proxyTable由node服務器代理請求
http://localhost:31001/cms.
服務端不存在跨域問題
具體的配置如下：
-
修改api方法中url的定義
請求前加/api前綴
-
在con?g/index.js下配置proxyTable。
以/api/cms開頭的請求剧罩，代理請求
http://localhost:31001
5.6 分頁查詢
-
定義分頁視圖
使用v-on監(jiān)聽更改分頁事件
<el-pagination layout="prev, pager, next" :total="total" :page-size="params.size" :current-page="params.page" v-on:current-change="changePage" style="float:right"> </el-pagination> -
定義數(shù)據(jù)模型對象
export default { data() { return { list: [], total:0, params:{ page:1, size:10 } } }, methods:{ query:function(){ // alert('查詢') //調用服務端的接口 cmsApi.page_list(this.params.page,this.params.size).then((res)=>{ //將res結果數(shù)據(jù)賦值給數(shù)據(jù)模型對象 this.list = res.queryResult.list; this.total = res.queryResult.total; }) }, changePage:function(page){//形參就是當前頁碼 //調用query方法 // alert(page) this.params.page = page; this.query() } }
5.7 進入頁面立即查詢
目前實現(xiàn)的功能是進入頁面點擊查詢按鈕向服務端表求查詢，實際的需求是進入頁面立即查詢座泳。 如何實現(xiàn)惠昔？
這要用到vue的鉤子函數(shù)幕与，每個 Vue 實例在被創(chuàng)建時都要經(jīng)過一系列的初始化過程——例如，需要設置數(shù)據(jù)監(jiān)聽镇防、編譯模板啦鸣、將實例掛載到 DOM 并在數(shù)據(jù)變化時更新 DOM 等。同時在這個過程中也會運行一些叫做生命周期鉤子的函數(shù)来氧，這給了用戶在不同階段添加自己的代碼的機會诫给。
通常使用最多的是created和mounted兩個鉤子：
- created：vue實例已創(chuàng)建但是DOM元素還沒有渲染生成。
- mounted：DOM元素渲染生成完成后調用啦扬。
本例子在兩個方法的任意一個都滿足需求：
添加如下代碼
6. 前后端請求響應流程小結
- 在瀏覽器輸入前端url
- 前端框架vue.js根據(jù)url解析路由中狂，根據(jù)路由找到page_list.vue頁面
- 首先執(zhí)行page_list.vue中的鉤子方法
- 在鉤子方法中調用query方法。
- 在query方法中調用cms.js中的page_list方法
- cms.js中的page_list方法通過axios請求服務端接口
- 采用proxyTable解決跨域問題扑毡，node.js將請求轉發(fā)到服務端(http://localhost:31001/cms/page/list`)
- 服務端處理胃榕，將查詢結果響應給前端
- 成功響應調用then方法，在then方法中處理響應結果瞄摊，將查詢結果賦值給數(shù)據(jù)模型中的total和list變量勋又。
- vue.js通過雙向數(shù)據(jù)綁定將list數(shù)據(jù)渲染輸出。
