【郑州校区】前端笔记Vue项目day4(九） - 黑马程序员技术交流社区

导入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 = '';

        },        

 }