使用vue&axios请求的get方式实现留言评论的添加，删除功能

最新推荐文章于 2023-08-19 16:05:09 发布

本地是好的

最新推荐文章于 2023-08-19 16:05:09 发布

阅读量2k

点赞数 2

CC 4.0 BY-SA版权

分类专栏： Vue 文章标签：留言评论功能案例

本文链接：https://blog.youkuaiyun.com/qq_40958876/article/details/97026337

Vue 专栏收录该内容

34 篇文章

订阅专栏

实现样式

在这里插入图片描述

axios请求


axios.get(url, {
  params: {
    key: value
  }
}).then( res => {
  console.log(res.data)
})


axios.post(url, {
  key: value,
  key2: value2
}).then(res => {
  console.log(res.data)
})

接口文档

公共地址: http://172.16.13.100

查询评论

用于查询所有的评论内容

接口地址: /getComments.php
请求方式: GET
请求参数无

新增评论

用于新增一条评论

接口地址: /addComment.php
请求方式: GET
请求参数

参数名	默认值	描述
name	‘’	留言的人的名字
content	‘’	留言的内容

删除评论

用于删除一条评论

接口地址: /delComment.php
请求方式: GET
请求参数

参数名	默认值	描述
id	‘’	留言的id

代码实现

<!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="./bootstrap.css">
</head>

<body>
  <div class="container" id="app">
    <div class="panel panel-default">
      <div class="panel-heading">
        评论
      </div>
      <div class="panel-body">
        <div class="form-group">
          <input v-model="comment.name" type="text" class="form-control" placeholder="请输入姓名">
        </div>
        <div class="form-group">
          <textarea v-model="comment.content" class="form-control" rows="5" placeholder="请输入留言内容"></textarea>
        </div>
        <button class="btn btn-success pull-right" @click="send">发布</button>
      </div>
      <ul class="list-group clearfix">
        <template v-if="comments.length">
          <li class="list-group-item" v-for="(comment, index) in comments">
            <button @click="del(index)" type="button" class="close"><span>&times;</span></button>
            <h5 class="list-group-item-heading">{{comment.name}}:</h5>
            <p class="list-group-item-text">
              {{comment.content}}
              <time class="pull-right text-muted">{{comment.date}}</time>

            </p>
          </li>
        </template>
        <li v-else class="list-group-item disabled">暂无评论</li>
      </ul>
    </div>
  </div>


  <script src="./vue.js"></script>
  <script src="./axios.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        comment: {
          name: '',
          content: ''
        },
        comments: []
      },
      methods: {
        del(index) {
          console.log(this.comments[index].id)
          // 获取到要删除的id
          const id = this.comments[index].id
          // 然后调用接口删除数据库中的数据
          axios.get('http://172.16.13.100/delComment.php', {
            params: {
              // id: id
              id
            }
          }).then(res => {
            console.log(res.data)
            if (res.data.code === 200) {
              // 删除前端的数据
              this.comments.splice(index, 1)
            }
          })
        },
        send() {
          // const {name, content} = this.comment
          // 发起请求 addComment.php
          /* axios.get(`http://172.16.13.100/addComment.php`, {
            params: {
              // name: name,
              name,
              // content: content
              content
            }
          }) */

          axios.get('http://172.16.13.100/addComment.php', {
            params: this.comment
          }).then(res => {
            // res获取到的是axios对请求结果二次封装的结果 res.data才是对应的内容
            console.log(res.data)
            if (res.data.code === 200) {
              // 拿到后台返回的res.data.data 是新增的数据
              this.comments.push(res.data.data)
              this.comment.content = ''
              this.comment.name = ''
            }
          })
        }
      },
      created() {
        // create会在网页加载后立即执行
        // 下面是axios的get请求示例
        /* $.ajax({
          url: '',
          type: "GET",
          data: {

          },
          dataType: "JSON",
          success () {

          }
        })
        */
        axios.get('http://172.16.13.100/getComments.php').then(res => {
          // axios将请求到的结果又封装了一层 res.data才是请求到的内容
          // console.log(res.data)
          if (res.data.code === 200) {
            // 将请求到的res.data.data设置给this.comments
            this.comments = res.data.data
          }
        })

      }
    })
  </script>
</body>

</html>