《 物聯(lián)網(wǎng)集成系統(tǒng)設(shè)計(jì) 》-11系統(tǒng)前端頁面_第1頁
《 物聯(lián)網(wǎng)集成系統(tǒng)設(shè)計(jì) 》-11系統(tǒng)前端頁面_第2頁
《 物聯(lián)網(wǎng)集成系統(tǒng)設(shè)計(jì) 》-11系統(tǒng)前端頁面_第3頁
《 物聯(lián)網(wǎng)集成系統(tǒng)設(shè)計(jì) 》-11系統(tǒng)前端頁面_第4頁
《 物聯(lián)網(wǎng)集成系統(tǒng)設(shè)計(jì) 》-11系統(tǒng)前端頁面_第5頁
已閱讀5頁，還剩23頁未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

版權(quán)說明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請(qǐng)進(jìn)行舉報(bào)或認(rèn)領(lǐng)

文檔簡(jiǎn)介

4前端控制頁面5教學(xué)目標(biāo)實(shí)現(xiàn)服務(wù)器功能前端查詢頁面2JavaScript函數(shù)實(shí)現(xiàn)Vus.js中的Ajax方法1HTML簡(jiǎn)單使用3添加標(biāo)題難點(diǎn)數(shù)據(jù)綁定及更新方法重點(diǎn)數(shù)據(jù)綁定及Ajax技術(shù)Socket接收和發(fā)送HTML簡(jiǎn)單使用

01HTML的格式<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>頁面標(biāo)題</title></head><body><h1>這是一個(gè)標(biāo)題</h1><p>這是一個(gè)段落。</p><buttontype="button">這是一個(gè)按鈕</button></body></html>

HTML的格式<!DOCTYPEhtml>聲明為HTML5文檔，同時(shí)表示不區(qū)分大小寫。<html>頁面的根元素，所有的HTML標(biāo)簽都要寫在<html></html>之間。<head>包含了文檔的元（meta）數(shù)據(jù)，如<metacharset="utf-8">

定義網(wǎng)頁編碼格式為utf-8。<head></head>之間的代碼對(duì)于機(jī)器是可讀的，但不會(huì)顯示到頁面。<title>描述了文檔的標(biāo)題，可以看到圖8-1上，頁面最上面顯示“頁面標(biāo)題”的位置。要標(biāo)簽顯示想要的文字，可以把文字寫在<head>元素里，使用<title>、</title>之間。<body>包含了可見的頁面內(nèi)容，也就是地址欄下的空白區(qū)域。把要顯示的標(biāo)簽元素都在<body></body>間編輯。<h1>定義一個(gè)大標(biāo)題，顯示文字“這是一個(gè)標(biāo)題”內(nèi)容。<p>定義一個(gè)段落，顯示文字“這是一個(gè)段落”。<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>頁面標(biāo)題</title></head><body><h1>這是一個(gè)標(biāo)題</h1><p>這是一個(gè)段落。</p><buttontype="button">這是一個(gè)按鈕</button></body></html>

按鈕<buttontype="button">這是一個(gè)按鈕</button>普通按鈕按鈕名稱表格<tableborder="2"><tr><td>第一行第一列</td><td>第一行第二列</td></tr><tr><td>第二行第一列</td><td>第二行第二列</td></tr></table>table是表格標(biāo)簽tr代表行td代表列JavaScript函數(shù)實(shí)現(xiàn)02JavaScript的使用

JavaScript是一種輕量級(jí)的編程語言，可插入HTML頁面的編程代碼被瀏覽器執(zhí)行，基于對(duì)象和事件驅(qū)動(dòng)的客戶端語言。JavaScript不與服務(wù)器交互，只在客戶端做簡(jiǎn)單的互動(dòng)應(yīng)用。所有現(xiàn)代的HTML頁面都使用JavaScript。

使用<script></script>標(biāo)簽就能在html頁面使用JavaScript語言。

JavaScript的使用<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>html頁面</title><script>varx=0;functionmyFunction(){

document.getElementById("demo").innerHTML=++x;}</script></head><body><h1>按鈕按了多少次</h1><pid="demo">這是一個(gè)段落。</p><buttontype="button"onclick="myFunction()">這是一個(gè)按鈕</button>

