【郑州校区】前端笔记Vue项目第4天 9

【郑州校区】前端笔记Vue项目第4天 9

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

导入axios 用来发送ajax
把获取到的数据渲染到页面上

[AppleScript] 纯文本查看 复制代码

<div id="app">
       <div class="grid">
           <table>
               <thead>
                   <tr>
                       <th>编号</th>
                       <th>名称</th>
                       <th>时间</th>
                       <th>操作</th>
                   </tr>
               </thead>
               <tbody>
                   <!-- 5.  把books  中的数据渲染到页面上   -->
                   <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">
       /*
            图书管理-添加图书
        */

[AppleScript] 纯文本查看 复制代码

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

2 添加图书

获取用户输入的数据发送到后台
渲染最新的数据到页面上

[AppleScript] 纯文本查看 复制代码

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 = '';
        },       
 }

帐号		自动登录	找回密码
密码			加入黑马

【郑州校区】前端笔记Vue项目 第4天 9

0 个回复

【郑州校区】前端笔记Vue项目第4天 9