Java Web 開發(fā)從入門到實(shí)踐課件 第11章 - Vue框架

第四篇

流行框架篇JavaWeb開發(fā)從入門到實(shí)踐JavaWebDevelopmentFromIntroductiontoPracticeVue框架Chap11提綱Vue框架Vue是一個(gè)漸進(jìn)式的JavaScript框架，專注于構(gòu)建用戶界面，而Element-UI是基于Vue的高質(zhì)量組件庫，提供了豐富的UI元素和交互功能，幫助快速開發(fā)現(xiàn)代化的Web應(yīng)用。11.1Vue技術(shù)11.2Element-UI組件11.3本章小結(jié)11.1Vue技術(shù)11.1.1Vue入門及應(yīng)用11.1.2Vue入門案例11.1.3Axios數(shù)據(jù)交互11.1.4Axios案例11.1.1Vue入門及應(yīng)用圖

11-1

MVVM模型Vue是一套前端框架，免除原生JavaScript中的DOM操作，簡化書寫。Vue是基于MVVM（Model-View-ViewModel）思想，實(shí)現(xiàn)數(shù)據(jù)的雙向綁定，將編程的關(guān)注點(diǎn)放在數(shù)據(jù)上。MVVM模式有助于將應(yīng)用程序的業(yè)務(wù)和表示邏輯與用戶界面(UI)清晰分離。保持應(yīng)用程序邏輯和UI之間的清晰分離有助于解決許多開發(fā)問題，并使應(yīng)用程序更易于測試、維護(hù)和演變。什么是Vue11.1.1Vue入門及應(yīng)用模型數(shù)據(jù)層（Model）：是指數(shù)據(jù)模型，也就是vue中的data數(shù)據(jù)，需要從數(shù)據(jù)庫或者一些數(shù)據(jù)介質(zhì)中取出來。視圖（View）：直接面向最終用戶的“視圖層”，它是提供給用戶的操作界面。前端主要由HTML和CSS來構(gòu)建，為了更方便地展現(xiàn)ViewModel或者M(jìn)odel層的數(shù)據(jù)，已經(jīng)產(chǎn)生了各種各樣的前后端模板語言，例如，artTemplate等。視圖模型層（ViewMode）：視圖模型層是整個(gè)mvvm的核心，連接Model和View，實(shí)現(xiàn)數(shù)據(jù)和頁面雙向綁定。11.1.1Vue入門及應(yīng)用Vue快速入門案例：創(chuàng)建一個(gè)Vue實(shí)例，并訪問Vue中的data數(shù)據(jù)（1）新建HTML頁面，引入Vue.js文件<scriptsrc="js/vue.js"></script>（2）在JS代碼區(qū)域，創(chuàng)建Vue核心對象，定義數(shù)據(jù)模型<script> newVue({ el:"#app", data:{ message:"HelloVue!" } })</script>11.1.1Vue入門及應(yīng)用（3）編寫視圖

<divid="app">

{{message}}

<inputtype="text"v-model="message"></div>{{message}}是插值表達(dá)式Vue常用指令表

11-1

Vue常用指令指令作用v-bind為HTML標(biāo)簽綁定屬性，如設(shè)置href等v-model在表單元素上創(chuàng)建雙向數(shù)據(jù)綁定v-on為HTML標(biāo)簽綁定事件v-if、v-else-if、v-else條件性的渲染某元素，判定為true時(shí)渲染，否則不渲染v-show根據(jù)條件展示某元素，區(qū)別在于切換的是display屬性的值v-for列表渲染，遍歷容器的元素或者對象的屬性11.1.1Vue入門及應(yīng)用Vue常用指令示例<divid="app"> <av-bind:href="url">新浪</a> <a:href="url">新浪</a> <inputtype="text"v-model="url"> <inputtype="button"value="單擊事件"v-on:click="handle()"> <inputtype="button"value="單擊事件"@click="handle()">

成績{{score}},經(jīng)判定為： <spanv-if="score>=85">優(yōu)秀</span> <spanv-else-if="score>=75">良好</span> <spanv-else>及格</span>

