摘要：掘金主頁簡書主頁遲到太久就不必到了開發環境需要的信息和信息源如何使用與進行數據交互使用后端框架實現靜態服務器使用前端框架實現單頁應用前端部分統計頁面計算屬性和偵聽器主頁注冊界面條件渲染登陸界面后臺用戶管理的界面列表渲染用戶界面調查問

ArthurSlog

SLog-31

Year·1

Guangzhou·China

Aug 6th 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服務器

用戶注冊模塊

用戶登陸模塊

統計分析模塊

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

關鍵思路

切換至 client 文件夾路徑下

cd client

修改和調整 signup.html 文件

signup.html

    
    
    
    
    




    

        
This is signup"s page by ArthurSlog
        
Singup

        


            

            

                Account:
                

                
            
            


            

            

                Password:
                

                
            
            


            

            

                Again Password:
                

                
            
            



            

            

                First Name:
                

                
            
            


            

            

                Last Name:
                

                
            
            


            

            

                Birthday:
                

                
            
            


            

            

                Sex: {{ sex }}
                

                
                Male
                

                
                Female
            
            


            

            

                Age: {{ age }}
                

                
                    Select
                    1
                    2
                    3
                    4
                    5
                    6
                    7
                    8
                    9
                    10
                    11
                    12
                    13
                    14
                    15
                    16
                    17
                    18
                    19
                
            
            


            

            

                Wechart:
                

                
            
            


            

            

                QQ:
                

                
            
            


            

            

                Email:
                

                
            
            


            

            

                Contury:
                

                
            
            


            

            

                Address:
                

                
            
            


            

            

                Phone:
                

                
            
            


            

            

                Websize:
                

                
            
            


            

            

                Github:
                

                
            
            


            

            

                Bio:
                

                
            
            


            

            
        

        Return index"s page
        

        

    

    

切換至server文件夾路徑下

cd server

現在，啟動靜態web服務器

node index.js

現在打開瀏覽器，在地址欄輸入 127.0.0.1:3000，正常顯示主頁后，點擊 signup 鏈接，正常情況下，signup.html 頁面會顯得更加的簡潔，同時撤掉了多余的跳轉鏈接

至此，我們更新了 signup.html 的頁面風格。