3일차 코디 기록

【Story】

• 그러면 HTML에서 DOM 작업까지 모두 동작이 표시됩니다.
• 그런데 어떻게 서버와 관련이 있나요?
• 그렇기 때문에 입력 필드에서 사용자가 입력한 데이터를 클래스에서 수신하여 DB에 저장하려면 어떻게 해야 합니까?
익숙한python으로 서버를 만들어 데이터를 교환해 보세요...!!!

전제 지식

＊방법에 관하여

GET 메서드
뭐?매개변수
• 서버 데이터 업데이트 안 함
몰드 하나만 있음
아무거나 받아도 돼요.
전원 켜기 자체 검사 방법
URL로 뭘 보냈는지 모르겠어요.
・ 서버 데이터로 업데이트된 것들(양식에 입력된 데이터 등)
데이터 유형
복잡하면 좋죠
· JSON을 통한 데이터 전송
아무거나 받아도 돼요.

＊WEB 서버 정보

nginx
OSS로 직접 쓸 수 있습니다.
구름 끝
뒤에 뭔지 모르겠어요.
CDN
핫 배포 사양
→ 브라우저 측면은 WEB 서버와 항상 통신하는 웹소켓
→ vueCLI는 이 통신을 모니터링하고 코드가 변경될 때 반영합니다.

[웹 페이지 검증]

＊화면 표시 방법
① npm run serve에서 스크립트 실행
② localhost에서 F12를 눌러 개발자 도구 열기
③ 네트워크 탭 → 파일 이름 선택 → 제목
＊견해
요청 URL: 브라우저에서 요청한 UTL
요청 방법: 명령 유형
＊기타
WEB를 열 때 GET 방법으로 서버에서 파일 다운로드
병렬 다운로드

[실천 과제: WEB 서버 구축, Vue를 통한 통신]

＊대충 하는 일
서버를 시작할 때 브라우저와 서버 간에 양방향 통신을 합니다.
트리거는 기본적으로 브라우저에서 나온다.
이번 경우 브라우저에서python에 데이터를 요청하고python은 이 요청에 따라 응답을 반환합니다.
※ 트리거 정보
브라우저 밖에서 터치하면
SSE Blocking Query 등

＊절차
① JSON 데이터를 반환하는 API 서버 구축
API 서버
Java는 SpringBoot, Python은 Flask, 이번에는 Flask를 사용합니다.
샘플 코드는 아래와 같다.

# Flask などの必要なライブラリをインポートする
from flask import Flask, render_template, request, redirect, url_for, jsonify
import numpy as np
from flask_cors import CORS

# 自身の名称を app という名前でインスタンス化する
app = Flask(__name__)
CORS(app)

# メッセージをランダムに表示するメソッド
def picked_up():
    messages = [
        "こんにちは、あなたの名前を入力してください",
        "やあ！お名前は何ですか？",
        "あなたの名前を教えてね"
    ]
    # NumPy の random.choice で配列からランダムに取り出し
    return np.random.choice(messages)

# ここからウェブアプリケーション用のルーティングを記述
# index にアクセスしたときの処理
@app.route('/')
def index():
    title = "test"
    message = picked_up()
    # index.html をレンダリングする
    return render_template('index.html',
                           message=message, title=title)

# /post にアクセスしたときの処理
@app.route('/getuser', methods=['GET'])
def get():
    return jsonify({'message': 'Hello, world'})


if __name__ == '__main__':
    #app.debug = True # デバッグモード有効化
    app.run() # どこからでもアクセス可能に

② 프로젝트 설치에 필요한 npm 패키지
설치

npm install axios --save
npm install

③ Vue 기술에 필요한 코드
※ 이번 H1 레이블에는 JSON의 value 정보를 반영하는 코드가 기재되어 있습니다.

mounted(){
  const self = this
  Axios.get('http://localhost:5000/getuser').then((res) => {self.test_title = res.data.message})
},

・mounted 실행 시 아래 URL을 참조하십시오.
https://jp.vuejs.org/v2/guide/instance.html#%E3%83%A9%E3%82%A4%E3%83%95%E3%82%B5%E3%82%A4%E3%82%AF%E3%83%AB%E3%83%80%E3%82%A4%E3%82%A2%E3%82%B0%E3%83%A9%E3%83%A0
※ CrossOrigin 정보
Chrome 등 다양한 브라우저 표준 기능호스트가 다르면 제대로 작동하지 않습니다.
이번 예에서 브라우저가 Vue(8080)에서 요청을 받아서 Python(5000)을 두드리려고 하기 때문에 표준이라면 브라우저에서 오류가 발생할 수 있습니다.
따라서 python에 CORS를 기재하고 접근 허가를 발급해야 한다.
＊실제 실행 화면의 확인
① Python 코드를 실행할 때 화면
「 http://127.0.0.1:5000/에서 기술한 장면은 다음과 같은 절차를 이용하여 명세표를 작성하여 개념 디자인에서 체량의 부피를 분석하도록 한다.
또한 Geuser 페이지에서 아래 JSON형의 규격을 반환하는 것을 확인할 수 있습니다.
{'message': 'Hello, world'}

②「 http://127.0.0.1:5000/getuser"시의 화면

③ 명령 프롬프트에서 Vue를 실행할 때 화면
「 http://localhost:8081/에서 기술한 장면은 다음과 같은 절차를 이용하여 명세표를 작성하여 개념 디자인에서 체량의 부피를 분석하도록 한다.

④Vue.js 화면
기본적으로 h1의 제목에 HELLO를 설정합니다

data:function(){
 return{
 message: 'お名前は？',
 input:'no name',
 test_title:'HELLO'
 };
 },

mount 시 localhost: 5000에서 가져온 메시지 키의 가치를 설정합니다

mounted(){
 const self = this
 Axios.get('http://localhost:5000/getuser').then((res) => {self.test_title = res.data.message})
 },

⑤ Vue 시작 화면
HELLO, World가 아닌 HELLO가 설정되어 있는지 확인할 수 있습니다.