form表单与模板引擎

我就是我 2024-04-01 18:45 66阅读 0赞

#### form表单与模板引擎 ####

*  一、form表单的基本使用
 *   *  1.1 什么是表单
     *  1.2 表单的组成部分
     *  1.3 <form>标签的属性
     *  1.4 表单的同步提交及缺点
 *  二、通过ajax提交表单数据
 *   *  2.1 监听表单提交事件
     *  2.2 阻止表单默认提交行为
     *  2.3 快速获取表单中的数据serialize
 *  三、案例-评论列表
 *  四、模板引擎的基本概念
 *   *  4.1 渲染UI结构时遇到的问题
     *  4.2 什么是模板引擎
     *  4.3 模板引擎的好处
 *  五、art-template模板引擎
 *   *  5.1 art-template简介
     *  5.2 art-template的安装
     *  5.3 art-template模板引擎的基本使用
     *  5.4 art-template标准语法
 *  六、模板引擎的实现原理
 *   *  6.1 正则与字符串操作
     *  6.2 实现简易的模板引擎

--------------------

## 一、form表单的基本使用 ##

### 1.1 什么是表单 ###

> ☀️

`表单在网页中主要负责数据采集功能。HTML中的<form>标签，就是用于采集用户输入的信息，并通过<form>标签的提交操作，把采集到的信息提交到服务器端进行处理。`  
![在这里插入图片描述][6f5615e3a4a7470e9f540c08790e32ff.png]

### 1.2 表单的组成部分 ###

![在这里插入图片描述][fcc8615bbb4a49c28696afa75cb365ee.png]

### 1.3 标签的属性 ###

![在这里插入图片描述][3928172bbb0a47e8aa35a74cfef8639a.png]  
![在这里插入图片描述][fc9bda7d84744e938d468f3bb6a14ab4.png]  
![在这里插入图片描述][3651a8e1f3e14e65a7dd9bfd34341f77.png]  
![在这里插入图片描述][fa121d4fdf7d42d5bd2fed0b9144cf07.png]  
![在这里插入图片描述][e3d5bbb4474f45b7a74a1e6e8dc2f9f7.png]  
![在这里插入图片描述][f41459e9891c4b819fa15e109e3cfb0b.png]

### 1.4 表单的同步提交及缺点 ###

![在这里插入图片描述][d118e109dc92459aa789f3a0aab0e33e.png]  
![在这里插入图片描述][07922ed119d143d9894d09760d71f328.png]  
![在这里插入图片描述][3db6963acf204f50ac26122dc929a98d.png]

--------------------

## 二、通过ajax提交表单数据 ##

### 2.1 监听表单提交事件 ###

> ☀️

![在这里插入图片描述][99522387661e43e9aad79cf467807180.png]

<form action="/login" id="f1">
        <input type="text" name="user_name" />
        <input type="password" name="password" />
        <button type="submit">提交</button>
      </form>
    
      <script>
        $(function () {
        
          // 第一种方式
          // $('#f1').submit(function () {
        
          //   alert('监听到了表单的提交事件')
          // })
    
          // 第二种方式
          $('#f1').on('submit', function () {
          
            alert('监听到了表单的提交事件2')
          })
        })
      </script>

### 2.2 阻止表单默认提交行为 ###

![在这里插入图片描述][f0af7d1b23874e7580de474d14db7242.png]

### 2.3 快速获取表单中的数据serialize ###

![在这里插入图片描述][5c8005abbd9040d5aad6a24f9c716184.png]  
![在这里插入图片描述][2c0ae0e86ad444528ed4200a1fcc468a.png]

<form action="/login" id="f1">
        <input type="text" name="user_name" />
        <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>

--------------------

## 三、案例-评论列表 ##

> ☀️

![在这里插入图片描述][0333cb3340744114be9de66d3dba12b8.png]

<!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>
    
        </li>
      </ul>
    
    </body>
    
    </html>

--------------------

## 四、模板引擎的基本概念 ##

### 4.1 渲染UI结构时遇到的问题 ###

> ☀️

![在这里插入图片描述][a0010653629949c686f7e666fb0c2d0b.png]

### 4.2 什么是模板引擎 ###

