Java Script 面向对象以及axios库使用

一、面向对象编程

1、面向对象

把构成问题事务分解成各个对象，建立对象的目的不是为了完成一个步骤，而是为了描叙某个事物在整个解决问题的步骤中的行为。

2、面向对象编程的三个特点

封装：只管使用别人封装好的方法，不用管实现（即不用管过程）
继承：子类继承父类，可以拥有父类的属性和方法
多态

3、使用面向对象的方式编写代码

1、把整个页面看做一个对象
2、把页面中的各种动作（功能）封装到一个个函数中
3、需要完成什么任务就通过对象调用相应的方法

4、两个库（别人封装了很多方法）

undersxore
lodash

二、获取后台数据

1、接口和接口地址

接口：通过接口来传输数据
接口地址：服务器地址

2、请求后台数据

axios 库（常用）
原生ajax
JQuery的ajax方法

3、axios库的使用

参数：如下 res、error只是形参，用形参来接受数据
成功后的处理函数
失败后的处理函数

     var url = 'http://huruqing.cn:3000/api/film/getList'; //获取服务器地址
        axios.get(url).then(function (res) {  //通过服务器地址来获取数据
            console.log(res.data.films);
            //拿到数据后渲染列表
            homeView.renderList(res.data.films);
        }).catch(function (error) { //获取数据失败时执行这句
            console(error);
        })

今日项目总结

1、把首页所有的功能都封装到homeView对象里，在需要的时候调用

2、获取数据后才渲染列表，不然没有数据渲染列表失败

3、引入axios库放在body底部

        <script src="../js/axios.js"></script>

4、元素列表一般用$开头

        var $list = document.querySelector('.list');

5、因为请求数据需要时间（异步加载），所以调用渲染列表方法放在then()括号里

同步：同一时间只能做一件事，即使做这件事需要做很久，也要做完才执行其他任务
异步：做一件事需要很长时间，在等待过程中可以先做其他事，等轮到再处理它

6、JSON数据转数组

        var items = JSON.parse(item.filmType); //将json数据转为数组

7、编程思维

目标：把首页变成动态
思路：
1、封装对象方法
2、获取数据
3、渲染列表
编写代码