HTTP协议+Ajax基本知识+axios+模板引擎的基本使用

已于 2023-06-13 13:29:18 修改
阅读量783 收藏 1
点赞数 1
文章标签： 服务器 运维
于 2023-06-03 11:23:17 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Ax3_28/article/details/131018712
版权

1.客服端服务器

我们先来了解一下上网的目的是什么？

例如：刷微博、浏览新闻、在线听音乐、在线看电影、等等...

上网的本质目的：通过互联网的形式来 获取和消费资源

1.2 服务器

上网过程中，负责 存放和对外提供资源 的电脑，叫做服务器。

 1.3 客户端

上网过程中，负责 获取和消费资源 的电脑，叫做客户端

 2. URL地址

        2.1 URL地址的概念

      URl（全称是 UniformResourceLocator）中文叫 统一资源定位符，用于标识互联网上每个资源的唯一存放位置。浏览器只有通过URL地址，才能正确定位资源的存放位置，从而成功访问到对应的资源

常见的URL举例：

        http://www.baidu.com

        http://www.taobao.com

        2.2 URL地址的组成部分

        URL地址一般由三部分组成：

1.客服端与服务器之间的 通信协议

2.存有该资源的 服务器名称

3.资源在服务器上 具体的存放位置

http://www.cnblogs.com/lihfoaghs0gh1561.html

http：通信协议

www.cnblogs.com：服务器名称

lihfoaghs0gh1561.html：资源在服务器位置的具体位置

3.客户端与服务器的通信过程

        3.1 图解客服端与服务器的通信过程

注意：

1. 客服端与服务器之间的通信过程，分为 请求 -- 处理 -- 响应 三个步骤

2. 网页中的每一个资源，都是通常 请求 -- 处理 -- 响应 的方式从服务器获取回来的

4. 服务器对外提供了哪些资源

4.1 网页中如何请求数据

数据，也是服务器对外提供的一种资源。只要是资源，必然要通过 请求 -- 处理 -- 响应 的方式进行获取。

 如果要在网页中请求服务器上的数据资源，则需要用到 XMLHttpRequest 对象

XMLHttpRequest（简称 xhr ）是浏览器提供的 js 成员，通过它，可以请求服务器上的数据资源

最简单的用法 var xhrObj = new XMLHttpRequest（）

4.2 资源的请求方式

客户端请求服务器时，请求的方式有很多种，最常见的两种请求方式分别为 get 和 post 请求

get请求通常用于获取服务端资源（向服务器要资源）

  例如：根据URL地址，从服务器获取 HTML文件、css文件、js文件、图片文件、数据资源等

post请求通常用于向服务器提交数据（往服务器发送资源）

  例如：登录时向服务器提供的登录信息、注册时向服务器提交的注册信息、添加用户时向服务器提交用户信息等各种数据提交操作

5.了解Ajax

5.1 什么是Ajax

Ajax的全称是 Asynchronous Javascript And XML (异步JavaScript和XML) 。

通俗的理解：在网页中利用 XMLHttpRequest对象和服务器进行数据交互的方式，就是Ajax。

5.2 为什么要学Ajax

之前所学的技术，只能把网页做的更美观漂亮，或添加一些动画，但是，Ajax能让我们轻松实现实现网页与服务器之间的数据交互。

6.jQuery中的Ajax

6.1 了解jQuery中的Ajax

        浏览器中提供的 XMLHttpRequest 用法比较复杂，所以 jQuery 对 XMLHttpRequest 进行类封装，提供了一系列关于 AJax 函数，极大的降低了 Ajax的使用难度。

jQuery中发起Ajax请求最常用的三个方法如下：

  • $.get()
  • $.post()
  • $.ajax()

6.2 $.get()函数的语法

jQuery中$.get()函数的功能单一，专门用来发起get请求，从而服务器上的资源请求到客户端进行使用

$.get()函数的语法如下：

$.get(  url , [ data ] ,  [  callback ]  )

其中，三个参数各自代表的含义如下：

参数名             参数类型                是否必选                说明

url                        string                        是                     要请求的资源地址

data                      object                      否                     请求资源期间要携带的参数

callback                function                   否                     请求成功时的回调函数

6.2 $.get() 发起 不带参数 的请求

使用$.get() 函数发起不带参数的请求时，直接提供 请求URL地址 和 请求成功之后的对调函数即可，示例代码如下

       

  <script src="js/jquery-3.7.0.js"></script> // 首先还是需要链入 jQuery 文件
