• ArthurSlog

  • SLog-27

  • 1 Year,

  • Through China,

  • July 30th 2018

Scan the QR code on wechat and follow my official account

Without writing enough code, it is impossible to become a master, only on paper, but write enough code, there are many people on paper

Development Environment MacOS(High Sierra 10.13.5)

Required information and information sources:

  • Slog1_ How does Slog1_ interact with mysql using NodeJS
  • Slog4_ uses the back-end framework KOA to implement a static Web server
  • Slog6_ Uses VUE front-end framework to implement Single-page Application (SPA)
  • Slog24
  • Slog25
  • Slog26
Front end:

  • Statistics page – calculate attribute and listener, https://cn.vuejs.org/v2/guide/computed.html home page: index. HTML

  • Rendering, https://cn.vuejs.org/v2/guide/conditional.html registered interface – conditions: signup. HTML

  • Login interface :signin.html

  • After landing interface – list rendering, https://cn.vuejs.org/v2/guide/list.html user interface: the HTML enthusiast

  • The questionnaire – text, multiline text, checkbox, radio button, checkbox, https://cn.vuejs.org/v2/guide/forms.html: form. HTML

  • Leave the page remind – event handling, https://cn.vuejs.org/v2/guide/events.html

  • Mobile terminal Style compatible – Class and Style binding, https://cn.vuejs.org/v2/guide/class-and-style.html

Back-end part:

  • Database data interaction module – deployment, configuration

  • Static Web server

  • User registration module

  • User login module

  • Statistical analysis module

  • User status module – Timeout, invalid, illegal

  • Ctx. redirect() : refer to the official WebAPI manual to obtain the original WEBPAI API. The CTX in the KOA framework corresponds to the original WebAPI API, or the original WebAPI request and response API

Start coding

  • At present, the basic registration login registration function has been made, but the page is worse than the face of the code farmers, next simple makeup point, let’s write a cascading style sheet CSS (so far, are using a relatively primitive method, novice, must come again).

  • Take a look at the HTML file from the previous home page:

index.html


      
<html>

<head>
    <meta charset="utf-8">
    <title>index_ArthurSlog</title>
</head>

<body>

    <div>This is index's page by ArthurSlog</div>
    <a href="./signin.html">Signin</a>
    <br>
    <a href="./signup.html">Signup</a>
</body>

</html>
Copy the code
  • Let’s link the stylesheet style.css here

index.html


      
<html>

<head>
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="./style.css" >
    <title>index_ArthurSlog</title>
</head>

<body>

    <div>This is index's page by ArthurSlog</div>
    <a href="./signin.html">Signin</a>
    <br>
    <a href="./signup.html">Signup</a>
</body>

</html>
Copy the code
  • To keep things professional, let’s create a new folder “CSS” under the current path to hold the stylesheet files

mkdir css

  • Modify the home PAGE HTML file

index.html


      
<html>

<head>
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="./css/style.css" >
    <title>index_ArthurSlog</title>
</head>

<body>

    <div class="container">
    <div>This is index's page by ArthurSlog</div>
    <br>
    <a href="./signin.html">Signin</a>
    <br>
    <a href="./signup.html">Signup</a>
    </div>

</body>

</html>
Copy the code

  • Well, this is a bit more professional, classification management, hehe

  • Next switch to the CSS folder path

cd css

  • Create a new style sheet file, style.css, which is referenced by the home page index.html, and add the path of the style sheet file relative to the home page. “./ “indicates the current path, so the correct path is”./ CSS /style.css “.

  • Ok, that explains it, it’s time to code the style file style.css

styel.css

.container {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    height: 300px;
  }
Copy the code
  • Start the static Web server

node index.js

  • Open your browser, type 127.0.0.1:3000, and see if the home page has changed. Normally, the content is already centered. Here is the official manual for Cascading Style Sheets (CSS)

  • Also, let’s add styles to signin. HTML and signup. HTML by opening the style file style.css

style.css

.container {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    height: 300px;
  }

  .signin-container {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
  } 

  .signup-container {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
  }
Copy the code
  • Then, adjust the signin. HTML and signup. HTML files

signin.html


      
<html>

<head>
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="./css/style.css" >
    <title>signin_ArthurSlog</title>
</head>

<body>

    <div class="signin-container">
        <div>This is signin's page by ArthurSlog</div>
        <p>Singin</p>
        <form action="http://127.0.0.1:3000/signin" method="GET">
            Name: <br>
            <input type="text" name="name"> 
            <br>
            Password: <br>
            <input type="text" name="password">
            <br><br>
            <input type="submit" value="Login">
        </form>
        <a href="./account.html">Signin</a>
        <br>
        <a href="./index.html">Return index's page</a>
    </div>

</body>

</html>
Copy the code

signup.html


      
<html>

<head>
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="./css/style.css" >
    <title>signup_ArthurSlog</title>
</head>

<body>

    <div class="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">
            Account: <br>
            <input type="text" name="name"> 
            <br>
            Password: <br>
            <input type="text" name="password">
            <br>
            Again Password: <br>
            <input type="text" name="repassword">
            <br>
            First Name: <br>
            <input type="text" name="firstname">
            <br>
            Last Name: <br>
            <input type="text" name="lastname">
            <br>
            Birthday: <br>
            <input type="text" name="birthday">
            <br>
            Sex: <br>
            <input type="text" name="sex">
            <br>
            Age: <br>
            <input type="text" name="age">
            <br>
            Wechart: <br>
            <input type="text" name="wechart">
            <br>
            QQ: <br>
            <input type="text" name="qq">
            <br>
            Email: <br>
            <input type="text" name="email">
            <br>
            Contury: <br>
            <input type="text" name="contury">
            <br>
            Address: <br>
            <input type="text" name="address">
            <br>
            Phone: <br>
            <input type="text" name="phone">
            <br>
            Websize: <br>
            <input type="text" name="websize">
            <br>
            Github: <br>
            <input type="text" name="github">
            <br>
            Bio: <br>
            <input type="text" name="bio">
            <br><br>
            <input type="submit" value="Complete registration">
        </form>
        <a href="./form.html">Signup</a>
        <br>
        <a href="./index.html">Return index's page</a>
        <br><br>
    </div>  

</body>

</html>
Copy the code

  • Open your browser, type 127.0.0.1:3000, and see if the home page has changed. Click Signin and Signup. Normally, their content is already centered

  • At this point, we have the home page, login page, and registration page centered.

Please follow my wechat account ArthurSlog

Scan the QR code on wechat and follow my official account

If you like my article, please like it and leave a comment

thank you

To change the database password, log in to the mysql database, access the mysql cli, and enter the password

ALTER USER USER() IDENTIFIED BY ‘88888888’;