フロントエンドとバックエンドのインタラクション 2、フォームおよびテンプレートエンジン

ゼロ、記事ディレクトリ

フロントエンドとバックエンドのインタラクション 2、フォームおよびテンプレートエンジン

1. 帳票フォームの基本的な使い方

HTML 関連の知識については、HTML 入門をご覧ください。

(1) フォームとは何ですか?

フォームは主に Web ページでのデータ収集機能を担当します。 HTML の <form> タグは、ユーザーが入力した情報を収集し、<form> タグの送信操作を通じて収集した情報をサーバーに送信するために使用されます。。
フォームは、フォームラベル (フォーム)、フォームフィールド (入力)、およびフォームボタン (ボタン) の 3 つの基本部分で構成されます。

画像-20230601145742705

（2）`<form>`标签的属性

<form> タグはデータの収集に使用され、<form> タグの属性は収集されたデータをサーバーに送信する方法を指定するために使用されます。

属性	価値	説明する
アクション	URLアドレス	フォームが送信されるときにフォームデータを送信する場所を指定します
方法	取得または投稿	フォームデータをアクション URL に送信する方法を指定します
エンタイプ	`application/x-www-form-urlencoded`、`multipart/form-data`、`text/plain`	送信前にフォームデータをエンコードする方法を指定します
目標	`_blank`、`_self`、`_parent`、`_top`、`framename`	アクション URL を開く場所を指定します
名前	フォーム名	ページ上の複数のフォームを区別する

アクション
- action 属性は、フォームが送信されたときにフォームデータが送信される場所を指定するために使用されます。
- action 属性の値は、バックエンドによって提供される URL アドレスである必要があります。この URL アドレスは、特にフォームによって送信されたデータの受信を担当します。
- フォームで action 属性値が指定されていない場合、action のデフォルト値は現在のページの URL アドレスです。
- 注: フォームが送信されると、ページは action 属性で指定された URL アドレスにすぐにジャンプします。
目標
- target 属性は、アクション URL を開く場所を指定するために使用されます。
- オプションの値は 5 つあり、デフォルトでは、target の値は _self で、これは現在のページでアクション URL を開くことを意味します。

価値	説明する
_空白	新しいウィンドウで開きます。
_自己	デフォルト。同じフレーム内で開きます。
_親	親フレームセットで開きます。（ほとんど使われません）
_上	フルウィンドウで開きます。（ほとんど使われません）
フレーム名	指定したフレームで開きます。（ほとんど使われません）

方法
- Method 属性は、フォームデータをアクション URL に送信する方法を指定するために使用されます。
- get と post という 2 つのオプションの値があります。
- 默认值 は get であり、フォームデータが URL アドレスの形式でアクション URL に送信されることを示します。
- get メソッドは、少量的、简单的データの送信に適しています。
- post メソッドは、大量的、复杂的 または 文件上传 を含むデータの送信に適しています。
- 実際の開発では、post submit メソッドが最もよく使われ、get はほとんど使われません。たとえば、ログイン、登録、データの追加などのフォーム操作はすべて、post メソッドを使用してフォームを送信する必要があります。
エンタイプ
- enctype 属性は、フォームデータを送信する前にエンコードする方法を指定するために使用されます。
- 默认值application/x-www-form-urlencoded です。これは、送信前にすべての文字をエンコードすることを意味します。
- 文件上传 の操作に関しては、enctype 値をmultipart/form-data に設定する必要があります。ファイルのアップロード操作が含まれない場合は、単にデフォルトです。

価値	説明する
application/x-www-form-urlencoded	送信前にすべての文字をエンコードする (デフォルト)
マルチパート/フォームデータ	文字はエンコードされません。この値は、ファイルアップロードコントロールを含むフォームを使用する場合に必要です。
テキスト/プレーン	スペースは「+」プラス記号に変換されますが、特殊文字はエンコードされません。（ほとんど使われません）