</head>

<body>
  <button id="but">不带参数的请求</button>
  <script>
    $('#but').click(function () {
      $.get('https://ajax-base-api-t.itheima.net/api/getbooks', function (res) {
        console.log(res) //这里是服务器响应回来的数据
      })
    })
  </script>

 6.2 $.get() 发起 带参数 的请求

使用$.get()函数发起带参数的请求时，示例代码如下：

 <script src="js/jquery-3.7.0.js"></script>
  <button>使用GET发起带参数的请求</button>
  <script>
    $('button').click(function () {
      $.get('https://ajax-base-api-t.itheima.net/api/getbooks', { id: 1 }, function (res) {
        console.log(res)//返回的参数
      })
    })
  </script>

 6.3 $.post() 函数的语法

jQuery中的 $.post() 函数的功能单一，专门用来发起 post 请求，从而服务器提交数据

$.post() 函数的语法如下：

$.post(  URL , [ data ] , [ callback ]  )

其中，三个参数各自代表的含义如下：

参数名        参数类型        是否必选        说明

url               string                是                提交数据的地址

data            object                否               要提交的数据

callback      function             否                数据提交成功时的 回调函数

6.3 $.post() 向服务器提交表单数据

使用 $post() 向服务器提交数据的示例代码如下：

 <script src="js/jquery-3.7.0.js"></script>
  <button> POST 发起请求</button>
  <script>
    $('button').click(function () {
      $.post(
        'http://www.liulongbin.top:3006/api/addbook',// 请求地址
        { bookname: '水浒传', author: '施耐庵', publisher: '天津图书出版社' }, // 提交数据
        function (res) {
          console.log(res)  // 返回参数
        }
      )
    })
  </script>

 6.4 $.ajax() 函数的语法

相比于$.get() 和 $.post() 函数，jQuery中提供的 $.ajax() 函数，是一个功能比较共综合的函数，它允许我们对Ajax请求进行更详细的的配置。

$.ajax()函数的基本语法如下：

$.ajax({

type:"" //请求方式，例如 GET 和 POST

url:"" //请求URL地址

data:"" //这次请求要携带的数据

success：funciton(res) {} //请求成功后的会回调函数

})

 6.4 使用$.ajax()发起的GET请求

使用$.ajax()发起GET请求时，只需要将 type属性 的值设置为 ‘  GET ’,即可：

  <script src="js/jquery-3.7.0.js"></script>
  <button>ajax发起GET请求</button>
  <script>
    $('button').click(function () {
      $.ajax({
        url: 'https://ajax-base-api-t.itheima.net/api/getbooks', //请求GET地址
        type: 'GET',  //请求的方式
        data: { id: 1 },// 这次请求要携带的数据
        success: function (res) {//请求成功之后的回调函数
          console.log(res)
        }
      })
    })
  </script>

 6.4 使用 $.ajax() 发起请求 POST 请求

使用 $.ajax 发起 POST 请求时，只需要将 type 属性设置为 ‘’  POST  ‘’ ，即可

  <script src="js/jquery-3.7.0.js"></script>
  <button>ajax发起POST请求</button>
  <script>
    $('button').click(function () {
      $.ajax({
        type: 'POST', //请求的方式
        url: 'https://ajax-base-api-t.itheima.net/api/addbook', //请求 url 地址
        data: {// 要提交服务器的数据
          bookname: '孙子兵法',
          author: '陈启帅',
          publisher: '京海'
        },
        success: function (res) {//请求成功之后的回调函数
          console.log(res)
        }
      })
    })
  </script>

7.接口

7.1 接口的概念

使用 Ajax 请求数据时，被请求的URL地址，就叫做数据接口（简称接口）。同时，每个接口必须有 请求方式。

例如：

http://www.liulongbin.top:3006/api/getbooks  获取图书列表的接口(GET请求) http://www.liulongbin.top:3006/api/addbook   添加图书的接口（POST请求）

7.2 分析接口的请求过程

1. 通过GET方式请求接口的过程

2.通过POST 方式请求接口的过程 

7.3接口测试工具

1.什么是接口测试工具

为了验证接口能否被正常被访问，我们常常需要使用接口测试工具，来对数据接口进行检测。

好处：接口测试工具能让我们在不写任何代码的情况下，对接口进行调用和测试。

