axios获取数据增删改查

最新推荐文章于 2024-07-12 04:25:43 发布

Q_MUMU

最新推荐文章于 2024-07-12 04:25:43 发布

阅读量7.9k

点赞数 7

分类专栏： vue学习知识点记录

vue学习知识点记录专栏收录该内容

14 篇文章 1 订阅

订阅专栏

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

<head>
  <title></title>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <script src="./vue.js"></script>
  <!-- 1. 引入axios文件 -->
  <script src="./axios.js"></script>
  <style>

    #app{
            width:600px;
                margin:10px auto;
        }
          .tb{
              border-collapse:collapse;
              width: 100%;
          }
          .tb th{
              background-color: #0094ff;
              color:white;
          }
  
          .tb td,.tb th{
              padding:5px;
              border:1px solid black;
              text-align: center;
          }
  
          .add{
              padding: 5px;
              border:1px solid black;
              margin-bottom: 10px;
          }
      </style>
</head>

<body>
  <div id="app">
    <div class="add">
      编号:<input type="text" v-model="newId" id="myIdInput" ref="idRef">
      品牌名称:<input type="text" v-model="newName" ref="nameRef">
      <input type="button" value="添加" @click="addData">
    </div>

    <div class="add">
      品牌名称:<input type="text" placeholder="请输入搜索条件" v-model="searchName" @keydown.enter="search">
    </div>

    <div>
      <table class="tb">
        <tr>
          <th>编号</th>
          <th>品牌名称</th>
          <th>创立时间</th>
          <th>操作</th>
        </tr>
        <tr v-for="(item, index) in list" :key="index">
          <td>{{item.id}}</td>
          <td>{{item.name}}</td>
          <td>{{item.ctime}}</td>
          <td>
            <button @click="deleteData(item.id)">删除</button>
          </td>
        </tr>
        <tr v-if="list.length === 0">
          <td colspan="4">没有品牌数据</td>
        </tr>
      </table>
    </div>
  </div>
</body>
<script>
  let vm = new Vue({
    el: '#app',
    data: {
      newId: '',
      newName: '',
      list: [],
      searchName: '' //获取搜索的名字
    },
    methods: {
      // 添加数据
      addData() {
       let url = 'http://list'
       axios.post(url, {id: this.newId, name: this.newName, ctime: new Date()})
        .then(res => {
          // console.log(res);
          if(res.status === 201) {
            // 重新刷新一下列表数据
            this.getList()
          }
        })
      },
      // 获取列表数据方法
      getList() {
        let url = 'http://19st'
        // 调用axios的get方法，获取数据
        axios.get(url)
          .then(res => {
            console.log(res);
            // 将获取回来的数据赋值给list
            this.list = res.data
          })
          .catch(err => {
            console.log(err);
          })
      },
      // 搜索方法
      search() {
        let url = 'http://1list'
        axios.get(url,{params: {name: this.searchName}})
          .then(res => {
            if (res.status === 200) {
              this.list = res.data
              this.searchName = ''
            }
          })
      },
      // 删除方法
      deleteData(id) {
        let url = `http://19list/${id}`
        axios.delete(url)
          .then(res => {
            this.getList()
          })
      }
    },
    mounted () {
      this.getList()
    }
  })
</script>

</html>