Slog31_支配vue框架初階項目之博客網站-註冊頁面-風格

時間  2019-12-07
標籤 slog31 slog 支配 vue 框架 項目 博客 網站 註冊 頁面 風格 欄目 網站開發 简体版
原文   原文鏈接
  • ArthurSlog
  • SLog-31
  • Year·1
  • Guangzhou·China
  • Aug 6th 2018

關注微信公衆號「ArthurSlog」

遲到過久 就沒必要到了css

開發環境MacOS(High Sierra 10.13.5)

須要的信息和信息源：

  • Slog1_如何使用nodejs與mysql進行數據交互
  • Slog4_使用後端框架KOA實現靜態web服務器
  • Slog6_使用vue前端框架實現單頁應用(SPA)
  • Slog24
  • Slog25
  • Slog26
前端部分：
後端部分：
  • 數據庫數據交互模塊-部署、配置
  • 靜態web服務器
  • 用戶註冊模塊
  • 用戶登錄模塊
  • 統計分析模塊
  • 用戶狀態模塊-超時、無效、非法
關鍵思路

開始編碼

  • 切換至 client 文件夾路徑下
cd client
  • 修改和調整 signup.html 文件

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

            <br>
            <div>
                Account:
                <br>
                <input type="text" name="name">
            </div>
            <br>

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

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


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

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

            <br>
            <div>
                Birthday:
                <br>
                <input type="text" name="birthday">
            </div>
            <br>

            <br>
            <div>
                <span>Sex: {{ sex }}</span>
                <br>
                <input type="radio" id="one" value="Male" v-model="sex">
                <label for="one">Male</label>
                <br>
                <input type="radio" id="two" value="Female" v-model="sex">
                <label for="two">Female</label>
            </div>
            <br>

            <br>
            <div>
                <span>Age: {{ age }}</span>
                <br>
                <select v-model="age" name="age">
                    <option disabled value="">Select</option>
                    <option>1</option>
                    <option>2</option>
                    <option>3</option>
                    <option>4</option>
                    <option>5</option>
                    <option>6</option>
                    <option>7</option>
                    <option>8</option>
                    <option>9</option>
                    <option>10</option>
                    <option>11</option>
                    <option>12</option>
                    <option>13</option>
                    <option>14</option>
                    <option>15</option>
                    <option>16</option>
                    <option>17</option>
                    <option>18</option>
                    <option>19</option>
                </select>
            </div>
            <br>

            <br>
            <div>
                Wechart:
                <br>
                <input type="text" name="wechart">
            </div>
            <br>

            <br>
            <div>
                QQ:
                <br>
                <input type="text" name="qq">
            </div>
            <br>

            <br>
            <div>
                Email:
                <br>
                <input type="text" name="email">
            </div>
            <br>

            <br>
            <div>
                Contury:
                <br>
                <input type="text" name="contury">
            </div>
            <br>

            <br>
            <div>
                Address:
                <br>
                <input type="text" name="address">
            </div>
            <br>

            <br>
            <div>
                Phone:
                <br>
                <input type="text" name="phone">
            </div>
            <br>

            <br>
            <div>
                Websize:
                <br>
                <input type="text" name="websize">
            </div>
            <br>

            <br>
            <div>
                Github:
                <br>
                <input type="text" name="github">
            </div>
            <br>

            <br>
            <div>
                Bio:
                <br>
                <input type="text" name="bio">
            </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>
  • 切換至server文件夾路徑下
cd server
  • 如今，啓動靜態web服務器
node index.js
  • 如今打開瀏覽器，在地址欄輸入 127.0.0.1:3000，正常顯示主頁後，點擊 signup 連接，正常狀況下，signup.html 頁面會顯得更加的簡潔，同時撤掉了多餘的跳轉連接
  • 至此，咱們更新了 signup.html 的頁面風格。

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

ArthurSlog

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

謝謝

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