2. 下载并安装PostMan

访问 PostMan 的官方下载网址 https://www.getpostman.com/downloads/，下载所需的安装程序后，直接安装即可。

7.3 接口文档

1.什么是接口文档

接口文档，顾名思义就是 接口的说明文档，它是我们调用接口的依据。好的接口文档包含了接口URL，参数以及输出内容的说明，我们参照接口文档就能方便的知道接口的作用，以及接口如何进行调用。

2.接口文档的组成部分

接口文档可以包含很多信息，也可以按需进行精简，不过，一个合格的接口文档，应该包含一下6项内容，从而为接口的调用提供依据。

  1. 接口名称：用来标识各个接口的简单说明。如登录接口，获取图书列表接口等。
  2. 接口URL：接口的调用地址
  3. 调用方式：接口的的调用方式，如GET或POST
  4. 参数格式：接口需要传递的参数，每个参数必须包含参数名称、参数类型、是否必选、参数说明这4项内容
  5. 响应格式：接口的返回值的详细描述，一般包含数据名称、数据类型、说明3项内容。
  6. 返回示例（可选）：通过对象的形式，列举服务器返回数据的结构

3.接口文档示例

8.案例 - 图书管理

8.1 渲染UI结构

8.2 案例用到的库和插件

用到的 css 库 bootstrap.css

用到的 JavaScript 库 jquery.js

用到的 vs code 插件 Bootstrap 3 Snippets

核心代码：

<html lang="en">

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

<body style="padding: 15px;">
  <!-- 添加图书的Panel面板 -->

  <div class="panel panel-primary">
    <div class="panel-heading">
      <h3 class="panel-title">添加新图书</h3>
    </div>
    <div class="panel-body form-inline ">

      <div class="input-group">
        <div class="input-group-addon">书名</div>
        <input type="text" class="form-control" id="inpBookname" placeholder="请输入书名">
      </div>

      <div class="input-group">
        <div class="input-group-addon">作者</div>
        <input type="text" class="form-control" id="inpAuthor" placeholder="请输入作者">
      </div>

      <div class="input-group">
        <div class="input-group-addon">出版社</div>
        <input type="text" class="form-control" id="inpPublisher" placeholder="请输入出版社">
      </div>

      <button id="btnAdd" class="btn btn-primary">添加</button>
    </div>
  </div>
  <!-- 图书的表格 -->
  <table class="table table-bordered table-hover">
    <thead>
      <tr>
        <th>Id</th>
        <th>书名</th>
        <th>作者</th>
        <th>出版社</th>
        <th>操作</th>
      </tr>
    </thead>
    <tbody id="tb"></tbody>
  </table>

</body>
<script>
  function getBookList() {
    $.get(
      'https://ajax-base-api-t.itheima.net/api/getbooks',
      function (res) {
        if (res.status !== 200) return alert('获取数据失败！')
        var rows = []
        $.each(res.data, function (i, item) {
          rows.push(
            '<tr> <td>' + item.id + '</td> <td>' + item.bookname + '</td> <td>' + item.author + '</td> <td>' + item.publisher + '</td> <td><a href="javascript:;" class="del" data-id="' + item.id + '">删除</a></td>  </tr>'
          )
        })
        $('#tb').empty().append(rows.join(''))
      })
  }
  getBookList()
  //通过代理的方式为动态添加的元素绑定点击事件
  $('tbody').on('click', '.del', function () {
    var id = $(this).attr('data-id')
    $.get('https://ajax-base-api-t.itheima.net/api/delbook', { id: id }, function (res) {
      if (res.status !== 200) return alert('获取图书失败！')
      getBookList()
    })
  })
  $('#btnAdd').click(function () {
    var bookname = $('#inpBookname').val().trim()
    var author = $('#inpAuthor').val().trim()
    var publisher = $('#inpPublisher').val().trim()
    if (bookname.length <= 0 || author.length <= 0 || publisher.length <= 0) {
      return alert('请填写完整的图书信息')
    }
    $.post('https://ajax-base-api-t.itheima.net/api/addbook',
      { bookname: bookname, author: author, publisher: publisher },
      function (res) {
        if (res.status !== 201) return alert('添加图书失败')
        getBookList()
        $('#inpBookname').val('')
        $('#inpAuthor').val('')
        $('#inpPublisher').val('')
      }
    )
  })
</script>

</html>

9. 案例 - 聊天机器人

