Slog33_支配vue框架初階項目之博客網站-註冊頁面-數據關聯

時間  2020-03-28
標籤 slog33 slog 支配 vue 框架 項目 博客 網站 註冊 頁面 數據 關聯 欄目 網站開發 简体版
原文   原文鏈接
  • ArthurSlog
  • SLog-33
  • Year·1
  • Guangzhou·China
  • Aug 9th 2018

用七八十年提交一份人生的答卷 這是一場開卷 沒有監考老師 有的 是在意你的人 我想 答案並非最重要的 重要的是一塊兒答卷的這羣人 特別是真正在意你的人 當答卷提交的那一刻 也許再也不是忐忑不安 而是坦然以對 那些經歷的種種會一直溫暖着人心css

開發環境MacOS(High Sierra 10.13.5)

須要的信息和信息源：

  • (必看，這個已經寫的夠明白的了)HTTP,超文本傳輸​​協議（HTTP）是用於傳輸諸如HTML的超媒體文檔的應用層協議。它被設計用於Web瀏覽器和Web服務器之間的通訊，但它也能夠用於其餘目的。 HTTP遵循經典的客戶端-服務端模型，客戶端打開一個鏈接以發出請求，而後等待它收到服務器端響應。 HTTP是無狀態協議，意味着服務器不會在兩個請求之間保留任何數據（狀態）。雖然一般基於TCP / IP層，但能夠在任何可靠的傳輸層上使用; 也就是說，一個不會靜默丟失消息的協議，如UDP。
  • 引用 mozilla HTTP概述 上的說明:

概述：html

「網絡服務器（Web server）」能夠代指硬件或軟件，然而它們都是協同工做的。

在硬件部分，一個網絡服務器是一個用來存儲網站的組成文件（好比說 HTML 文檔，圖片，CSS 樣式表，和 JavaScript 文件）以及交付它們到終端用戶的設備的計算機。它跟互聯網鏈接並能夠經過域名像 mozilla.org 來被訪問。
在軟件部分，一個網絡服務器包括幾個控制網絡用戶如何訪問託管文件的部分，至少是一個 HTTP 服務器 [HTTP server]。一個 HTTP 服務器是一個能理解URLs (網絡地址) 和 HTTP (你的瀏覽器查看網頁時所用的協議) 的軟件。
在最基礎的層次，每當一個瀏覽器須要一個網絡服務器上的託管文件時，瀏覽器會經過 HTTP 請求這個文件。當這個請求到達了正確的網絡服務器（硬件），這個 HTTP 服務器（軟件）返回所請求的文檔，一樣經過 HTTP。

Basic representation of a client/server connection through HTTP

要發佈一個網站，你須要一個靜態或動態的服務器。

靜態網絡服務器（static web server），或者堆棧，由一個計算機（硬件）和一個 HTTP 服務器（軟件）組成。咱們稱它爲 「靜態」 由於這個服務器把它的託管文件 「保持原樣」 地傳送到你的瀏覽器。

動態網絡服務器（dynamic web server） 由一個靜態的網絡服務器加上額外的軟件組成，最廣泛的是一個應用服務器 [application server] 和一個數據庫 [database]。咱們稱它爲 「動態」 由於這個應用服務器會在經過 HTTP 服務器傳送託管文件到你的瀏覽器以前對這些託管文件進行更新。

舉個例子，要生成你在瀏覽器中看到的最終網頁，應用服務器或許會用一個數據庫中的內容填充一個 HTML 模板。網站像 MDN 或者維基百科 [Wikipedia] 有成千上萬的網頁，可是它們不是真正的 HTML 文檔，它們只是少數的 HTML 模板以及一個巨大的數據庫。這樣的設置讓它更快更簡單地維護以及交付內容。

託管文件：vue

一個網絡服務器首先須要存儲這個網站的文件，也就是說全部的 HTML 文檔和它們的相關資源 [related assets]，包括圖片，CSS 樣式表，JavaScript 文件，字形 [fonts] 以及影像。

嚴格來講，你能夠在你本身的計算機上託管全部的這些文件，可是在一個專用的網絡服務器上存儲它們會方便得多，由於它

會一直啓動和運行
會一直與互聯網鏈接
會一直擁有同樣的 IP 地址（不是全部的 ISPs 都會爲家庭線提供一個固定的 IP 地址）
由一個第三方提供者維護
由於全部的這些緣由，尋找一個優秀的託管提供者是創建你的網站的一個重要部分。比較不一樣服務公司的提議並選擇一個適合你的需求和預算的提議（服務的價格從免費到每個月上萬美金不等）。
一旦你設置好一個網絡託管解決方案，你只須要去上傳你的文件到你的網絡服務器。

HTTP通訊：git

第二點，一個網絡服務器提供了 HTTP（超文本傳輸協議）支持。正如它的名字暗示，HTTP 明確提出瞭如何在兩臺計算機間傳輸超文本（好比說連接的網絡文檔 [linked web documents]）。

一個協議Protocol是一套爲了在兩臺計算機間交流而制定的規則。 HTTP 是一個文本化的 [textual]，無狀態的 [stateless] 協議。

文本化
全部的命令都是純文本的 [plain-text] 和人類可讀的 [human-readable]。
無狀態
不管是服務器仍是客戶都不會記住以前的交流。舉個例子，僅依靠 HTTP，一個服務器不能記住你輸入的密碼或者你正處於業務中的哪一步。你須要一個應用服務器來進行這樣的工做。（咱們會在往後的文章中涵蓋這類的技術。）

HTTP 爲客戶和服務器間的如何溝通提供清晰的規則。咱們會在往後的一篇技術文章 中覆蓋 HTTP 自己。就目前而言，只須要知道這幾點：

