Slog34_vue 프레임 워 크 초기 프로젝트 를 지배 하 는 블 로그 사이트-등록 페이지-앞 뒤 데이터 상호작용

ArthurSlog

SLog-34

Year·1

Guangzhou·China

Aug 10th 2018

GitHub

금 을 파 는 홈 페이지

약서 홈 페이지

segmentfault

잠 든 사 자 는 곧 깨 어 날 것 이 고,세 계 는 그것 에 충격 을 줄 것 이다.
개발 환경 MacOS(High Sierra 10.13.5)
필요 한 정보 와 정보 원:

HTTP 개요

HTTP

인터넷 이 어떻게 작 동 하 는 지

유 니 버 설 네트워크 는 어떻게 작 동 합 니까?

자원 포 지 셔 닝 문자(URL)통합

하이퍼링크 가 무엇 입 니까

하이퍼링크 만 들 기

AJAX 는 비동기 적 인 JavaScript 와 XML(Asynchronous JavaScript And XML)

XMLHttpRequest

Using files from web applications

인 코딩 시작

Slog 33 에서 vue.js 프레임 워 크 를 사용 하여 html 파일 의 요소 와 js 파일 의 코드 를 서로 연결 시 켜 js 파일 에서 js 코드 를 사용 하여 html 파일 의 요 소 를 제어 할 수 있 도록 합 니 다.

js 파일 에서 vue.js 의 규칙 을 사용 하여 js 코드 를 작성 합 니 다.여기 서 문제 가 있 습 니 다.api 는 webAPI 를 참고 하 시 겠 습 니까?vue.js 프레임 워 크 의 API 를 참고 하 시 겠 습 니까?이 문 제 는 개발 과정 에서 해결 하도록 남 겨 두 었 다

js 에서 작 성 된 js 코드 는'html 파일 에 있 는 요소 의 데 이 터 를 가 져 옵 니 다','html 파일 에 있 는 요소 의 데 이 터 를 가 져 오고 데 이 터 를 처리 합 니 다','html 파일 에 있 는 요소 의 데 이 터 를 가 져 와 서버 에 전송 합 니 다','html 파일 에 있 는 요소 의 데 이 터 를 가 져 와 서버 에 전송 합 니 다.서버 에서 전 송 된 데 이 터 를 기다 리 는 작업

위 에서 말 한 이런 것들 은 외 울 필요 가 없습니다.(당신 도 외 울 수 없 기 때 문 입 니 다)개발 과정 에서 vue.js 공식 문 서 를 참조 하고 웹 규범 과 결합 하면 필요 한 기능 을 작성 할 수 있 습 니 다.일반적인 상황 에서 이 문서 들 은 설명 이나 사전 의 존재 와 유사 합 니 다.그러나....................................................자신 에 게 더 적합 한 방법 이 있다 고 생각한다 면 한번 해 보 세 요.하지만 시간 원 가 를 조절 하 는 것 을 기억 하 세 요

만약 당신 이 나의 Slog 33 중의 html 파일 에 따라 수정 하면 최종 결 과 는 데이터 관련 에 약간의 문제 가 있 을 수 있 으 므 로 먼저 문 제 를 해결 합 시다(지금까지 우리 가 말 한 것 은 전단 의 html 와 js)

signup.html

    
    
    
    
    




    

        
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
        

        


        

            

                

                    
                        {{ record }}
                    
                
            
        
    

    

js 파일 다시 보기

signup.js

var host = 'http://127.0.0.1:3000/signup?';

var signup_container = new Vue({
    el: '#signup-container',
    data: {
      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', 'null']
    },
    methods: {
      addUser: function () {
        var xhr = new XMLHttpRequest()
        xhr.open('GET', host + 'name=' + this.name + '&password=' + this.password + '&firstname=' + 
        this.firstname + '&lastname=' + this.lastname + '&birthday=' + this.birthday
        + '&sex=' + this.currentSex + '&age=' + this.currentAge + '&wechart=' + this.wechart
        + '&qq=' + this.qq + '&email=' + this.email + '&contury=' + this.contury
        + '&address=' + this.address + '&phone=' + this.phone + '&websize=' + this.websize
        + '&github=' + this.github + '&bio=' + this.bio, true)
        xhr.send()
      }
    }
  })

html 파일 의 form 부분 을 주의 하 십시오

     ...
    

여기 서 v-on:submit 는 vue.js 에 속 하 는 모드 문법 으로"v-on 명령 으로 DOM 이 벤트 를 감청 하고 트리거 할 때 자바 스 크 립 트 코드 를 실행 할 수 있 습 니 다"