9.1演示案例要完成的效果

9.2 梳理案例的代码结构

  1. 梳理页面的 UI 布局
  2. 将业务代码抽离到 chat.js 中
  3. 了解 resetui() 函数的作用

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" />
  <link rel="stylesheet" href="css/reset.css" />
  <link rel="stylesheet" href="css/main.css" />
  <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
  <script type="text/javascript" src="js/jquery-ui.min.js"></script>
  <script type="text/javascript" src="js/jquery.mousewheel.js"></script>
  <title>聊天机器人</title>
</head>

<body>
  <div class="wrap">
    <!-- 头部 Header 区域 -->
    <div class="header">
      <h3>小思同学</h3>
      <img src="img/person01.png" alt="icon" />
    </div>
    <!-- 中间 聊天内容区域 -->
    <div class="main">
      <ul class="talk_list" style="top: 0px;" id="talk_list">
        <li class="left_word">
          <img src="img/person01.png" /> <span>嗨，最近项我了没？</span>
        </li>
        <!-- <li class="right_word">
          <img src="img/person02.png" /> <spa n>你好哦</span>
        </li> -->
      </ul>
      <div class="drag_bar" style="display: none;">
        <div class="drager ui-draggable ui-draggable-handle" style="display: none; height: 412.628px;"></div>
      </div>
    </div>
    <!-- 底部 消息编辑区域 -->
    <div class="footer">
      <img src="img/person02.png" alt="icon" />
      <input type="text" placeholder="说的什么吧..." class="input_txt" id="put" />
      <input type="button" value="发 送" class="input_sub" id="but" />
    </div>
  </div>
  <!-- 注意：只要为了 audio 制定了新的 src 属性 ，而且指定了 autoplay，那么，语音就会自动播放 -->
  <audio src="" id="voice" autoplay style="display: none;"></audio>
  <script type="text/javascript" src="js/scroll.js"></script>
  <script src="js/chat.js"></script>


</body>

</html>

JS

$(function () {
  // 初始化右侧滚动条
  // 这个方法定义在scroll.js中
  resetui()
  // 为发送按钮绑定鼠标点击事件  
  $('#but').click(function(){
    var index = $('#put').val().trim()
    if(index.length <= 0){
      return $('#put').val('')
    }
    // 如果输入了聊天内容，则将聊天内容追加到页面上显示
    $('#talk_list').append('<li class="right_word"><img src="img/person02.png" /> <span>'+index+'</span></li>')
    $('#put').val('')
    resetui()
    getMsg(index)
  })

  // 获取聊天机器人发送回来的消息 
  function getMsg(index){
    $.ajax({
      method:'GET',
      url:'https://ajax-base-api-t.itheima.net/api/robot',
      data:{
        spoken:index
      },
      success:function(res){
        console.log(res)
        if(res.message === 'success'){
          var msg = res.data.info.text
          $('#talk_list').append('<li class="left_word"><img src="img/person01.png" /> <span>'+msg+'</span></li>')
          resetui()
          getVoice(msg)
        }
      }
    })
  }
  // 把文字转换为语音进行播放
   function getVoice(index){
    $.ajax({
      method:'GET',
      url:'https://ajax-base-api-t.itheima.net/api/synthesize',
      data:{
        text:index
      },
      success:function(res){
        console.log(res)
        if(res.status===200){
          // 播放语音
          $('#voice').attr('src',res.voiceUrl)
        }
      }
    })
   }
   $('#put').keyup(function(e){
    if(e.keyCode === 13){
      $('#but').click()
    }
   })
})

form表单与引擎模板

1. form 表单的基本使用

1.1 什么是表单

表单在网页中主要负责数据采集功能。HTML中的<form>标签，就是用于采集用户输入信息，并通过<form>标签的提交操作，把采集到信息提交到服务器端进行处理。

 

 1.2 表单的组成部分

表单由三个基本部分组成：表单标签         表单域            表单按钮

<form>

<input type="text" name="email_or_mobile" />    

<input type="password" name="password" />  

  <input type="checkbox" name="remember_me" checked />  

  <button type="submit">提交</button>

</form>

表单域：包含了文本框、密码框、隐藏域、多行文本框、复选框、单选框、下拉选择框和文件上传框等。

1.3 <form>标签的属性

<form>标签用来采集数据，<form>标签的属性则是用来规定 如何把采集到的数据发送到服务器。