(3) フォームの同期送信とその欠点

フォームの同期送信とは: 送信ボタンをクリックすると、フォーム送信操作がトリガーされ、ページがアクション URL にジャンプします。この動作は、フォームの同期送信と呼ばれます。
同期フォーム送信の欠点:
- 整个页面会跳转アクション URL が指すアドレスへのユーザーエクスペリエンスは低下します。
- 页面之前的状态和数据会丢失。
同期コミットの欠点を回避する方法:表单只负责采集数据，Ajax 负责将数据提交到服务器。

2. Ajax経由でフォームデータを送信する

(1) フォーム送信イベントを監視する

jQuery では、次の 2 つのメソッドを使用してフォーム送信イベントを監視できます。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="./lib/jquery.js"></script>
</head>

<body>

    <form action="/login" id="f1">
        <input type="text" name="username" />
        <input type="password" name="password" />
        <button type="submit">提交</button>
    </form>

    <script>
        $(function() {
      
      
            // 第一种方式
            $('#f1').submit(function() {
      
      
                alert('监听到了表单的提交事件')
            })

            // 第二种方式
            $('#f1').on('submit', function() {
      
      
                alert('监听到了表单的提交事件2')
            })
        })
    </script>

</body>

</html>

(2) フォームのデフォルトの送信動作を防止する

フォーム送信イベントをリッスンした後、イベントオブジェクトのevent.preventDefault() 関数を呼び出して、フォーム送信とページジャンプを防ぐことができます。サンプルコードは次のとおりです。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="./lib/jquery.js"></script>
</head>

<body>

    <form action="/login" id="f1">
        <input type="text" name="username" />
        <input type="password" name="password" />
        <button type="submit">提交</button>
    </form>

    <script>
        $(function() {
      
      
            // 第一种方式
            $('#f1').submit(function(e) {
      
      
                alert('监听到了表单的提交事件')
                e.preventDefault()
            })

            // 第二种方式
            $('#f1').on('submit', function(e) {
      
      
                alert('监听到了表单的提交事件2')
                e.preventDefault()
            })
        })
    </script>

</body>

</html>

(3) フォーム内のデータを素早く取得

フォームでのデータ取得操作を簡素化するために、jQuery は serialize() 関数を提供します。
構文形式:$(selector).serialize()
serialize()この関数の利点: フォーム内のすべてのデータを一度に取得できます。
serialize() 関数を使用してフォームデータを迅速に取得する場合は、各フォーム要素に name 属性を追加する必要があります。

<form id="form1">
    <input type="text" name="username" />
    <input type="password" name="password" />
    <button type="submit">提交</button>
</form>

$('#form1').serialize()
// 调用的结果：
// username=用户名的值&password=密码的值

3. 事例 - コメント一覧

(1) レンダリングUIの構造

画像-20230608133349705

(2) コメント一覧の取得

function getCmtList() {
    
    
    $.get('http://xxx.yyy.zzz/api/cmtlist', function (res) {
    
      
      if(res.status !== 200) {
    
    
        return alert('获取评论列表失败！')
      }
      var rows = []
      $.each(res.data, function (i, item) {
    
     // 循环拼接字符串
        rows.push('<li class="list-group-item">'+ item.content +'<span class="badge cmt-date">评论时间：'+ item.time +'</span><span class="badge cmt-person">评论人：'+ item.username +'</span></li>')
      })
      $('#cmt-list').empty().append(rows.join('')) // 渲染列表的UI结构
    })
  }

(3) コメントを残す

$('#formAddCmt').submit(function(e) {
    
    
    e.preventDefault() // 阻止表单的默认提交行为
    // 快速得到表单中的数据
    var data = $(this).serialize()
    $.post('http://xxx.yyy.zzz/api/addcmt', data, function(res) {
    
    
      if (res.status !== 201) {
    
    
        return alert('发表评论失败！')
      }
      // 刷新评论列表
      getCmtList()
      // 快速清空表单内容
      $('#formAddCmt')[0].reset()
    })
  })

