摘要：掘金主頁簡書主頁沒有寫夠足夠的代碼量，想成為高手是不可能的，只能紙上談兵，但寫夠了代碼量，紙上談兵的也是大有人在開發環境需要的信息和信息源如何使用與進行數據交互使用后端框架實現靜態服務器使用前端框架實現單頁應用前端部分統計頁面計算屬性和

ArthurSlog

SLog-27

Year·1

Guangzhou·China

July 30th 2018

GitHub

掘金主頁

簡書主頁

segmentfault

沒有寫夠足夠的代碼量，想成為高手是不可能的，只能紙上談兵，但寫夠了代碼量，紙上談兵的也是大有人在

Slog1_如何使用nodejs與mysql進行數據交互

Slog4_使用后端框架KOA實現靜態web服務器

Slog6_使用vue前端框架實現單頁應用(SPA)

Slog24

Slog25

Slog26

前端部分：

統計頁面-計算屬性和偵聽器、https://cn.vuejs.org/v2/guide... 主頁：index.html

注冊界面-條件渲染、https://cn.vuejs.org/v2/guide... :signup.html

登陸界面 :signin.html

登陸后的界面-列表渲染、https://cn.vuejs.org/v2/guide... 用戶界面: account.hmtl

調查問卷-文本、多行文本、復選框、單選按鈕、選擇框、https://cn.vuejs.org/v2/guide... : form.html

離開頁面提醒-事件處理、https://cn.vuejs.org/v2/guide...

移動端樣式兼容-Class與Style綁定、https://cn.vuejs.org/v2/guide...

后端部分：

數據庫數據交互模塊-部署、配置

靜態web服務器

用戶注冊模塊

用戶登陸模塊

統計分析模塊

用戶狀態模塊-超時、無效、非法

ctx.redirect()，參考 webapi官方手冊，獲取到原始webpai中的api，koa框架中的ctx和原始webapi中的api一一對應，或者說是和原始webapi的request和response中的api一一對應

目前基本的注冊登陸注冊功能已經做出來了，但是頁面比碼農的臉還難看，接下來簡單妝點一下，我們來寫一下層疊樣式表css（到目前為止，都是用比較原始的方法，菜鳥嘛，總得來一遍的）

先看一下之前的主頁的 html 文件：

index.html

    
    




    
This is index"s page by ArthurSlog
    Signin
    

    Signup

我們在這里外鏈一下樣式表 style.css

index.html

    
    
    




    
This is index"s page by ArthurSlog
    Signin
    

    Signup

為了顯得專業一點，我們在當前路徑下建個新的文件夾“css”來放置樣式表文件吧

mkdir css

重新修改一下主頁 html 文件

index.html

    
    
    




    

    
This is index"s page by ArthurSlog
    

    Signin
    

    Signup
    

嗯，這樣顯得專業點了，分類管理，呵呵

接下來切換到 css 文件夾路徑下

cd css

新建一個樣式表文件 style.css，上面主頁 index.html 引用的，就是這個文件，我們上面增加的，就是樣式表文件相對于主頁文件的路徑，“./” 表示當前路徑，所以正確路徑的寫法就是 “./css/style.css”

好了，解釋完，開始編碼樣式文件 style.css 了

styel.css

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

啟動靜態web服務器

node index.js

打開瀏覽器，輸入 127.0.0.1:3000，看一下，主頁是否發生了變化，正常的話，內容已經居中了，這里給出 層疊樣式表css官方手冊，以后如果需要什么樣式，就去這里找

同樣的，我們來為 signin.html 和 signup.html 添加一下樣式，打開樣式文件 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;
  }

然后，調整一下 signin.html 和 signup.html 這兩個文件

signin.html

    
    
    




    

        
This is signin"s page by ArthurSlog
        
Singin
        

            Name: 

             
            

            Password: 

            
            


            
        
        Signin
        

        Return index"s page
    

signup.html

    
    
    




    

        
This is signup"s page by ArthurSlog
        
Singup
        

            Account: 

             
            

            Password: 

            
            

            Again Password: 

            
            

            First Name: 

            
            

            Last Name: 

            
            

            Birthday: 

            
            

            Sex: 

            
            

            Age: 

            
            

            Wechart: 

            
            

            QQ: 

            
            

            Email: 

            
            

            Contury: 

            
            

            Address: 

            
            

            Phone: 

            
            

            Websize: 

            
            

            Github: 

            
            

            Bio: 

            
            


            
        
        Signup
        

        Return index"s page
        


    
  

打開瀏覽器，輸入 127.0.0.1:3000，看一下，主頁是否發生了變化，點擊 signin 和 signup，正常的話，他們的內容已經居中了

至此，我們完成了主頁、登陸頁面、注冊頁面的樣式居中。

根據 mysql官方手冊 修改數據庫密碼，先登陸mysql數據庫，進入mysql命令行界面，輸入

ALTER USER USER() IDENTIFIED BY "88888888";