属性                        值                        描述

acyion                      url地址                规定当提交表单时，向何处发送表单数据

method                    get / post            规定以何种方式把表单数据提交到 action URL

enctpe                     application/x-www-form-urlencoded     规定在发送表单数据之前对其进行编码

                                multipart/form-data

                                text/plain

target                       _blank                       规定在何处打开 action URL

                                _self

                                _parent

                                _top framename

1. action

action 属性用来规定提交表单时，向何处发送表单数据。

action 属性的值应该是后端提供的一个URL地址，这个URL地址专门负责接收表单提交过来的数据。

当 <form> 表单在未指定 action 属性值的情况下，action 的默认值为当前页面的URL地址。

注意：当表单提交后，页面会立即跳转到 action 属性指定的 URL地址。

2. target

target 属性用来规定 在何处打开 action URL

他的可选值5个，默认情况下，target的值是_self，表示在相同的框架中打开 action URL。

值                                描述

_blank                        在新窗口打开

_self                           默认，相同的框架中打开

_parent                      在父框架集中打开（很少用）

_top                            在整体窗口打开（ 很少用）

framename                在指定的框架中打开（很少用）

3. method

method 属性用来规定 以何种方式 把表单数据提交到 action URL。

他的值可选值有两个，分别是 get 和 post

默认情况下，method 的值为 get ，表示通过URL地址的形式，把表单数据提交到 action URL。

注意：

get 方式适合用来提交少量、简单的数据。

post 方式在适合用来提交 大量的、复杂的、或包含 文件上传的数据。

在实际开发中，<form> 表单的post 提交方式用的最多，很少用 get 。例如登录、注册、添加数据等表单简单操作，都需要使用 post 方式来提交表单。

4. enctype

enctype 属性用来规定在 发送表单数据之前如何对数据进行编码。

它的可选值有三个，默认情况下，anctype 的值为 application/x-www-form-urlencoded，表示在发送前编码所有的字符。

值                                                                描述

application/x-www-form-urlencoded           在发送前编码所有字符（默认）

multipart/form-data                                     不对字符编码。

                                                                    在使用包含文件上传控件的表单时，必须使用该值。

text/plain                                                  空格转换为 “+” 加号，但不对特殊字符编码。（很少用）

注意：

在涉及到 文件上传 的操作时，必须 将 anctype 的值设置为 multipart/form-data

如果表单的提交不涉及到文件上传操作，则直接将 enctype 的值设置为  application/x-www-form-urlencoded 即可！

1.4 表单的同步提交及缺点

1. 什么是表单的同步提交

通过点击 submit 按钮，触发表单提交的操作，从而使页面跳转到 action URL 的行为，叫做表单的同步提交。

2. 表单同步提交的缺点

  1. < form > 表单同步提交后，整个页面会发生跳转，跳转到 action URL 所指向的地址，用户体验较差。
  2. < form > 表单同步提交后，页面之前的状态和数据会丢失。

思考：如何解决上述两个问题？

3. 如何解决表单同步提交及缺点

如果使用表单提交数据，则会导致以下两个问题：

  1. 页面会发生跳转
  2. 页面之前的状态和数据会丢失

解决方案：表单只负责采集数据，Ajax负责将数据提交到服务器

2.通过Ajax提交表单数据

2.1 监听表单提交事件

在 jQuery中，可以使用如下两种方式，监听到表单的提交事件：

$('#form1').submit(function(e) {
   alert('监听到了表单的提交事件')
})

$('#form1').on('submit', function(e) {
   alert('监听到了表单的提交事件')
})

2.2 阻止表单默认提交行为

当监听到表单提交事件以后，可以调用表单事件对象的 event.preventDefault() 函数，来阻止表单的提交和页面的跳转，示例代码如下

$('#form1').submit(function(e) {
   // 阻止表单的提交和页面的跳转
   e.preventDefault()
})

$('#form1').on('submit', function(e) {
   // 阻止表单的提交和页面的跳转
   e.preventDefault()
})

2.3 快速获取表单中的数据

1. serialize（）函数

为了简化表单中的数据的获取操作，jQuery提供了serialize（）函数，其语法格式如下：

$(selector).serialize()

serialize() 函数的好处:可以一次性获取到表单中的所有的数据

2.serialize（）函数示例

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

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

注意：在使用 serialize（）函数快速获取表单数据时，必须为每个表单元素添加 name 属性！