(4) 完全なコード

cmt.js

function getCommentList() {
    
    
    $.ajax({
    
    
        method: 'GET',
        url: 'http://xxx.yyy.zzz/api/cmtlist',
        success: function(res) {
    
    
            if (res.status !== 200) return alert('获取评论列表失败！')
            var rows = []
            $.each(res.data, function(i, item) {
    
    
                var str = '<li class="list-group-item"><span class="badge" style="background-color: #F0AD4E;">评论时间：' + item.time + '</span><span class="badge" style="background-color: #5BC0DE;">评论人：' + item.username + '</span>' + item.content + '</li>'
                rows.push(str)
            })
            $('#cmt-list').empty().append(rows.join(''))
        }
    })
}

getCommentList()

$(function() {
    
    
    $('#formAddCmt').submit(function(e) {
    
    
        e.preventDefault()
        var data = $(this).serialize()
        $.post('http://xxx.yyy.zzz/api/addcmt', data, function(res) {
    
    
            if (res.status !== 201) {
    
    
                return alert('发表评论失败！')
            }
            getCommentList()
            $('#formAddCmt')[0].reset()
        })
    })
})

インデックス.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="./lib/bootstrap.css" />
    <script src="./lib/jquery.js"></script>
    <script src="./js/cmt.js"></script>
</head>

<body style="padding: 15px;">

    <!-- 评论面板 -->
    <div class="panel panel-primary">
        <div class="panel-heading">
            <h3 class="panel-title">发表评论</h3>
        </div>
        <form class="panel-body" id="formAddCmt">
            <div>评论人：</div>
            <input type="text" class="form-control" name="username" autocomplete="off" />
            <div>评论内容：</div>
            <textarea class="form-control" name="content"></textarea>

            <button type="submit" class="btn btn-primary">发表评论</button>
        </form>
    </div>


    <!-- 评论列表 -->
    <ul class="list-group" id="cmt-list">
        <li class="list-group-item">
            <span class="badge" style="background-color: #F0AD4E;">评论时间：</span>
            <span class="badge" style="background-color: #5BC0DE;">评论人：</span> Item 1
        </li>
    </ul>

</body>

</html>

4. テンプレートエンジンの基本概念

(1) UI構造のレンダリング時に発生する問題

次のコードは、字符串拼接 の形式で UI 構造をレンダリングします。
UI 構造が比較的複雑な場合は、文字列を結合するときに引用符の前のネストに特別な注意を払う必要があります。そして、一度要件が変わってしまうと、修正するのは非常に面倒です。

var rows = []
$.each(res.data, function (i, item) {
    
     // 循环拼接字符串
    rows.push('<li class="list-group-item">'+ item.content +'<span class="badge cmt-date">评论时间：'+ item.time +'</span><span class="badge cmt-person">评论人：'+ item.username +'</span></li>')
})
$('#cmt-list').empty().append(rows.join('')) // 渲染列表的UI结构

(2) テンプレートエンジンとは何ですか?

テンプレートエンジン: 指定された 模板结构和数据 に基づいて、完全な 生成 を自動的に作成します。 HTML页面

画像-20230601161244807

(3) テンプレートエンジンのメリット

文字列のスプライシング操作の削減
コード構造をより明確にする
コードを読みやすく、保守しやすくする

5.アートテンプレートテンプレートエンジン

(1) アートテンプレートの紹介

art-template は、シンプルで超高速なテンプレートエンジンです。
中国の公式 Web サイトのアドレス:http://aui.github.io/art-template/zh-cn/index.html

画像-20230601161452531

(2) アートテンプレートのインストール

ダウンロードアドレス:http://aui.github.io/art-template/zh-cn/docs/installation.html
ダウンロードリンクを見つけたら、マウスを右クリックして [名前を付けてリンクを保存] を選択し、アートテンプレートをローカルにダウンロードし、<script> タグを介して Web ページにロードします。使用するために。

