[授業3週目7日目]Python-2

50374 ワード
バックエンド Flask 大邱A.i.学校 python 初歩的な開発者 フロントエンド テキストリンク

1.学習内容


フラスコを聞いてみた.
フラスコとは何ですか.
Webアプリケーション開発用Pythonフレームワーク.
フレームがたくさんありますが、フラスコは他のフレームより軽く、入門者の方が使いやすいです.
まずは昨日のパンダのようにターミナルを開けて「pip installフラスコ」と言えば設置できます.
しかし、パソコンごとに環境が異なり、インストールが悪い人もいるかもしれないので、これを提供するサイトの代わりに使うことにしました.
URL:glitch.com
ここで会員登録して、「flask」を検索すると、上に表示され、それを押します
サンプルコード画面を表示できます.
そこから元のコードを削除して、コードを書き直せばいいのです.
まず、このフラスコを使ってWeb上にhtml形式で表示することができます.
すなわち、人が作成すると、Webブラウザはhtml形式に変換されたコンテンツを受信し、人ではなく機械として認識し、画面に表示する.
例を挙げて「Hello World」を表示させましょう
from flask import Flask #플라스크 프레임워크를 불러온다는 의미.
app = Flask(__name__)

@app.route('/')
def hello_world(): #어제 배웠던 함수식 처럼 임의로 적은 아이디 같은것.
    return 'Hello, World!'
app.run()
こう書くとハローワールド!図のように画面に印刷します.
もう一つの例では、ランダムな数字を表したい場合は、このように書きます.
from flask import Flask
app = Flask(__name__)
import random

@app.route("/")
def index():
  return random.random()

app.run()
でもこれでスクリーンにエラーが発生しますここでlogsを見ればなぜだめなのかわかります
この場合はランダムですrandom()を数値に変更しstrで包みます.

from flask import Flask
app = Flask(__name__)
import random

@app.route("/")
def index():
  return str(random.random())

app.run()
では、リフレッシュするたびにランダムな小数が表示されます.
ここに「random」という字をつけたいなら、昨日学んだことを応用することができます.

from flask import Flask
app = Flask(__name__)
import random

@app.route("/")
def hello_world():
  return '<strong>random</strong> : '+str(random.random())

app.run()
すると、その「random」の文字部分が粗く扱われます.
ここでは、外部WebブラウザからWebサーバにアクセスすると、そのサーバにアクセスすると、ルーティングの下部の関数部分が実行される低ルーティング部分について知りたい.
つまり、そこの「/」の中/後ろに空のボックスが表示されたら、ホームページに入り、/に「/create/」と書くと、新しいページで次の関数を実行することを意味します.
@app.route("/create/")
def create():
  return 'create'
と書くと、メインアドレスの後ろに/create/を追加するだけで、ページcreateに出力されます.
低returnの後にhtmlを別途書いて印刷することもできます.
@app.route("/")
def index():
  return '''
  <html>
    <body>
      <h1><a href="/">html</a></h1>
      <ol>
        <li><a href="/read/1/">html</a></li>
        <li><a href="/read/2/">css</a></li>
        <li><a href="/read/3/">js</a></li>
      </ol>
      <h2>Welcome</h2>
      Hello, WEB!
    </body>
  </html>
  '''
ただし、上記のaラベルで/read/1/を取得するには、別途記入する必要があります.
@app.route("/read/1/")
def read():
  return '''
  <html>
    <body>
      <h1><a href="/">html</a></h1>
      <ol>
        <li><a href="/read/1/">html</a></li>
        <li><a href="/read/2/">css</a></li>
        <li><a href="/read/3/">js</a></li>
      </ol>
       READ
    </body>
  </html>  
  '''
&defの後にちゃんと書き込まれていないと、値にエラーが発生したり実行できなかったりすることに注意してください.
しかし、そのolタグは重複しているように見えます.普通は略して書くのがベストなので、昨日習ったような並びに略して書くことにしました.
topics = [
  {"id":1, "title":"html", "body":"html is ...."},
  {"id":2, "title":"css", "body":"css is ...."},
  {"id":3, "title":"js", "body":"js is ...."},
]
このように2次元で羅列すると、重複する部分が短くなります.その時はfor文を書きます
まずjsの変数のように宣言しますここでliTagsだと宣言しよう
topics = [
  {"id":1, "title":"html", "body":"html is ...."},
  {"id":2, "title":"css", "body":"css is ...."},
  {"id":3, "title":"js", "body":"js is ...."},
]