3.案例 - 评论列表

3.1 渲染UI结构

需要 引入 jquery 文件 和 bootstrap文件

 3.2 获取评论列表

 function getCmtList() {
    $.get('http://www.liulongbin.top:3006/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.3 发表评论

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

总体代码：

HTML

<html lang="en">

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

<body>

  <div class="panel panel-primary">
    <div class="panel-heading">
      <h3 class="panel-title">发表评论</h3>
    </div>
    <form class="panel-body" id="formAddcmt">
      <div naem="">评论人：</div>
      <input type="text" class="form-control" name="username">
      <div naem="">评论内容：</div>
      <textarea class="form-control" name="content"></textarea>
      <button type="submit" class="btn btn-primary" naem="">发表评论</button>
    </form>
  </div>
  <!-- #5BCODE #FOAD4E -->
  <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>
  <script>
  </script>
</body>

</html>

JS


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

  getemmentLsit()

  $(function(){


    $('#formAddcmt').submit(function(e){
     e.preventDefault();
    var data = $(this).serialize()
      $.post('https://ajax-base-api-t.itheima.net/api/addcmt',data,function(res){
      if(res.status !== 201) return alert('发表评论失败')
      getemmentLsit()
      // 重置表单中所有元素的值
      $('#formAddcmt')[0].reset()
      })
    })
    })

4.模板引擎的基本概念

4.1渲染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结构

上述代码是通过 字符串拼接 的形式，来渲染 UI 结构。

如果 UI 比较复杂，则拼接字符串的时候需要格外注意 引导之前的嵌套。且一旦需求发生变化，修改起来也非常麻烦。

4.2 什么是模板引擎

模板引擎，顾名思义，它可以根据程序员指定的 模板结构 和 数据，自动生成一个完整的 HTML 页面。

4.3 模板引擎的好处

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

5.art-template简介

5.1 art-template简介

art-template 是一个简约、超快的模板引擎。中文官网首页为  http://aui.github.io/art-template/zh-cn/index.html。

 5.2 art-template的安装

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

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

1. 使用传统方式渲染UI结构

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

 2. art-template的使用步骤

  1. 导入 art-template 文件
  2. 定义数据
  3. 定义模板
  4. 调用 template 函数
  5. 渲染 HTML 结构

5.4 art-template标准语法

1. 什么是标准语法

art-template提供了 {{}} 这种语法格式，在 {{}} 内可以进行 变量输出 ，或 循环数组 等操作，这种 {{}} 语法在art-template 中被称为标准语法。

2. 标准语法- 输出

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

在 {{ }} 语法中，可以进行 变量 的输出、对象属性 的输出、三元表达式 输出、逻辑或 输出、加减乘除等表达式 输出。

3.标准语法 - 原文输出

{{@ value }}

如果要输出的 value 值中，包含了 HTML 结构，则需要使用 原本输出 语法，才能保证 HTMl 标签被正常渲染。

4.标准语法 - 条件输出

如果要实现条件输出，则可以在 {{}} 中使用 if … else if … /if 的方式，进行按需输出。

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

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

5. 标准语法 – 循环输出

如果要实现循环输出，则可以在 {{ }} 内，通过 each 语法循环数组，当前循环的索引使用 $index 进行访问，当前的循环项使用 $value 进行访问。

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

6. 标准语法 – 过滤器

 过滤器的本质，就是一个 function 处理函数。

{{value | filterName}}

过滤器语法类似管道操作符，它的上一个输出作为下一个输入。

定义过滤器的基本语法如下：

template.defaults.imports.filterName = function(value){/*return处理的结果*/}

5.6 案例 - 新闻列表

 实现步骤

  1. 获取新闻数据
  2. 定义 template 模板
  3. 编译模板
  4. 定义时间过滤器
  5. 定义补零函数

代码

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="./assets/news.css" />
  <script src="./lib/jquery.js"></script>
  <script src="./lib/template-web.js"></script>
  <script src="./js/new.js"></script>
</head>

<body>

  <div id="news-list">
  </div>
  <!-- 定义模板 -->
  <script type="text/html" id="tpl-news">
    {{each data}}
    <div class="news-item">
      <img class="thumb" src="{{'https://ajax-base-api-t.itheima.net' + $value.img}}" alt="" />
      <div class="right-box">
        <h1 class="title">{{$value.title}}</h1>
        <div class="tags">
          {{each $value.tags}}
          <span>{{$value}}</span>
          {{/each}}
        </div>
        <div class="footer">
          <div>
            <span>{{$value.source}}</span>&nbsp;&nbsp;
            <span>{{$value.time | dateFormat }}</span>
          </div>
          <span>评论数: {{$value.cmtcount}}</span>
        </div>
      </div>
    </div>
    {{/each}}
  </script>
</body>

</html>

JS：

$(function(){
  // 给时间补 0 函数
  function pad(n){
    if(n < 10){
      return '0' + n
    }else{
      return n
    }
  }
  // 定义格式化时间的过滤器
  template.defaults.imports.dateFormat = function(dtStr){
    var dt = new Date(dtStr)
    var y = dt.getFullYear()
    var m = pad(dt.getMonth()+1)
    // m = m < 10 ? '0' + m : m 
    var d = pad(dt.getDate())
    // d = d < 10 ? '0' + d : d 
    var hh = pad(dt.getHours())
    // hh = hh < 10 ? '0' + hh : hh 
    var mm = pad(dt.getMinutes())
    // mm = mm < 10 ? '0' + mm : mm 
    var ss= pad(dt.getSeconds())
    // ss = ss< 10 ? '0' + ss: ss
    return y + '-' + m + '-' + d +' '+ hh + ':' + mm + ':' + ss
  }
  function getNewsList(){
    $.get('https://ajax-base-api-t.itheima.net/api/news',
    function(res){
      if(res.status !== 200){
        return alert('数据获取失败')
      }
      console.log(res)
      for(var i = 0 ; i < res.data.length ; i++){
        // 把每一项的 tags 属性，从字符串改造成字符串数组
        res.data[i].tags = res.data[i].tags.split(',')
      }
      console.log(res)
      var htmlStr = template('tpl-news',res)
      $('#news-list').html(htmlStr)
    })
  }
getNewsList()
})

6.模板引擎的实现原理

6.1 正则与字符串操作

1.基本语法

exec（）函数用于 检索字符串 中的正则表达式的匹配。

如果字符串中有匹配值，则返回该匹配值，否则返回 null 。

RegExpObject.exec(string)

示例代码如下：

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

2. 分组

正则表达式中（）包起来的内容表示一个分组，可以通过分组来 提取自己想要的内容，示例代码如下：

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

 var patternResult = pattern.exec(str)
 console.log(patternResult)
 // 得到 name 相关的分组信息
 // ["{{name}}", "name", index: 7, input: "<div>我是{{name}}</div>", groups: undefined]

3. 字符串的 replace 函数

replace（）函数用于在字符串中 用一些字符替换另一些字符，语法格式如下：

var result = '123456'.replace('123', 'abc') // 得到的 result 的值为字符串 'abc456'

示例代码如下：

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)

4. 多次replace

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

5. 使用 while 循环 replace

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>

6. replace 替换为真值

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)