</body></html>使用JavaScript語言編寫了函數(shù)，點(diǎn)擊按鍵就會(huì)運(yùn)行JavaScript中函數(shù)myFunction的代碼進(jìn)行段落文字替換。每次點(diǎn)擊按鈕都會(huì)使段落顯示的數(shù)字加1。初始運(yùn)行效果如圖1，當(dāng)點(diǎn)擊按鈕5次后，如圖2所示。圖1圖2Vus.js中的Ajax方法03Vus.js的使用

Vue.js是一款多用途且性能高的漸進(jìn)式的JavaScript框架。也可以看作Vue.js是JavaScript的一個(gè)庫。相比JavaScript而言，使用Vue.js只要更少的代碼就能實(shí)現(xiàn)更豐富的功能。

編寫Vus.js代碼必須使用<script>標(biāo)簽引用Vus.js的庫文件，直接在當(dāng)前Html文件中加入<scriptsrc="/vue/2.4.2/vue.min.js"></script>，也可以把庫下載到本地文件夾，通過修改src參數(shù)為本地庫的相對(duì)路徑引用Vus.js的庫文件。Vue.js數(shù)據(jù)綁定<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>Vue數(shù)據(jù)顯示</title><scriptsrc="/vue/2.4.2/vue.min.js"></script></head><body><divid="display">

<p>{{info}}</p></div>

接上圖代碼

<script>newVue({

el:'#display',

data:{

info:'Internetofthingsapplicationsystem!'

}})</script></body></html>Vue.js數(shù)據(jù)綁定1.html的bady里有一個(gè)<div>標(biāo)簽表示區(qū)域塊，這個(gè)區(qū)域塊id為display。2.區(qū)域塊里有段落標(biāo)簽<p>，段落的內(nèi)容根據(jù){{info}}來決定。3.<script>標(biāo)簽里一開始使用newVue({})實(shí)例化Vue。4.參數(shù)e1，表示作用對(duì)象，它的值是'#display'，表示Vus.js代碼只對(duì)html里面id為display的區(qū)域起作用。5.參數(shù)data，表示數(shù)據(jù)，data中可以設(shè)置多個(gè)數(shù)據(jù)，也就是多個(gè)變量，每個(gè)變量都可以賦值。6.在html里使用雙括號(hào)表示這些變量的名稱，就可以在hmtl中顯示data里相應(yīng)變量的值，這種顯示數(shù)據(jù)的方法叫數(shù)據(jù)綁定。Vue.js中的Ajax方法什么是Ajax？