成績{{score}},經(jīng)判定為： <spanv-show="score>=85">優(yōu)秀</span> <divv-for="(name,index)innames">{{index+1}}{{name}}</div></div>11.1.1Vue入門及應(yīng)用Vue常用指令示例<scriptsrc="js/vue.js"></script><script>newVue({ el:"#app", data:{ url:"", score:90, names:["Charles","Jack","Mia"] }, methods:{ handle:function(){ alert("觸發(fā)單擊事件"); } },})</script>注意，v-bind:可以縮寫為:，通過v-bind或者v-model綁定的變量，必須在數(shù)據(jù)模型中聲明。11.1.1Vue入門及應(yīng)用Vue生命周期生命周期是指一個(gè)對象從創(chuàng)建到銷毀的整個(gè)過程。Vue生命周期包含八個(gè)階段表

11-2Vue生命周期八個(gè)階段狀態(tài)階段周期beforeCreate創(chuàng)建前created創(chuàng)建后beforeMount掛載前mounted掛載完成beforeUpdate更新前updated更新后beforeDestroy銷毀前destroyed銷毀后11.1.1Vue入門及應(yīng)用生命周期示例<script> newVue({ el:"#app", data:{ }, mounted(){ console.log("Vue掛載完成") }, methods:{ }, })</script>11.1.2Vue入門案例案例：創(chuàng)建一個(gè)Vue實(shí)例，并訪問Vue中的data數(shù)據(jù)圖

11-2