画像-20230601164808119

(3) アートテンプレートテンプレートエンジンの利用手順

アートテンプレートのインポート
データの定義
テンプレートの定義
テンプレート関数の呼び出し
HTML構造をレンダリングする

従来の方法を使用して UI 構造をレンダリングします。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="./lib/jquery.js"></script>
</head>

<body>
    <div id="title"></div>
    <div>姓名：<span id="name"></span></div>
    <div>年龄：<span id="age"></span></div>
    <div>会员：<span id="isVIP"></span></div>
    <div>注册时间：<span id="regTime"></span></div>
    <div>爱好：
        <ul id="hobby">
            <li>爱好1</li>
            <li>爱好2</li>
        </ul>
    </div>

    <script>
        var data = {
      
      
            title: '<h3>用户信息</h3>',
            name: 'zs',
            age: 20,
            isVIP: true,
            regTime: new Date(),
            hobby: ['吃饭', '睡觉', '打豆豆']
        }

        $(function() {
      
      
            $('#name').html(data.name)
            $('#title').html(data.title)
            $('#age').html(data.age)
            $('#isVIP').html(data.isVIP)
            $('#regTime').html(data.regTime)

            var rows = []
            $.each(data.hobby, function(i, item) {
      
      
                rows.push('<li>' + item + '</li>')
            })
            $('#hobby').html(rows.join(''))
        })
    </script>
</body>

</html>

テンプレートエンジンの使用方法を示します。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <!-- 1. 导入模板引擎 -->
    <!-- 在 window 全局，多一个函数，叫做 template('模板的Id', 需要渲染的数据对象) -->
    <script src="./lib/template-web.js"></script>
    <script src="./lib/jquery.js"></script>
</head>

<body>

    <div id="container"></div>

    <!-- 3. 定义模板 -->
    <!-- 3.1 模板的 HTML 结构，必须定义到 script 中 -->
    <script type="text/html" id="tpl-user">
        <h1>{
      
      {
      
      name}} ------ {
      
      {
      
      age}}</h1>
        {
      
      {
      
      @ test}}

        <div>
            {
      
      {
      
      if flag === 0}} flag的值是0 {
      
      {
      
      else if flag === 1}} flag的值是1 {
      
      {
      
      /if}}
        </div>

        <ul>
            {
      
      {
      
      each hobby}}
            <li>索引是:{
      
      {
      
      $index}}，循环项是:{
      
      {
      
      $value}}</li>
            {
      
      {
      
      /each}}
        </ul>

        <h3>{
      
      {
      
      regTime | dateFormat}}</h3>
    </script>

    <script>
        // 定义处理时间的过滤器
        template.defaults.imports.dateFormat = function(date) {
      
      
            var y = date.getFullYear()
            var m = date.getMonth() + 1
            var d = date.getDate()
            return y + '-' + m + '-' + d
        }

        // 2. 定义需要渲染的数据
        var data = {
      
      
            name: 'zs',
            age: 20,
            test: '<h3>测试原文输出</h3>',
            flag: 1,
            hobby: ['吃饭', '睡觉', '写代码'],
            regTime: new Date()
        }

        // 4. 调用 template 函数
        var htmlStr = template('tpl-user', data)
        console.log(htmlStr)

        // 5. 渲染HTML结构
        $('#container').html(htmlStr)
    </script>
</body>

</html>

(4) アートテンプレートの標準構文

標準構文とは: art-template は{ { }}この構文形式を提供し、変数出力や配列ループなどの操作を { { }} 内で実行できます。、この { { }} 構文は art-template では 标准语法 と呼ばれます。
标准语法输出：在 { { }} 语法中，可以进行变量的输出、对象属性的输出、三元表达式输出、逻辑或输出、加减乘除等表达式输出。