Ajax不是新的編程語言，而是一種異步的JavaScript和XML的Web數(shù)據(jù)交互技術(shù)。所以，Ajax沒有具體的語法方式。Web頁面存在于服務(wù)器，在本地計(jì)算機(jī)使用瀏覽器請(qǐng)求頁面。每次用戶對(duì)頁面的操作，網(wǎng)絡(luò)上信息的交互量非常大，頁面響應(yīng)就不及時(shí)。使用Ajax的最大優(yōu)點(diǎn)，不需要重載（刷新）整個(gè)頁面，只更新數(shù)據(jù)改變的頁面部分。這使得Web應(yīng)用程序更為快速地回應(yīng)用戶請(qǐng)求，避免了在網(wǎng)絡(luò)上發(fā)送那些沒有更改的頁面區(qū)域的信息。例如，整個(gè)頁面有三個(gè)區(qū)域，當(dāng)用戶做了一個(gè)點(diǎn)擊動(dòng)作時(shí)，A區(qū)域和B區(qū)域不需要改變，只有C區(qū)域會(huì)與點(diǎn)擊前有顯示變化。使用Ajax更新頁面時(shí)，A區(qū)域和B區(qū)域的文字、圖片或者視頻將不會(huì)重加載。本地計(jì)算機(jī)只會(huì)接收到C區(qū)域顯示更新的資源，插入顯示到C區(qū)域中。把/try/try.php?filename=vue2-ajax-axios3中返回的數(shù)據(jù)顯示到info綁定的頁面位置<divid="app"><h1>網(wǎng)站列表</h1><divv-for="siteininfo">{{}}</div></div><scripttype="text/javascript">newVue({el:'#app',data(){return{info:null}},mounted(){axios.get('/try/ajax/json_demo.json').then(response=>(=response.data.sites)).catch(function(error){//請(qǐng)求失敗處理console.log(error);});}})</script>Vue.js+ajax顯示后端數(shù)據(jù)前端查詢功能04Vue.js中的Ajax方法的使用<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>VueAjax顯示方法</title><scriptsrc="/vue/2.4.2/vue.min.js"></script><scriptsrc="/axios/0.18.0/axios.min.js"></script></head><body><divid="app">{{allData}}</div>}})</script></body></html>

接上圖代碼<scripttype="text/javascript">newVue({el:'#app',data(){return{allData:null}},mounted(){axios.get('http://:8080/demo/findAll').then(response=>(this.allData=response)).catch(function(error){//請(qǐng)求失敗處理console.log(error);});從特定鏈接取到數(shù)據(jù)賦值到allData使用allData文本插值顯示數(shù)據(jù)顯示的數(shù)據(jù)綁定到變量allDatahttp://:8080/demo/findAll是例程服務(wù)器查詢數(shù)據(jù)的鏈接數(shù)據(jù)的顯示效果

數(shù)據(jù)在data變量里面，每一條記錄都有三個(gè)值，分別是id、datetime。結(jié)合表格知識(shí)可以把以上數(shù)據(jù)顯示清楚。Vue.js中循環(huán)的用法HTML主要代碼<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>Vue循環(huán)語句</title><scriptsrc="/vue/2.2.2/vue.min.js"></script></head><body><divid="app">

<H1v-for="bookinbooks">{{}}</H1></div>

接上圖代碼<script>newVue({el:'#app',data:{books:[{name:'《物聯(lián)網(wǎng)應(yīng)用系統(tǒng)》'},{name:'《電子電路技術(shù)》'},{name:'《Web技術(shù)》'}]}})</script></body></html>books數(shù)組有三個(gè)元素使用v-for循環(huán)遍歷info.data中的每一個(gè)元素使用H1標(biāo)簽顯個(gè)元素的name值在eclipse中建頁面

先在服務(wù)器上建立一個(gè)文件夾，名字叫做“static”的文件夾，用于存放HTML文件。文件夾的名字是特定的，不能使用其它名稱代替。在eclipse中建頁面

在static文件夾中新建一個(gè)HTML文件，新建后就可以編輯此頁面。Vue.js中Ajax+v-for+表格顯示記錄HTML主要代碼<divid="app"><tableborder="1"><tr><th>序號(hào)</th><th>數(shù)據(jù)</th><th>時(shí)間</th></tr><trv-for="siteininfo.data"><td>{{site.id}}</td><td>{{site.data}}</td><td>{{site.datetime}}</td></tr></table></div>

接上圖代碼<scripttype="text/javascript">newVue({el:'#app',data(){return{info:null}},mounted(){axios.get('/demo/findAll').then(response=>(=response)).catch(function(error){//請(qǐng)求失敗處理console.log(error);});}})</script>/demo/findAll是例程服務(wù)器查詢數(shù)據(jù)的鏈接，由于web服務(wù)器與數(shù)據(jù)服務(wù)器都在eclipse中，可以使用間接地址的方式訪問本機(jī)。表頭使用v-for循環(huán)遍歷info.data中的每一個(gè)元素三個(gè)數(shù)據(jù)值按列顯示前端控制功能05按鈕響應(yīng)方法<

溫馨提示

  • 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請(qǐng)下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請(qǐng)聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁內(nèi)容里面會(huì)有圖紙預(yù)覽，若沒有圖紙預(yù)覽就沒有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫網(wǎng)僅提供信息存儲(chǔ)空間，僅對(duì)用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理，對(duì)用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對(duì)任何下載內(nèi)容負(fù)責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請(qǐng)與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時(shí)也不承擔(dān)用戶因使用這些下載資源對(duì)自己和他人造成任何形式的傷害或損失。

最新文檔

評(píng)論

0/150

提交評(píng)論