6.2 实现简易的模板引擎

1.实现步骤

  1. 定义模板结构
  2. 预调模板结构
  3. 封装 template
  4. 导入并使用自定义的模板引擎

2.定义模板结构

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

3.预调用模板引擎

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

4.封装 template 函数

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
}

5.导入并使用自定义的模板引擎

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

Ax3_28
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
使用axios请求时,发送formData请求的示例
10-16
今天小编就为大家分享一篇使用axios请求时,发送formData请求的示例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue axios封装 axios 请求
03-27
vue axios封装 axios 请求
前端axios请求封装
09-29
api模块代码
vue axios post请求发送复杂数据类型详解
热门推荐
前端卡卡的博客
09-12 1万+
vue axios post请求发送复杂数据类型详解 前面会有一些基础的介绍，懂的人可跳过前面的基础介绍直接copy文档末尾的代码 基础介绍开始 一般post不允许发送复杂数据类型，比如object和array，而jquery的ajax封装了这个方法，使得可以发送复杂数据格式， 代码 $.ajax({ type: ...
Axios 源码解读 —— 网络请求篇
qq_34621851的博客
01-15 587
上一章我们介绍了 Axios 源码解读 —— request 篇，这一章我们来介绍 Axios 实际发起网络请求的部分吧，也就是 dispatchRequest 方法。 dispatchRequest 这个方法定义也比较简单（如下图） 第 29 行 —— 取消请求 我们来逐行解析每一行代码所做的事情吧，首先是第 29 行的取消请求。（如下） throwIfCancellationRequested(config); 这个动作不仅仅在发起正式请求前做了一次，而且在请求成功和请求失败时都做了一次。 只要是被
【Ajax】模板引擎
早睡早起长头发的博客
01-19 1544
姓名：{{name}}年龄：{{ age }}性别：{{ gender}}住址：{{address }}
Ajax1day(get,post请求，PostMan测试工具，图书馆里案例，聊天机器人案例)
shrimper
07-18 1919
Ajax的全称是(异步JavaScript和XML)。通俗的理解在网页中利用对象和服务器进行数据交互的方式，就是Ajax。如果要在网页中请求服务器上的数据资源，则需要用到对象。（简称xhr）是浏览器提供的js成员，通过它，可以请求服务器上的数据资源。最简单的用法。...
Ajax小项目
weixin_63267832的博客
09-19 411
主要页面结构通过使用UI布局，jQuery库等等。
Ajax中模板引擎的使用
weixin_44868390的博客
07-04 303
背景: 在ajax()请求success方法的回调函数中,我们的业务逻辑使用生成的字符串追加到当前页面中,拼接字符串的过程太麻烦,而且也不利于后期的维护,所以就有了模板引擎的出现 步骤: 引入模板文件 2.根据业务需求编写模板 type= text/template 3.发送ajax请求,在success回调函数中用var html = template(模板id, 对象(是数组的话包...
react + ts or vue + ts 通用axios封装的方法。
07-21
react + ts or vue + ts 通用axios封装的方法。 封装通用ts类型，封装通用requestMode.ts，统一存放api请求路径
图书管理系统课设（SpringBoot+LayUi+AJAX+ELEMENTUI+Axios）
10-25
使用了SpringBoot框架，前端页面使用LayUi和ELEMENTUI，部分内容通过Axios完成了前后端的分离；管理员模块实现了对图书，图书类型的管理，能够对未定期归还图书的读者发送消息提醒；读者模块能够实现图书的借阅。
axios的基本使用axios的基本使用
02-02
axios使用 axios的基本使用axios的基本使用
vue3+webpack+vue-router路由封装+axios封装+vuex封装
05-23
vue3+webpack+vue-router路由封装+axios封装+vuex封装，下载资源中包括了vue3+webpack+vue-router路由封装+axios封装+vuex封装的相关代码，分别对vue-router路由进行了封装，对axios进行了封装，对vuex进行了封装，...
vue3+TS+axios+route+element plus 可二次开发的模板，包括请求使用方法，完美封装 上手即用
08-19
vue3+TS+axios+route+element plus 可二次开发的模板，包括请求使用方法，完美封装 上手即用
【linux】Bad owner or permissions on
codears的博客
04-23 174
我们查看他的权限时发现它所链接的文件权限为777。
1. 2XX (Success 成功状态码)
最新发布
2402_83160520的博客
04-23 229
状态码2XX表示请求被正常处理了。
3节点ubuntu24.04服务器docker-compose方式部署高可用elk+kafka日志系统并接入nginx日志
qq_41905051的博客
04-23 1053
3节点ubuntu24.04服务器docker-compose方式部署高可用elk+kafka日志系统并接入nginx日志
【勒索病毒恢复】.svh勒索病毒介绍及恢复方案
safe130的博客
04-23 705
halo，.360，.faust，.eking，.wis，.mkp，.malox，.rmallox，.mallox，ma1x0，.live，.carver，.locked，_locked，.locked1，.svh , lockbit, .datah等等，请注意，恢复被勒索病毒加密的数据并非总是成功，且过程中可能存在数据丢失或损坏的风险。为了防范svh勒索病毒的感染，用户应该保持警惕，不轻易打开未知来源的邮件附件或点击不明链接，同时定期更新和修补电脑上的软件漏洞，使用强密码，并启用防火墙等安全防护措施。
第九章 进程和计划任务管理【☆】
2401_83883919的博客
04-23 972
一个进程可以创建多个子进程，子进程之间相互独立，速度较慢，但是互不影响。线程是共享资源，速度快，但一个线程崩掉其他线程同时崩掉。
vue+elementui的el-form+axios的api接口怎么配合使用
04-21
可以先在el-form的submit方法中使用axios发送请求，具体的方法如下： 在template中： ``` 用户名" prop="username"> <el-input v-model="form.username"></el-input> 密码" prop="password"> ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值