{
    
    {
    
    value}}
{
    
    {
    
    obj.key}}
{
    
    {
    
    obj['key']}}
{
    
    {
    
    a ? b : c}}
{
    
    {
    
    a || b}}
{
    
    {
    
    a + b}}

標準構文原文输出: 出力する値にHTML 标签结构が含まれる場合、HTML タグが確実に処理されるように、元の出力構文を使用する必要があります。通常通りレンダリングします。

{
    
    {
    
    @ value }}

標準構文条件输出: 条件付き出力を実装する場合は、{ { }} で if … else if … /if を使用できます。要求。

{
    
    {
    
    if value}} 按需输出的内容 {
    
    {
    
    /if}}

{
    
    {
    
    if v1}} 按需输出的内容 {
    
    {
    
    else if v2}} 按需输出的内容 {
    
    {
    
    /if}}

標準構文循环输出: ループ出力を実現したい場合は、{ { }} から each 構文では、現在のループのインデックスには $index を使用してアクセスし、現在のループ項目には $value を使用してアクセスします。

{
    
    {
    
    each arr}}
    {
    
    {
    
    $index}} {
    
    {
    
    $value}}
{
    
    {
    
    /each}}

標準構文过滤器: フィルタの本質は、入力データを処理して出力する処理関数です。
- フィルター構文はパイプ演算子に似ており、前の出力が次の入力になります。{ {value | filterName}}
- フィルターを定義します。template.defaults.imports.filterName = function(value){/*return处理的结果*/}

//定义一个格式化时间的过滤器 dateFormat 如下：
template.defaults.imports.dateFormat = function(date) {
    
    
    var y = date.getFullYear()
    var m = date.getMonth() + 1
    var d = date.getDate()

    return y + '-' + m + '-' + d // 注意，过滤器最后一定要 return 一个值
 }

<div>注册时间：{
    
    {
    
    regTime | dateFormat}}</div>

6. テンプレートエンジンの実装原理

(1) 通常のマッチング

exec() 関数は、检索字符串 の正規表現と一致するために使用されます。文字列内に一致する値がある場合は 返回该匹配值 が返され、そうでない場合は null が返されます。
文法：RegExpObject.exec(string)

var str = 'hello'
var pattern = /o/
// 输出的结果["o", index: 4, input: "hello", groups: undefined]
console.log(pattern.exec(str))

グループ化: 正規表現の ( ) で囲まれた内容がグループ化を表しており、グループ化によって必要な内容を抽出できます。

var str = '<div>我是{
    
    {name}}</div>'
var pattern = /{
     
     {([a-zA-Z]+)}}/

 // ["{
    
    {name}}", "name", index: 7, input: "<div>我是{
    
    {name}}</div>", groups: undefined]
 console.log(pattern.exec(str))

(2) 弦の交換

replace() 関数は、文字列内の一部の文字替换他の文字を置換するために使用されます。置換後の新しい文字列を返します。
構文: var result = ‘123456’.replace(‘123’, ‘abc’) // result の値は文字列 ‘abc456’ です

(3) 定期的なマッチングとその後の置き換え

単一の交換

var str = '<div>我是{
    
    {name}}</div>'
var pattern = /{
     
     {([a-zA-Z]+)}}/

var patternResult = pattern.exec(str)
str = str.replace(patternResult[0], patternResult[1]) // replace 函数返回值为替换后的新字符串
// 输出的内容是：<div>我是name</div>
console.log(str)

複数の置換

var str = '<div>{
    
    {name}}今年{
    
    { age }}岁了</div>'
var pattern = /{
     
     {\s*([a-zA-Z]+)\s*}}/

var patternResult = pattern.exec(str)
str = str.replace(patternResult[0], patternResult[1])
console.log(str) // 输出 <div>name今年{
    
    { age }}岁了</div>