![在这里插入图片描述][5414de8cdfe9433f8f0d9bb4372269a4.png]

### 4.3 模板引擎的好处 ###

1.  减少了字符串的拼接操作
2.  使代码结构更清晰
3.  使代码更易于阅读与维护

--------------------

## 五、art-template模板引擎 ##

### 5.1 art-template简介 ###

> ☀️

`art-template 是一个简约、超快的模板引擎。中文官网首页为`  
[art-template地址][art-template]  
![在这里插入图片描述][a428cbabd79840cba1299d4d1eb1aa26.png]

### 5.2 art-template的安装 ###

`在浏览器中访问 http://aui.github.io/art-template/zh-cn/docs/installation.html 页面，找到下载链接后，鼠标右键，选择“链接另存为”，将 art-template 下载到本地，然后，通过 <script> 标签加载到网页上进行使用。`  
![在这里插入图片描述][b27551d65c0a4e76976761ee13d13e6e.png]

### 5.3 art-template模板引擎的基本使用 ###

![在这里插入图片描述][6d69d2a81aae45db84a18498bb4f2a2e.png]  
![在这里插入图片描述][e21e71d444084733ade94faf4488bc5a.png]

### 5.4 art-template标准语法 ###

`art-template 提供了 { { }} 这种语法格式，在 { { }} 内可以进行变量输出，或循环数组等操作，这种 { { }} 语法在 art-template 中被称为标准语法。`  
![在这里插入图片描述][2d19ad9ad52947f0a6dbf258ed928775.png]  
![在这里插入图片描述][5454b0c20ffd44c5b83d81e665823bd8.png]  
![在这里插入图片描述][606c6178772144f989eb8eff9927c7dd.png]  
![在这里插入图片描述][5c13fabde1f34873b0683703e7710c6e.png]  
![在这里插入图片描述][c57a4da76eb04db88266fa4f8a3efee2.png]  
![在这里插入图片描述][559eef572a394ed6abbf868f66b2990c.png]  
![在这里插入图片描述][112da7a99c0249ea8c414a779a169670.png]  
**传统方式渲染UI结构**

<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>

**模板**

--------------------

## 六、模板引擎的实现原理 ##

### 6.1 正则与字符串操作 ###

> ☀️

![在这里插入图片描述][5a64a78d4e8446909e2fe17fca1675c5.png]

![在这里插入图片描述][6be2e9546e1949c782b17cd1c614d199.png]

![在这里插入图片描述][a2ba73d478944d8eb5159a2040280861.png]

![在这里插入图片描述][a2b1929ae0154d18b53346d47343e564.png]

![在这里插入图片描述][8993829b27e94def84a420c8935a0091.png]

![在这里插入图片描述][741d6ef4518649bb96cda56f1f7d8fab.png]

### 6.2 实现简易的模板引擎 ###

![在这里插入图片描述][7b37504fcfd240a89e29673d56822eee.png]  
![在这里插入图片描述][04d8696bc8c845f3888f39b9e701d924.png]  
![在这里插入图片描述][f63e5986a94246d1b16a3d01b20de1a0.png]  
![在这里插入图片描述][f398c6b7545240998a3648adcc60e729.png]  
![在这里插入图片描述][cd957c6b45ab42f1b6364e135b24c6ce.png]

--------------------