위 와 같이 js 파일 의"method"에 addUser 를 만 드 는 방법 입 니 다.html 에서 등록 완료 단 추 를 누 르 면 addUser 라 는 방법 을 사용 합 니 다.방법 은 자신 이 작성 한 논 리 를 실행 합 니 다

우 리 는 이 addUser 방법 으로 우리 가 작성 한 등록 정 보 를 서버 에 전송 하고 서버 의 실행 결 과 를 기다 리 게 해 야 합 니 다(성공 또는 실패).그리고 페이지 에 실 행 된 결 과 를 표시 해 야 합 니 다

이런 방법 을 어디서 찾 을 수 있 을까요?먼저 생각 나 는 것 은 웹 API 입 니 다.홈 페이지 에 가서

다시 한 번 살 펴 보 겠 습 니 다.vue.js 프레임 워 크 에 따 르 면 vue 의 js 파일 구 조 는 방법 중:

methods: {
    addUser: function () {
    var xhr = new XMLHttpRequest()
    xhr.open('GET', host + 'name=' + this.name + '&password=' + this.password + '&firstname=' + 
    this.firstname + '&lastname=' + this.lastname + '&birthday=' + this.birthday
    + '&sex=' + this.currentSex + '&age=' + this.currentAge + '&wechart=' + this.wechart
    + '&qq=' + this.qq + '&email=' + this.email + '&contury=' + this.contury
    + '&address=' + this.address + '&phone=' + this.phone + '&websize=' + this.websize
    + '&github=' + this.github + '&bio=' + this.bio, true)
    xhr.send()
    }
}

XML HttpRequest 표준 은 스 크 립 트 클 라 이언 트 기능 을 제공 하여 클 라 이언 트 와 서버 간 에 데 이 터 를 전송 하 는 API 를 정의 합 니 다.그 중의 xhr.open()방법 은 서버 에 http 요청 을 보 내 는 것 입 니 다.따라서 이 방법 을 사용 할 때 다음 과 같은 요청 이 발생 하여 서버 에 보 냅 니 다:

http://127.0.0.1:3000/signup?name=???&password=???...         ，     ，    

위의 요청 에는 사용자 가 입력 한 데이터,예 를 들 어 name,password 등 이 포함 되 어야 합 니 다.그 중의???세 개의 물음표 가 바로 사용자 가 입력 한 구체 적 인 값 을 대표 하 는 것 입 니 다.방법 에서 저 희 는 this.name 과 같은 문법 으로 사용자 가 입력 한 값 을 가 져 옵 니 다.왜 name 을 직접 사용 할 수 없 습 니까?내 가 해 봤 으 니까 안 돼,하하,나중에 설명 할 게

    xhr.open('GET', host + 'name=' + name + '&password=' + password + '&firstname=' + 
    firstname + '&lastname=' + lastname + '&birthday=' + birthday
    + '&sex=' + currentSex + '&age=' + currentAge + '&wechart=' + wechart
    + '&qq=' + qq + '&email=' + email + '&contury=' + contury
    + '&address=' + address + '&phone=' + phone + '&websize=' + websize
    + '&github=' + github + '&bio=' + bio, true)

xhr.send()방법 을 다시 한 번 살 펴 보고 공식 설명 을 참고 하 십시오

XMLHttpRequest.send()        HTTP   。       （       ），               ；       ，               。XMLHttpRequest.send()            ，       ；        GET    HEAD，           null。

      setRequestHeader（）     Accept     ，      * / * Accept   。

ok,현재 서버 를 시작 합 니 다(server 경로 에서)

node index.js

그리고 브 라 우 저 를 열 고 127.0.0.1:3000 을 입력 하 십시오.등록 인터페이스 에 들 어가 서 등록 정 보 를 작성 하고"등록 완료"단 추 를 누 르 십시오

현재 홈 페이지 로 돌아 가 로그 인 인터페이스 에 들 어가 방금 등록 한 계 정과 비밀 번 호 를 입력 하고 로그 인 을 클릭 합 니 다.정상 적 인 상황 에서 로그 인 에 성공 하면 json 문자열

이로써 우 리 는 vue.js 프레임 워 크 를 사용 한 상황 에서 전후 단의 데이터 상호작용 을 실현 했다.

저의 위 챗 공식 아 더 슬 로그 에 주목 해 주 셔 서 감사합니다.
제 글 이 마음 에 드 시 면 좋아요 댓 글 을 눌 러 주세요.
감사합니다.