patternResult = pattern.exec(str)
str = str.replace(patternResult[0], patternResult[1])
console.log(str) // 输出 <div>name今年age岁了</div>

patternResult = pattern.exec(str)
console.log(patternResult) // 输出 null

ループの交換

var str = '<div>{
    
    {name}}今年{
    
    { age }}岁了</div>'
var pattern = /{
     
     {\s*([a-zA-Z]+)\s*}}/

var patternResult = null
while(patternResult = pattern.exec(str)) {
    
    
   str = str.replace(patternResult[0], patternResult[1])
}
console.log(str) // 输出 <div>name今年age岁了</div>

真実の置き換え

var data = {
    
     name: '张三', age: 20 }
var str = '<div>{
    
    {name}}今年{
    
    { age }}岁了</div>'
var pattern = /{
     
     {\s*([a-zA-Z]+)\s*}}/

var patternResult = null
while ((patternResult = pattern.exec(str))) {
    
    
   str = str.replace(patternResult[0], data[patternResult[1]])
}
console.log(str)

(4) 簡易テンプレートエンジンの実装

テンプレート構造の定義

<!-- 定义模板结构 -->
<script type="text/html" id="tpl-user">
   <div>姓名：{
      
      {
      
      name}}</div>
   <div>年龄：{
      
      {
      
       age }}</div>
   <div>性别：{
      
      {
      
        gender}}</div>
   <div>住址：{
      
      {
      
      address  }}</div>
</script>

プリコールテンプレートエンジン

<script>
   // 定义数据
   var data = {
    
     name: 'zs', age: 28, gender: '男', address: '北京顺义马坡' }
   // 调用模板函数
   var htmlStr = template('tpl-user', data)
   // 渲染HTML结构
   document.getElementById('user-box').innerHTML = htmlStr
</script>

テンプレート関数のカプセル化

function template(id, data) {
    
    
  var str = document.getElementById(id).innerHTML
  var pattern = /{
     
     {\s*([a-zA-Z]+)\s*}}/
  var pattResult = null
  while ((pattResult = pattern.exec(str))) {
    
    
    str = str.replace(pattResult[0], data[pattResult[1]])
  }
  return str
}

カスタムテンプレートエンジンをインポートして使用する

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>自定义模板引擎</title>
    <!-- 导入自定义的模板引擎 -->
    <script src="./js/template.js"></script>
</head>

フロントエンドとバックエンドのインタラクション 2、フォームおよびテンプレート エンジン

ゼロ、記事ディレクトリ

フロントエンドとバックエンドのインタラクション 2、フォームおよびテンプレート エンジン

1. 帳票フォームの基本的な使い方

(1) フォームとは何ですか?

（2）<form>标签的属性

(3) フォームの同期送信とその欠点

2. Ajax経由でフォームデータを送信する

(1) フォーム送信イベントを監視する

(2) フォームのデフォルトの送信動作を防止する

(3) フォーム内のデータを素早く取得

3. 事例 - コメント一覧

(1) レンダリングUIの構造

(2) コメント一覧の取得

(3) コメントを残す

(4) 完全なコード

4. テンプレートエンジンの基本概念

(1) UI構造のレンダリング時に発生する問題

(2) テンプレートエンジンとは何ですか?

(3) テンプレートエンジンのメリット

5.アートテンプレートテンプレートエンジン

(1) アートテンプレートの紹介

(2) アートテンプレートのインストール

(3) アートテンプレートテンプレートエンジンの利用手順

(4) アートテンプレートの標準構文

6. テンプレートエンジンの実装原理

(1) 通常のマッチング

(2) 弦の交換

(3) 定期的なマッチングとその後の置き換え

(4) 簡易テンプレートエンジンの実装

Guess you like

フロントエンドとバックエンドのインタラクション 2、フォームおよびテンプレートエンジン

フロントエンドとバックエンドのインタラクション 2、フォームおよびテンプレートエンジン

（2）`<form>`标签的属性