[6f5615e3a4a7470e9f540c08790e32ff.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/a455f6ba231546b6982d2b2ac480bb08.png
[fcc8615bbb4a49c28696afa75cb365ee.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/1dbccdb386c141ce9ffe8ba52f4f3d96.png
[3928172bbb0a47e8aa35a74cfef8639a.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/17f90b11f6aa4103a32a9440dc136b7e.png
[fc9bda7d84744e938d468f3bb6a14ab4.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/f94d18c80bd640d89cca4907f7c3e7c1.png
[3651a8e1f3e14e65a7dd9bfd34341f77.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/34124a102b3b40e48d7c4a140f3eea27.png
[fa121d4fdf7d42d5bd2fed0b9144cf07.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/da5131a584d440f38e3030775df7d9ba.png
[e3d5bbb4474f45b7a74a1e6e8dc2f9f7.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/6ce62954bca84cec80b107bc666728ec.png
[f41459e9891c4b819fa15e109e3cfb0b.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/a8d87646b4244ccda5a8b278a88f4c48.png
[d118e109dc92459aa789f3a0aab0e33e.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/1e9a4e83d78245e1b9b4feb07c75d86b.png
[07922ed119d143d9894d09760d71f328.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/dae5de6c490d420a96da6961bfee2466.png
[3db6963acf204f50ac26122dc929a98d.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/ae324ede0e43449fb2e7425a201fb2ef.png
[99522387661e43e9aad79cf467807180.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/d6dfba93ee2541338ed3f6f56cc88f36.png
[f0af7d1b23874e7580de474d14db7242.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/9cd597fc7a8d42ba9a8c1ba06deb48cc.png
[5c8005abbd9040d5aad6a24f9c716184.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/47c4d561ee454af4b7134d194b8a8c5e.png
[2c0ae0e86ad444528ed4200a1fcc468a.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/bad295c4633a4ecd9f02ea6d282dbb3b.png
[0333cb3340744114be9de66d3dba12b8.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/abae116edf264f4e818db1cef0e90a6d.png
[a0010653629949c686f7e666fb0c2d0b.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/a693cd3d52a54501ac75296ab7c554ac.png
[5414de8cdfe9433f8f0d9bb4372269a4.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/6868aa86637a4b318683579799c1b8a2.png
[art-template]: http://aui.github.io/art-template/zh-cn/index.html
[a428cbabd79840cba1299d4d1eb1aa26.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/4f9540da56d542d5b43ad361db3038a9.png
[b27551d65c0a4e76976761ee13d13e6e.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/19515181ed3c444c8adf213f72518ff5.png
[6d69d2a81aae45db84a18498bb4f2a2e.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/658b68e606ee453791e306968722fc32.png
[e21e71d444084733ade94faf4488bc5a.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/8ef64a5d2b6748e0bccd7e4eb299c7fe.png
[2d19ad9ad52947f0a6dbf258ed928775.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/96aeb3fa1c55491f86516c0846f3aad3.png
[5454b0c20ffd44c5b83d81e665823bd8.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/90a2a54b9f474dd3b75ea5ea91b9f77b.png
[606c6178772144f989eb8eff9927c7dd.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/ded546ebd6dc412a8135dee6b45ee77d.png
[5c13fabde1f34873b0683703e7710c6e.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/6f0f66ce3a534e49bddb0e11b3ea9993.png
[c57a4da76eb04db88266fa4f8a3efee2.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/3fe153aa53f9459782b0f8f5e86f9227.png
[559eef572a394ed6abbf868f66b2990c.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/8c1471a6787c4bcda3b36fb13e529564.png
[112da7a99c0249ea8c414a779a169670.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/0f3ee233942149a58b64478d61759a0b.png
[5a64a78d4e8446909e2fe17fca1675c5.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/6d2c01f0fd194b839f3fe34463e68965.png
[6be2e9546e1949c782b17cd1c614d199.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/d3477de037b543cb8f315c66992eaedb.png
[a2ba73d478944d8eb5159a2040280861.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/6734158ab94344ae8a00d4201b4eb305.png
[a2b1929ae0154d18b53346d47343e564.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/5f74ccf823f545da8ee22751b954f3cd.png
[8993829b27e94def84a420c8935a0091.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/bd83783fad104fe3ac4908e15a3199d9.png
[741d6ef4518649bb96cda56f1f7d8fab.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/888ea3a0b6cc4eab8f1a3a09cf4340d2.png
[7b37504fcfd240a89e29673d56822eee.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/ea07b0e73e2f40198d76a01a9f2005d1.png
[04d8696bc8c845f3888f39b9e701d924.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/bda9565630c54b22934c33f2a6af3c56.png
[f63e5986a94246d1b16a3d01b20de1a0.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/3cd2550ac5264f71baac4db9207f7667.png
[f398c6b7545240998a3648adcc60e729.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/8644effe11254c98b2d208050c0eb78e.png
[cd957c6b45ab42f1b6364e135b24c6ce.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/c4596ae093a8457c957055fadaa88e37.png