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 之间的数据绑定。

Slog33_支配vue框架初阶项目之博客网站-注册页面-数据关联

开发环境MacOS(High Sierra 10.13.5)

须要的信息和信息源：

开始编码

欢迎关注个人微信公众号 ArthurSlog

若是你喜欢个人文章欢迎点赞留言

谢谢

Slog33_支配vue框架初阶项目之博客网站-注册页面-数据关联

开发环境MacOS(High Sierra 10.13.5)

须要的信息和信息源：

开始编码

欢迎关注个人微信公众号 ArthurSlog

若是你喜欢个人文章 欢迎点赞 留言

谢谢

若是你喜欢个人文章欢迎点赞留言