只有用戶能夠制定 HTTP 請求，而後只會送到服務器。服務器只能夠回覆一個客戶的 HTTP 請求。
當經過 HTTP 請求一個文件時，客戶必須提供這個文件的URL。
網絡服務器必須應答每個 HTTP 請求，至少也要回復一個錯誤信息。

在一個網絡服務器上，HTTP 服務器要爲處理和應答到來的請求負責任。

當收到一個請求時，一個 HTTP 服務器首先要檢查所請求的 URL 是否與一個存在的文件相匹配。
若是是，網絡服務器會傳送文件內容回到瀏覽器。若是不是，一個應用服務器會創建必要的文件。
若是兩種處理都不可能，網絡服務器會返回一個錯誤信息到瀏覽器，最多見的是 「404 未找到」 ["404 Not Found"]。（這錯誤太常見以致於不少網頁設計者花費許多時間去設計 404 錯誤頁面。

靜態內容和動態內容：github

粗略地說，一個服務器能夠提供靜態或者動態的內容。「靜態」 意味着 「保持原樣地提供」。靜態的網站是最容易創建的，因此咱們建議你製做一個靜態的網站做爲你的第一個網站。

「動態」 意味着服務器會處理內容甚至實時地從一個數據庫中產生它。這個解決方案提供了更多的靈活性，可是技術堆棧變得更難去處理，讓創建網站更驚人地複雜。

以你正在閱讀的頁面爲例子。在正在託管它的網絡服務器裏，有一個應用服務器會從數據庫提取文章內容，安排它的佈局，把它放置在一些 HTML 模板中，而後爲你傳輸結果。在這裏，這個應用服務器叫作 Kuma 而且是由 Python （使用 Django 構架) 構建的。Mozilla 團隊爲了 MDN 的特殊要求開發 Kuma，可是這裏有不少類似的創建在不少其餘技術之上的應用。

這裏有太多的應用服務器，因此提供一個具體的服務器是挺難的。有些應用服務器迎合具體的網站類別，像是博客，百科或者電子商店；其餘的應用服務器，叫作 CMSs（內容管理系統 [content management systems]），則更加通用。若是你正在開發一個動態網站，花一些時間去選擇適合你需求的工具。除非你想要學習一些網絡服務器編程 [web server programming]（而這自己就是一個使人興奮的領域！），你不須要去建立你本身的應用服務器。這只是在從新創造輪子。

開始編碼

  • 修改 signup.html 頁面的代碼和 signup.js 的代碼，讓 html 文件裏的數據和 js 裏的代碼關聯起來，以便於咱們在 js 文件裏去控制 html 文件裏的數據，並能把用戶在 html 頁面上輸入的數據，用 http 協議傳送給服務端

signup.htmlweb

<!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 action="http://127.0.0.1:3000/signup" method="GET">

            <br>
            <div>
                Account: {{ account }}
                <br>
                <input type="text" name="name" placeholder="username">
            </div>
            <br>

            <br>
            <div>
                Password: {{ password }}
                <br>
                <input type="text" name="password" placeholder="password">
            </div>
            <br>

            <br>
            <div>
                Again Password: {{ repassword }}
                <br>
                <input type="text" name="repassword" placeholder="repassword">
            </div>
            <br>


            <br>
            <div>
                First Name: {{ firstname }}
                <br>
                <input type="text" name="firstname" placeholder="firstname">
            </div>
            <br>

            <br>
            <div>
                Last Name: {{ lastname }}
                <br>
                <input type="text" name="lastname" placeholder="lastname">
            </div>
            <br>

            <br>
            <div>
                Birthday: {{ birthday }}
                <br>
                <input type="text" name="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" name="wechart" placeholder="wechart's name">
            </div>
            <br>

            <br>
            <div>
                QQ: {{ qq }}
                <br>
                <input type="text" name="qq" placeholder="12345678">
            </div>
            <br>

            <br>
            <div>
                Email: {{ email }}
                <br>
                <input type="text" name="email" placeholder="12345678@qq.com">
            </div>
            <br>

            <br>
            <div>
                Contury: {{ contury }}
                <br>
                <input type="text" name="contury" placeholder="China">
            </div>
            <br>

            <br>
            <div>
                Address: {{ address }}
                <br>
                <input type="text" name="address" placeholder="Guangzhou">
            </div>
            <br>

            <br>
            <div>
                Phone: {{ phone }}
                <br>
                <input type="text" name="phone" placeholder="138********">
            </div>
            <br>

            <br>
            <div>
                Websize: {{ websize }}
                <br>
                <input type="text" name="websize" placeholder="xxx.com">
            </div>
            <br>

            <br>
            <div>
                Github: {{ github }}
                <br>
                <input type="text" name="github" placeholder="Github's URl">
            </div>
            <br>

            <br>
            <div>
                Bio: {{ bio }}
                <br>
                <input type="text" name="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>

    <script src="./js/signup.js"></script>
</body>

</html>
  • 於此同時，咱們把 html 裏的數據與 js 關聯起來，以便後續在 js 裏處理這些數據，把數據傳給服務端

signup.js數據庫

var signup_container = new Vue({
    el: '#signup-container',
    data: {
      account: '',
      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: ''
    }
  })
  • 打開 signup.html 頁面，看一下頁面是否正常，下一節繼續
  • 至此，咱們完成了 signup.html 與 signup.js 之間的數據綁定。

歡迎關注個人微信公衆號 ArthurSlog

ArthurSlog

若是你喜歡個人文章 歡迎點贊 留言

謝謝

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程