Ajax - 数据请求

1.json-server创建mock数据

2.发送get请求获取数据并渲染在页面上

3.发送post请求新增一条数据

4.删除数据与改善代码结构

1.安装json-server：npm i json-server -g

2.在api目录打开命令行窗口，执行：json-server db.json --port 3000

3.为了方便我们管理各种命令，我们在api文件夹下新建package.json文件，使用npm将mock数据的命令管理起来，这样我们直接npm run mock 就可以启动数据服务了

4.Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中
在客户端client文件夹安装： npm i axios --save

5. 这里提一嘴：由于浏览器执行html文件是自上而下执行的，如果js代码死循环或者执行时间过长，页面就会阻塞dom渲染，会一直显示空白，给用户不好的体验，所以在main.js我们把所有代码用一个函数包起来： window.onload = function(){ //放所有代码 }

6.请求数据处理

图片.png

7.ajax请求 数据

window.onload = function () {
    axios.get('http://localhost:3000/movies')
        .then(function (response) {
            let movies = response.data, str = ` `;
            movies.forEach(movie => {
                str += `
                <li class="movieBox">
                <i class="delMovie" data-MovieId="${movie.id}" >x</i>
                  <div class="mPost">
                     <img src="${movie.post}">
                  </div>
                  <div class="mTitle">${movie.title}</div>
                  <div class="mScore">${movie.score} 分</div>
                </li>
                `
            });
            let moviesRow = document.getElementById("moviesRow");
            moviesRow.innerHTML += str;  //拼接字符串的操作
        })
        .catch(function (error) {
            console.log(error);
        });
}

8.新增一条数据
浏览器会帮我们做表单提交，它需要我们在 form上写上action属性（服务请求地址）与 method属性（请求方式：get，post），我们在点了 type 叫 submit 的按钮之后，浏览器就把我们的数据通过post方法传递给服务器了

图片.png