用戶數(shù)據(jù)11.1.2Vue入門案例<divid="app"style="margin:0pxauto;"><tableborder="1"cellspacing="0"width="60%"><tr><th>編號</th><th>姓名</th><th>性別</th><th>年齡</th><th>成績</th><th>等級</th></tr><tralign="center"v-for="(user,index)inusers"><td>{{index+1}}</td><td>{{}}</td><td><spanv-if="user.sex==1">男</span><spanv-if="user.sex==2">女</span></td><td>{{user.age}}</td><td>{{user.score}}</td><td><spanv-if="user.score>=85">優(yōu)秀</span><spanv-else-if="user.score>=60">及格</span><spanstyle="color:red;"v-else>不及格</span></td></tr></table></div>11.1.2Vue入門案例<script>newVue({el:"#app",data:{users:[{name:'Charles',sex:1,age:35,score:95},{name:'Mia',sex:1,age:30,score:80},{name:'July',sex:2,age:35,score:58}]}})</script>11.1.3Axios數(shù)據(jù)交互Axios（AjaxI/OSystem）是一個(gè)基于Promise的HTTP庫，可以工作于瀏覽器，也可以在node.js中使用。它是一個(gè)非常強(qiáng)大和流行的第三方庫，可以輕松地發(fā)送異步請求并處理響應(yīng)數(shù)據(jù)。Axios不是一種新技術(shù),本質(zhì)上還是對原生XMLHttpRequest的封裝。Apifox-Postman在線API調(diào)試工具Apifox官網(wǎng)，進(jìn)行注冊并登錄1、首先創(chuàng)建數(shù)據(jù)模型2、然后分享接口文檔具體步驟參考書籍11.1.3Axios數(shù)據(jù)交互Axios入門Axios是一個(gè)基于promise的網(wǎng)絡(luò)請求庫，對原生的Ajax進(jìn)行了封裝，簡化書寫，快速開發(fā)。（1）引入Axios的js文件<scriptsrc="js/axios-0.18.0.js"></script>（2）使用Axios發(fā)送請求，并獲取響應(yīng)結(jié)果Axios發(fā)送請求常用的二種方式是GET和POST，每種方式有二種寫法11.1.3Axios數(shù)據(jù)交互GET請求方式<script>functionget(){//第一種方式：通過向axios傳遞相關(guān)配置來創(chuàng)建請求axios({method:"GET",url:"/m1/3496474-0-default/users/1"}).then((result)=>{console.log(result.data);}).catch((err)=>{console.log(err);});

//第二種方式（推薦方式）：請求別名的方式，簡化請求方法配置的API。axios.get("/m1/3496474-0-default/users/1").then((result)=>{console.log(result.data);})}</script>11.1.3Axios數(shù)據(jù)交互POST請求方式<script>

functionpost(){

//第一種方式：通過向axios傳遞相關(guān)配置來創(chuàng)建請求

axios({

method:"POST",

//url:"/m1/3496474-0-default/users?username=zhangsan",//Apifox設(shè)置為Post請求

url:"/m1/3496474-0-default/users",

data:"username=jack"

}).then((result)=>{

console.log(result.data)

}).catch((err)=>{

console.log(err);

});

//第二種方式（推薦方式）：請求別名的方式，簡化請求方法配置的API。

axios.post("/m1/3496474-0-default/users","username=jack").then((result)=>{

console.log(result.data);

})

}</script>11.1.4Axios案例案例：基于Vue及Axios完成數(shù)據(jù)的動態(tài)加載展示（1）數(shù)據(jù)準(zhǔn)備圖

11-4

響應(yīng)數(shù)據(jù)11.1.4Axios案例案例：基于Vue及Axios完成數(shù)據(jù)的動態(tài)加載展示（1）在頁面加載完成后，自動發(fā)送異步請求，加載數(shù)據(jù)圖

11-5用戶信息展示11.1.4Axios案例<head><scriptsrc="js/vue.js"></script><script>VductionTip=false</script></head><body><divid="app"><tableborder="1"cellspacing="0"width="60%"><trstyle="height:40px;"><th>序號</th><th>編號</th><th>姓名</th><th>頭像</th><th>性別</th><th>年齡</th><th>狀態(tài)</th><th>email</th></tr><tralign="center"v-for="(user,index)inusers"><td>{{index+1}}</td><td>{{user.id}}</td><td>{{}}</td><td><img:src="user.img"width="70px"height="40px"></td>

11.1.4Axios案例<td><spanv-if="user.sex==1">男</span><spanv-else-if="user.sex==0">女</span><spanv-else>未知</span></td><td>{{user.age}}</td><td><spanv-if="user.state==1">啟用</span><spanv-else-if="user.state==0">停用</span><spanv-else>未知</span></td><td>{{user.email}}</td></tr></table></div></body>11.1.4Axios案例<scriptsrc="js/axios-0.18.0.js"></script><script>newVue({el:"#app",//接管區(qū)域data:{users:[]},//注意：不能放在methods中mounted(){axios.get("/m1/3496474-0-default/users").then((result)=>{console.log(result.data);this.users=result.data.data;})}})</script>11.2Element-UI組件11.2.1前端工程化11.2.2Vue組件庫Element11.2.1前端工程化前端工程化是指在企業(yè)級的前端項(xiàng)目開發(fā)中，把前端開發(fā)所需的工具、技術(shù)、流程、經(jīng)驗(yàn)等進(jìn)行規(guī)范化、標(biāo)準(zhǔn)化。前端工程化包括模塊化（JS、CSS）、組件化（UI結(jié)構(gòu)、樣式、行為）、規(guī)范化（目錄結(jié)構(gòu)、編碼、接口）和自動化（構(gòu)建、部署和測試）。實(shí)際開發(fā)中，通?；趘ue-cli搭建前端工程化項(xiàng)目。vue-cli是Vue官方提供的一個(gè)腳手架，用于快速生成一個(gè)Vue的項(xiàng)目模板。vue-cli提供的功能包括統(tǒng)一的目錄結(jié)構(gòu)、本地調(diào)試、熱部署、單元測試和集成打包上線。vue-cli依賴NodeJS。（1）安裝vue-cli：使用管理員身份運(yùn)行命令行npminstall-g@vue/cli（2）創(chuàng)建項(xiàng)目vuecreatevue-element圖形化界面方式命令行方式vueui11.2.1前端工程化圖

11-6

Vue項(xiàng)目的目錄結(jié)構(gòu)圖圖

11-7

src目錄下的目錄結(jié)構(gòu)11.2.1前端工程化（3）啟動Vue項(xiàng)目方式一：圖形化界面（點(diǎn)擊servevue-cli-serviceserve后面的“Run”圖標(biāo)）圖

11-8

圖形化界面啟動Vue項(xiàng)目方式二：命令行（執(zhí)行命令“npmrunserve”）圖

11-9

命令行啟動Vue項(xiàng)目11.2.1前端工程化（4）配置Vue項(xiàng)目的端口默認(rèn)端口為8080，可以在文件vue.config.js中修改端口號，端口號改為7000的代碼如下：const{defineConfig}=require('@vue/cli-service')module.exports=defineConfig({ publicPath:"./",//公共路徑（必須有的） transpileDependencies:true, devServer:{ port:7000 }})11.2.1前端工程化（5）Vue項(xiàng)目開發(fā)流程public目錄下index.html是默認(rèn)首頁，src下的main.js是入口文件，src下的App.vue是根組件。index.html<body> <noscript> <strong>We'resorrybut<%=htmlWebpackPlugin.options.title%>doesn'tworkproperlywithoutJavaScriptenabled.Pleaseenableittocontinue.</strong> </noscript> <divid="app"></div> <!--builtfileswillbeautoinjected--></body>11.2.1前端工程化main.jsimportVuefrom'vue'importAppfrom'./App.vue'importrouterfrom'./router'VductionTip=falsenewVue({

router,

render:h=>h(App)}).$mount('#app')App.vue<template>

<div>

<h1>{{message}}</h1>

</div></template><script>exportdefault{

data(){

return{

message:"HelloVue-cli"

}

}}</script><style></style>11.2.2Vue組件庫Element在Vue項(xiàng)目中通常引入一套不依賴業(yè)務(wù)的UI組件庫ElementUI，該組件庫可以減少用戶對常用組件的封裝，降低開發(fā)的難易程序。快速入門：Vue組件庫ElementUI的簡單使用（1）在當(dāng)前工程目錄下，執(zhí)行命令“npminstallelement-ui@2.15.3”安裝ElementUI組件庫。（2）引入ElementUI組件庫importElementUIfrom'element-ui';import'element-ui/lib/theme-chalk/index.css';Vue.use(ElementUI);11.2.2Vue組件庫Element常見組件ElementUI組件庫包含表格、Pagination分頁、Dialog對話框、Form表單和Container布局容器等組件。（1）表格。Table表格用于展示多條結(jié)構(gòu)類似的數(shù)據(jù)，可對數(shù)據(jù)進(jìn)行排序、篩選或其它自定義操作。（2）Pagination分頁。當(dāng)數(shù)據(jù)量過多時(shí)，使用分頁分解數(shù)據(jù)。（3）Dialog對話框。在保留當(dāng)前頁面狀態(tài)的情況下，告知用戶并承載相關(guān)操作。（4）Form表單。由輸入框、單選按鈕等控件組成，用以收集、校驗(yàn)、提交數(shù)據(jù)。（5）Container布局容器。用于頁面布局，方便快速搭建頁面的基本結(jié)構(gòu)。11.2.2Vue組件庫ElementVue路由VueRouter是Vue的官方路由，Vue路由負(fù)責(zé)將用戶的瀏覽器URL與其內(nèi)容定義的組件進(jìn)行映射，

VueRouter由以下三部分組成。（1）VueRouter：路由器類，根據(jù)路由請求在路由視圖中動態(tài)渲染選中的組件。（2）<router-link>：請求鏈接組件，瀏覽器會解析成<a>。（3）<router-view>：動態(tài)視圖組件，用來渲染展示與路由路徑對應(yīng)的組件。圖

11-10

Vue路由組件11.2.2Vue組件庫ElementVue路由的使用步驟（1）安裝Vue路由npminstallvue-router@3.5.1（2）定義路由：在“src→router”目錄下的index.js文件中定義路由constroutes=[{path:'/dept',