图书列表案例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 = '';
            },        
     }         

  • 
    
    
  
  

图书列表案例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 = '';
            },        
     }         

  •