前端笔记Vue项目day4(九）

最新推荐文章于 2023-08-21 20:16:49 发布

czbkzmj

最新推荐文章于 2023-08-21 20:16:49 发布

阅读量182

点赞数

分类专栏：前端与移动开发

本文链接：https://blog.csdn.net/czbkzmj/article/details/101456983

版权

前端与移动开发专栏收录该内容

72 篇文章 0 订阅

订阅专栏

本文介绍了一个基于Vue的图书列表案例，利用axios发送AJAX请求获取图书数据，并将数据渲染到表格中展示。内容包括配置axios的公共URL、定义异步方法queryData来获取并显示图书列表，以及在DOM加载完成后调用该方法。

摘要由CSDN通过智能技术生成

图书列表案例1. 基于接口案例-获取图书列表

导入axios 用来发送ajax
把获取到的数据渲染到页面上
[mw_shl_code=applescript,true] <div id="app">
      <div class="grid">
         <table>
            <thead>
                  <tr>
                     <th>编号</th>
                     <th>名称</th>
                     <th>时间</th>
                     <th>操作</th>
                  </tr>
            </thead>
            <tbody>
                  
                  <tr :key='item.id' v-for='item in books'>
                     <td>{{item.id}}</td>
                     <td>{{item.name}}</td>
                     <td>{{item.date }}</td>
                     <td>
                        <a href="">修改</a>
                        <span>|</span>
                        <a href="">删除</a>
                     </td>
                  </tr>
            </tbody>
         </table>
      </div>
</div>
<script type="text/javascript" src="js/vue.js"></script>
1.  导入axios
<script type="text/javascript" src="js/axios.js"></script>
<script type="text/javascript">
      /*
         图书管理-添加图书
      */[/mw_shl_code]
[mw_shl_code=applescript,true] # 2 配置公共的url地址  简化后面的调用方式
      axios.defaults.baseURL = 'http://localhost:3000/';
      axios.interceptors.response.use(function(res) {
         return res.data;
      }, function(error) {
         console.log(error)
      });

      var vm = new Vue({
         el: '#app',
         data: {
            flag: false,
            submitFlag: false,
            id: '',
            name: '',
            books: []
         },
         methods: {
            # 3 定义一个方法用来发送 ajax
            # 3.1  使用 async  来让异步的代码  以同步的形式书写
            queryData: async function() {
                  // 调用后台接口获取图书列表数据
                  // var ret = await axios.get('books');
                  // this.books = ret.data;
# 3.2  发送ajax请求  把拿到的数据放在books 里面
                  this.books = await axios.get('books');
            }
         },

         mounted: function() {
#  4 mounted  里面 DOM已经加载完毕  在这里调用函数
            this.queryData();
         }
      });
</script>[/mw_shl_code]
2 添加图书
- 获取用户输入的数据发送到后台
- 渲染最新的数据到页面上
- [mw_shl_code=applescript,true]methods: {
  handle: async function(){
        if(this.flag) {
           // 编辑图书
           // 就是根据当前的ID去更新数组中对应的数据
           this.books.some((item) => {
              if(item.id == this.id) {
              item.name = this.name;
              // 完成更新操作之后，需要终止循环
              return true;
              }
           });
           this.flag = false;
        }else{
           # 1.1  在前面封装好的 handle 方法中  发送ajax请求
           # 1.2  使用async  和 await 简化操作需要在 function 前面添加 async
           var ret = await axios.post('books', {
              name: this.name
           })
           # 1.3  根据后台返回的状态码判断是否加载数据
           if(ret.status == 200) {
           # 1.4  调用 queryData 这个方法  渲染最新的数据
              this.queryData();
           }
        }
        // 清空表单
        this.id = '';
        this.name = '';
        },
  }       [/mw_shl_code]