Slog37_支配vue框架初阶项目之博客网站-注册页面-合并首页、登陆和注册页面

摘要：掘金主页简书主页不管发生什么事情明天的太阳还是照常升起开发环境需要的信息和信息源概述互联网是如何工作的万维网是如何工作的统一资源定位符什么是超链接创建超链接是异步的和开始编码这一次，把首页跟注册登陆页面也合并在一起开发环境版本，包含

ArthurSlog

SLog-37

Year·1

Guangzhou·China

Aug 13th 2018

GitHub

掘金主页

简书主页

segmentfault

不管发生什么事情 明天的太阳还是照常升起

HTTP概述

HTTP

互联网是如何工作的

万维网是如何工作的

统一资源定位符(URL)

什么是超链接

创建超链接

AJAX是异步的JavaScript和XML（Asynchronous JavaScript And XML）

XMLHttpRequest

Using files from web applications

这一次，把首页跟注册登陆页面也合并在一起

client/app.html

    
    
    
    
    




    

        
This is index"s page by ArthurSlog
        

        Signin
        

        Signup
    

    


        
This is signin"s page by ArthurSlog
        
Singin
        

            

            

                Account: {{ name_signin }}
                

                
            
            


            

            

                Password: {{ password_signin }}
                

                
            
            

            
        
        

        Return index"s page

        
This is signup"s page by ArthurSlog
        
Singup

        


            

            

                Account: {{ name }}
                

                
            
            


            

            

                Password: {{ password }}
                

                
            
            


            

            

                Again Password: {{ repassword }}
                

                
            
            



            

            

                First Name: {{ firstname }}
                

                
            
            


            

            

                Last Name: {{ lastname }}
                

                
            
            


            

            

                Birthday: {{ birthday }}
                

                
            
            


            

            

                Sex: {{ currentSex }}
                

                
                male
                

                
                female
            
            


            

            

                Age: {{ currentAge }}
                

                
                    Select
                    {{ age }}
                
            
            


            

            

                Wechart: {{ wechart }}
                

                
            
            


            

            

                QQ: {{ qq }}
                

                
            
            


            

            

                Email: {{ email }}
                

                
            
            


            

            

                Contury: {{ contury }}
                

                
            
            


            

            

                Address: {{ address }}
                

                
            
            


            

            

                Phone: {{ phone }}
                

                
            
            


            

            

                Websize: {{ websize }}
                

                
            
            


            

            

                Github: {{ github }}
                

                
            
            


            

            

                Bio: {{ bio }}
                

                
            
            


            

            
        

        Return index"s page
        

        


        

            {{ commits }}
        
    

    

然后我们来布置页面的路由，把之前三个页面的功能集成在一个页面上，然后相互之间正常衔接

这里用到 vue.js 框架的模版语法 v-if

不过，首先先把首页的两个超级链接更换成两个按钮

client/app.html

然后呢，在来调整一下前端的 js 文件

signup.js

var host = "http://127.0.0.1:3000/";

var signup_container = new Vue({
    el: "#signup-container",
    data: {
      name_signin: "",
      password_signin: "",
      name: "",
      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: "",
      commits: null,
      pagestate: "0"
    },
    methods: {
      signin_index: function () {
        this.pagestate = "1";
        },
      signup_index: function () {
        this.pagestate = "2"
        },
      return_index: function() {
        this.pagestate = "0"
        },
      signin: function() {
        var xhr = new XMLHttpRequest()

        var self = this
        xhr.open("GET", host + "signin?" + "name=" + self.name_signin + "&password=" + self.password_signin, true)
        
        xhr.onload = function () {
          self.commits = xhr.responseText
        }
        
        xhr.send()
      },
      addUser: function () {
        var xhr = new XMLHttpRequest()

        var self = this
        xhr.open("GET", host + "signup?" + "name=" + self.name + "&password=" + self.password + "&firstname=" + 
        self.firstname + "&lastname=" + self.lastname + "&birthday=" + self.birthday
        + "&sex=" + self.currentSex + "&age=" + self.currentAge + "&wechart=" + self.wechart
        + "&qq=" + self.qq + "&email=" + self.email + "&contury=" + self.contury
        + "&address=" + self.address + "&phone=" + self.phone + "&websize=" + self.websize
        + "&github=" + self.github + "&bio=" + self.bio, true)
        
        xhr.onload = function () {
          self.commits = xhr.responseText
        }
        
        xhr.send()
      }
    }
  })

现在，打开浏览器，输入 127.0.0.1:3000/app.html

点击 signin 按钮、 ReturnIndex 按钮和 signup 按钮试试

至此，我们将 index.html 、 signin.html 、 signup.html 合并在了一个页面。