Slog34_支配vue框架初階項目之博客網站-註冊頁面-先後端的數據交互
- ArthurSlog
- SLog-34
- Year·1
- Guangzhou·China
- Aug 10th 2018
沉睡的獅子 即將醒來 而世界將爲之震撼css
開發環境MacOS(High Sierra 10.13.5)
須要的信息和信息源：
- HTTP概述
- HTTP
- 互聯網是如何工做的
- 萬維網是如何工做的
- 統一資源定位符(URL)
- 什麼是超連接
- 建立超連接
- AJAX是異步的JavaScript和XML（Asynchronous JavaScript And XML）
- XMLHttpRequest
- Using files from web applications
開始編碼
- 在Slog33裏，使用了 vue.js 框架讓 html 文件裏的元素和 js 文件裏的代碼互相關聯，以便於在 js 文件裏使用 js 代碼對 html 文件裏的元素進行控制；
- 在 js 文件裏，使用 vue.js 的規則編寫 js 代碼，在這裏就有個問題了，api是參考 webAPI 仍是 vue.js 框架的 API？這個問題，留着在開發過程當中解決
- 在 js 裏編寫的 js 代碼，其實作的事情就是 「獲取 html 文件裏元素的數據」、「獲取 html 文件裏元素的數據，並對數據進行處理」、「獲取 html 文件裏元素的數據，並傳送給服務端」、「獲取 html 文件裏元素的數據，並傳送給服務端，等待接收服務端傳來的數據」 等這些操做
- 上面說的這些東西不須要背（由於你也背不住），只要在開發過程當中參照 vue.js官方文檔 並結合 web規範就能夠編寫須要的功能，通常狀況下，這些文檔都是相似於說明說或者字典的存在，然而....，並非每一個人都會按照這樣的思路去作，若是你以爲有更適合你本身的方法，何妨一試，不過請記得控制你的時間成本
- 若是你根據我Slog33中的 html 文件修改，最終的結果是數據關聯會有一點問題，因此先讓咱們把問題先解決（目前爲止，咱們說的只是前端的 html 和 js）
signup.htmlhtml
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="./css/style.css">
<!-- 開發環境版本，包含了有幫助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<title>signup_ArthurSlog</title>
</head>
<body>
<div id="signup-container">
<div>This is signup's page by ArthurSlog</div>
<p>Singup</p>
<form id="form" v-on:submit="addUser">
<br>
<div>
Account: {{ name }}
<br>
<input type="text" v-model="name" placeholder="username">
</div>
<br>
<br>
<div>
Password: {{ password }}
<br>
<input type="text" v-model="password" placeholder="password">
</div>
<br>
<br>
<div>
Again Password: {{ repassword }}
<br>
<input type="text" v-model="repassword" placeholder="repassword">
</div>
<br>
<br>
<div>
First Name: {{ firstname }}
<br>
<input type="text" v-model="firstname" placeholder="firstname">
</div>
<br>
<br>
<div>
Last Name: {{ lastname }}
<br>
<input type="text" v-model="lastname" placeholder="lastname">
</div>
<br>
<br>
<div>
Birthday: {{ birthday }}
<br>
<input type="text" v-model="birthday" placeholder="2000/08/08">
</div>
<br>
<br>
<div>
<span>Sex: {{ currentSex }}</span>
<br>
<input type="radio" id="sex" value="male" v-model="currentSex">
<label for="sex">male</label>
<br>
<input type="radio" id="sex" value="female" v-model="currentSex">
<label for="sex">female</label>
</div>
<br>
<br>
<div>
<span>Age: {{ currentAge }}</span>
<br>
<select v-model="currentAge" id="age">
<option disabled value="">Select</option>
<option v-for="age in ages">{{ age }}</option>
</select>
</div>
<br>
<br>
<div>
Wechart: {{ wechart }}
<br>
<input type="text" v-model="wechart" placeholder="wechart's name">
</div>
<br>
<br>
<div>
QQ: {{ qq }}
<br>
<input type="text" v-model="qq" placeholder="12345678">
</div>
<br>
<br>
<div>
Email: {{ email }}
<br>
<input type="text" v-model="email" placeholder="12345678@qq.com">
</div>
<br>
<br>
<div>
Contury: {{ contury }}
<br>
<input type="text" v-model="contury" placeholder="China">
</div>
<br>
<br>
<div>
Address: {{ address }}
<br>
<input type="text" v-model="address" placeholder="Guangzhou">
</div>
<br>
<br>
<div>
Phone: {{ phone }}
<br>
<input type="text" v-model="phone" placeholder="138********">
</div>
<br>
<br>
<div>
Websize: {{ websize }}
<br>
<input type="text" v-model="websize" placeholder="xxx.com">
</div>
<br>
<br>
<div>
Github: {{ github }}
<br>
<input type="text" v-model="github" placeholder="Github's URl">
</div>
<br>
<br>
<div>
Bio: {{ bio }}
<br>
<input type="text" v-model="bio" placeholder="This is the world~">
</div>
<br>
<br>
<input type="submit" value="完成註冊">
</form>
<a href="./index.html">Return index's page</a>
<br>
<br>
<div>
<ul>
<li v-for="record in commits">
<span class="username">
{{ record }}
</span>
</li>
</ul>
</div>
</div>
<script src="./js/signup.js"></script>
</body>
</html>
- 再看一下 js 文件
signup.js前端
var host = 'http://127.0.0.1:3000/signup?';
var signup_container = new Vue({
el: '#signup-container',
data: {
name: '',
password: '',
repassword: '',
firstname: '',
lastname: '',
birthday: '',
sexs: ['male', 'female'],
currentSex: 'male',
ages: ['1', '2', '3', '4', '5', '6', '7', '8',
'9', '10', '11', '12', '13', '14', '15', '16', '17', '18'],
currentAge: '18',
wechart: '',
qq: '',
email: '',
contury: '',
address: '',
phone: '',
websize: '',
github: '',
bio: '',
commits: ['null', 'null']
},
methods: {
addUser: function () {
var xhr = new XMLHttpRequest()
xhr.open('GET', host + 'name=' + this.name + '&password=' + this.password + '&firstname=' +
this.firstname + '&lastname=' + this.lastname + '&birthday=' + this.birthday
+ '&sex=' + this.currentSex + '&age=' + this.currentAge + '&wechart=' + this.wechart
+ '&qq=' + this.qq + '&email=' + this.email + '&contury=' + this.contury
+ '&address=' + this.address + '&phone=' + this.phone + '&websize=' + this.websize
+ '&github=' + this.github + '&bio=' + this.bio, true)
xhr.send()
}
}
})
- 注意看到 html 文件裏的 form 部分
<form id="form" v-on:submit="addUser">
...
<input type="submit" value="完成註冊">
</form>
- 在這裏 v-on:submit 屬於 vue.js 的模版語法，做用是 「能夠用 v-on 指令監聽 DOM 事件，並在觸發時運行一些 JavaScript 代碼」
- 像上面這樣，在 js 文件裏的 「method」 裏建立一個 addUser 的方法，當你在 html 上點擊完成註冊的按鈕的時候，就會調用 addUser 這個方法，方法就會執行你本身編寫的邏輯
- 咱們如今須要讓這個 addUser 方法把咱們填寫的註冊信息，傳送給服務端，並等待服務端的執行結果（成功或者失敗），而後在頁面上顯示出來執行的結果
- 去哪裏找到這樣的方法呢？首先想到的是 webAPI，試着去官網找一下
- 再來看看，根據 vue.js 框架的介紹中，vue 的 js 文件結構，所以在方法中：
methods: {
addUser: function () {
var xhr = new XMLHttpRequest()
xhr.open('GET', host + 'name=' + this.name + '&password=' + this.password + '&firstname=' +
this.firstname + '&lastname=' + this.lastname + '&birthday=' + this.birthday
+ '&sex=' + this.currentSex + '&age=' + this.currentAge + '&wechart=' + this.wechart
+ '&qq=' + this.qq + '&email=' + this.email + '&contury=' + this.contury
+ '&address=' + this.address + '&phone=' + this.phone + '&websize=' + this.websize
+ '&github=' + this.github + '&bio=' + this.bio, true)
xhr.send()
}
}
- XMLHttpRequest標準定義了一個API，它提供腳本客戶端功能，用於在客戶端和服務器之間傳輸數據；其中的 xhr.open() 方法，其實就是給服務端發送 http 請求，因此使用這個方法的時候，會生以下這樣的請求，併發送給服務端：
http://127.0.0.1:3000/signup?name=???&password=???... 這後面的依此類推，我就不寫了，由於很長
- 上面的請求中，須要包含用戶輸入的數據，好比name、password等等，其中的 ？？？三個問號，就是表明用戶輸入的具體的值，在方法中，咱們使用 this.name 這樣的語法來獲取用戶輸入的值，爲何不能直接使用 name 呢？由於我試過了，不行，哈哈，之後會解釋的
xhr.open('GET', host + 'name=' + name + '&password=' + password + '&firstname=' +
firstname + '&lastname=' + lastname + '&birthday=' + birthday
+ '&sex=' + currentSex + '&age=' + currentAge + '&wechart=' + wechart
+ '&qq=' + qq + '&email=' + email + '&contury=' + contury
+ '&address=' + address + '&phone=' + phone + '&websize=' + websize
+ '&github=' + github + '&bio=' + bio, true)
- 再來看一下 xhr.send() 方法，參考 官方說明
XMLHttpRequest.send() 方法用於發送 HTTP 請求。若是是異步請求（默認爲異步請求），則此方法會在請求發送後當即返回；若是是同步請求，則此方法直到響應到達後纔會返回。XMLHttpRequest.send() 方法接受一個可選的參數，其做爲請求主體；若是請求方法是 GET 或者 HEAD，則應將請求主體設置爲 null。 若是沒有使用setRequestHeader（）方法設置 Accept 頭部信息，則會發送帶有* / *的Accept 頭部。
- ok，如今啓動你的服務器（server路徑下）
node index.js
- 而後，打開瀏覽器，輸入 127.0.0.1:3000，進入註冊界面，填寫完你的註冊信息，點擊「完成註冊」按鈕
- 如今，返回主頁，進入登錄界面，填寫你剛剛註冊的帳號和密碼，點擊登錄，正常狀況下，登錄成功後會返回一串 json 字符串
- 至此，咱們在使用 vue.js 框架的狀況下，實現了先後端的數據交互。
歡迎關注個人微信公衆號 ArthurSlog
若是你喜歡個人文章 歡迎點贊 留言
謝謝
相關文章
- 1. Slog36_支配vue框架初階項目之博客網站-註冊頁面-合併登錄和註冊頁面
- 2. 支配vue框架初階項目之博客網站-註冊功能
- 3. Slog33_支配vue框架初階項目之博客網站-註冊頁面-數據關聯
- 4. Slog30_支配vue框架初階項目之博客網站-註冊頁面-選擇框
- 5. Slog29_支配vue框架初階項目之博客網站-註冊頁面-單選按鈕
- 6. Slog31_支配vue框架初階項目之博客網站-註冊頁面-風格
- 7. Slog37_支配vue框架初階項目之博客網站-註冊頁面-合併首頁、登錄和註冊頁面
- 8. 支配vue框架初階項目之博客網站-登錄功能
- 9. Slog50_支配vue框架初階項目之博客網站-單頁-客戶端（瀏覽器）更新頭像2
- 10. Slog43_支配vue框架初階項目之博客網站-單頁-載入要上傳的圖片
- 更多相關文章...
- • 網站 數據庫 - 網站主機教程
- • XSLT - 在客戶端 - XSLT 教程
- • 互聯網組織的未來：剖析GitHub員工的任性之源
- • 使用阿里雲OSS+CDN部署前端頁面與加速靜態資源
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
最新文章
- 1. 外部其他進程嵌入到qt FindWindow獲得窗口句柄 報錯無法鏈接的外部符號 [email protected] 無法被([email protected]@[email protected]@@引用
- 2. UVa 11524 - InCircle
- 3. The Monocycle（bfs）
- 4. VEC-C滑窗
- 5. 堆排序的應用-TOPK問題
- 6. 實例演示ElasticSearch索引查詢term,match,match_phase,query_string之間的區別
- 7. 數學基礎知識 集合
- 8. amazeUI 復擇框問題解決
- 9. 揹包問題理解
- 10. 算數平均-幾何平均不等式的證明,從麥克勞林到柯西
歡迎關注本站公眾號,獲取更多信息
相關文章
- 1. Slog36_支配vue框架初階項目之博客網站-註冊頁面-合併登錄和註冊頁面
- 2. 支配vue框架初階項目之博客網站-註冊功能
- 3. Slog33_支配vue框架初階項目之博客網站-註冊頁面-數據關聯
- 4. Slog30_支配vue框架初階項目之博客網站-註冊頁面-選擇框
- 5. Slog29_支配vue框架初階項目之博客網站-註冊頁面-單選按鈕
- 6. Slog31_支配vue框架初階項目之博客網站-註冊頁面-風格
- 7. Slog37_支配vue框架初階項目之博客網站-註冊頁面-合併首頁、登錄和註冊頁面
- 8. 支配vue框架初階項目之博客網站-登錄功能
- 9. Slog50_支配vue框架初階項目之博客網站-單頁-客戶端（瀏覽器）更新頭像2
- 10. Slog43_支配vue框架初階項目之博客網站-單頁-載入要上傳的圖片