@app.route("/")
def index():
  liTags = ''
  for topic in topics:
    liTags = f'<li>{topic["title"]}</li>'
  return f'''  #f-string을 써서 liTag를 대입한다는 의미로 f를 써준다. 파이썬3이후버전만가능
  <html>
    <body>
      <h1><a href="/">html</a></h1>
      <ol>
        {liTags}
      </ol>
      <h2>Welcome</h2>
      Hello, WEB!
    </body>
  </html>
  '''
しかし、これで最後のjsのみ出力されるのは、forの意味が「~童顔」であるため、いつまでロードするかを指定しなければ、最後の上書きで出力される.印刷したいなら
既存のlitagsを追加します.次のように書けばいいです.
topics = [
  {"id":1, "title":"html", "body":"html is ...."},
  {"id":2, "title":"css", "body":"css is ...."},
  {"id":3, "title":"js", "body":"js is ...."},
]

@app.route("/")
def index():
  liTags = ''
  for topic in topics:
    liTags = liTags + f'<li>{topic["title"]}</li>'
  return f'''
  <html>
    <body>
      <h1><a href="/">html</a></h1>
      <ol>
        {liTags}
      </ol>
      <h2>Welcome</h2>
      Hello, WEB!
    </body>
  </html>
  '''
LiTagsで生成されたf~の後のものを生成し続け,既存のliTagsに(+)を加えて蓄積する方式といえる.
ここに前に「a」のラベルリンクを付けると、先ほどと同じように表示されます.
@app.route("/")
def index():
  liTags = ''
  for topic in topics:
    liTags = liTags + f'<li><a href="/read/{topic["id"]}/">{topic["title"]}</a></li>'
  return f'''
  <html>
    <body>
      <h1><a href="/">html</a></h1>
      <ol>
        {liTags}
      </ol>
      <h2>Welcome</h2>
      Hello, WEB!
    </body>
  </html>
  '''
ただしここでは、画面上でcssを押すと/read/2/がないため出力できません.
したがって、/read/1/(def値を変更する必要がある)をコピーすると、出力する必要がありますが、同じルータを複数コピーし続けると、コードも長くなり、効率も低下します.だから私はただ一つ書きたいだけです.
そんなときは、読む/読む/書くと可変に変わるので、アイデアをあげます.ここに「id」と書きます.
@app.route("/read/<id>/")
def read(id):
  print(id)
  return '''
  <html>
    <body>
      <h1><a href="/">html</a></h1>
      <ol>
        <li><a href="/read/1/">html</a></li>
        <li><a href="/read/2/">css</a></li>
        <li><a href="/read/3/">js</a></li>
      </ol>
       <h2>Read</h2>
      Hello, Read!
    </body>
  </html>  
  '''
ここでidが適用されるかどうかを判断するには、def下線にprintを書いてログで確認します.

しかし、上のディックシャナで規定されている「id」のように、数字/read/で後ろに置くことを想像します.整数の代わりにintを使います
@app.route("/read/<int:id>/")
def read(id):
  return '''
  <html>
    <body>
      <h1><a href="/">html</a></h1>
      <ol>
        <li><a href="/read/1/">html</a></li>
        <li><a href="/read/2/">css</a></li>
        <li><a href="/read/3/">js</a></li>
      </ol>
       <h2>Read</h2>
      Hello, Read!
    </body>
  </html>  
  '''
次はタイトルと内容ですが、リンクごとに変更したい場合は、さっきのようにfor文で変更できます.
@app.route("/read/<int:id>/")
def read(id):
  title = ''
  body = ''
  for topic in topics:
    if topic['id'] == id:
      title = topic['title']
      body = topic['body']
      break;
    
  return f'''
  <html>
    <body>
      <h1><a href="/">html</a></h1>
      <ol>
        <li><a href="/read/1/">html</a></li>
        <li><a href="/read/2/">css</a></li>
        <li><a href="/read/3/">js</a></li>
      </ol>
       <h2>{title}</h2>
      {body}
    </body>
  </html>  
  '''
文を追加してdickshernerのid値とid値を一致させると、titleとbodyの値が出力され、titleとbodyの値が='として初期化されます.
次はf-string、title、bodyを書けばいいです.

2.難点と解決策


最後にコードを繰り返すのではなく、書きにくいです.ビデオアプリを見直す方法はまだ難しいです
最後の部分,特にjsではfoundationに相当する部分が困難である.
だから上のインデックス部分のhtmlとread部分のhtml部分は同じです.だから私はあなたに別の関数を作って、それを書きます.
def template(): #항상 ()뒤에 :을 적어준다.
  liTags = ''
  for topic in topics:
    liTags = liTags + f'<li><a href="/read/{topic["id"]}/">{topic["title"]}</a></li>'
  return f'''
  <html>
    <body>
      <h1><a href="/">html</a></h1>
      <ol>
        {liTags}
      </ol>
      <h2>Welcome</h2>
      Hello, WEB!
    </body>
  </html>
  '''
  

@app.route("/")
def index():
  return template()
ここまでは理解していましたが、実行できない部分も修正しましたが、次回は/read/<>/部分でも同様の操作をして、titleとbody部分が違うので、別に何か書く必要があります.だからビデオをもう一度見て、チェックして、「パラメータ」を関数の括弧に単独で入れるべきです.
まずindexでtemplateカッコの他のリンクをクリックすると、titleとbodyが既存の
'<h2>welcome</h2>Hello,WEB!'
コンテンツを追加します.
次に、実際に変更した部分/read/部分の低welcome~部分を{title}と{body}に変更します(f~stringを入れる必要があります).
関数を設定するセクションに戻り、関数()カッコに任意の名前「content」を入れると、クリックするたびにタイトルと本文が変更されることを確認できます.
def template(content):
  liTags = ''
  for topic in topics:
    liTags = liTags + f'<li><a href="/read/{topic["id"]}/">{topic["title"]}</a></li>'
  return f'''
  <html>
    <body>
      <h1><a href="/">WEB</a></h1>
      <ol>
        {liTags}
      </ol>
      {content}
     <ul>
       <li><a href="/create/">create</a></li>
     </ul>
    </body>
  </html>
  '''
@app.route("/")
def index():
  return template('<h2>Welcome</h2>Hello, WEB!')

@app.route("/read/<int:id>/")
def read(id):
  title = ''
  body = ''
  for topic in topics:
    if topic['id'] == id:
      title = topic['title']
      body = topic['body']
      break;
  return template(f'<h2>{title}</h2>{body}')
+置換する見出しと、本明細書に対応する値が「content」であることを指定した場合は、作成した関数「template」から既存の見出しと本文を削除し、{content}と書く必要があります.
++その他学習内容
Google検索機能と組み合わせて入力フォームを作成することもできます.
まず、template関数にフォームに追加するulタグを追加し、検索機能に追加する部分を「create」に設定し、本文の内容を追加します.
#template에 넣을 부분
      <ul>
       <li><a href="/create/">create</a></li>
     </ul>
 #따로  'create' 넣은 부분
 
@app.route("/create/")
def create():
  content = '''
    <form action="https://www.google.com/search">
      <p><input type="text" name="q" placeholder="title"></p>
      <p><textarea placeholder="body"></textarea></p>
      <p><input type="submit" value="create"></p>
    </form>
    '''
  return template(content)
htmlを追加し、フォームラベルに入力ラベルと内容のtextatea部分を追加します.
Google検索をインポートしたい場合は、フォームにactionを書いて検索したサイトのアドレスを入れることができます.
アドレスが長くなる&パラメータ(入力値)を付けると、通常検索したいのはhtmlです
置くラベルに名前を書いたり、「q」を書いたりすると、Googleで書いた内容が検索されます.

3.勉強の心得


ますます難しくなる授業の内容につれて、今日はもっと元気が出にくくなりました.
特にタイピングのスピードが遅い私にとっては授業に従います.
かなり大変でした.ビデオを見てから理解するには、最後のタイトルと本文のリンクをクリックするたびに変更され、見ても完全に理解するのは難しい.授業中に理解度が30%であれば、復習時には理解度が65~70%アップします.
ビデオがあってよかったです.これからも頑張って復習すれば、もっと良い結果が期待できる.
layuiアップロードファイル(class='layui-btn layui-btn-sm uploadBtn file 2_"+i+")
[SWEA] 5204. [Python S/Wトラブルシューティング実施]4日間-集計ソート[D 3]