json-server & Axios

新建项目，然后下载json-server模块

sudo npm i json-server -g

构建文件目录

1. client 前端文件
2. api 服务端文件

制作mock数据

在api文件夹中创建db.json存放数据

image.png

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

image.png

然后访问http://localhost:3000/movies就可以看到我们创建的mock数据

image.png

用npm管理mock命令

在api目录下创建package.json，添加如下代码，就可以用npm来管理mock数据的命令。这样子就可以通过npm run mock来启动数据服务。

{
  "scripts": {
    "mock":"json-server db.json --port 3000"
  }
}

json-server提供的[api](https://github.com/typicode/json-server
)了解一下。

在前端部分使用Axios

Axios是一个基于Promise的HTTP库，我们在client文件夹下执行

```javascript
npm i axios --save

遇到了问题

没有package.json文件，因此--save会报错。
解决：npm init

创建我们需要的前端文件

Html文件

window.onload = function () {
    //tip：为了防止阻塞dom渲染，将函数包裹在window.onload当中
axios.get("http://localhost:3000/movies")
        .then(function (response) {
            console.log(response.data)
        })
        .catch(function (error) {
            console.log(error)
        })
}

有必要看看axios的使用方法。

运行index.html，在控制台，就可以看到json-server返回来的数据。

image.png

稍稍准备一点css样式

省略了。

表单提交

简单写个表单 action写数据服务的地址，method为post

    

        

            Title
        
        

            date
        

            director
        
        

            提交
        
    

image.png

提交之后会跳转到http://localhost:3000/movies

image.png

然后可以在db.json中看到新增加的条目

image.png

那么，表单传过去的属性和db.json中的字段如何对应起来的呢？那就是form中的name属性，就代表了对应的字段名。

采用Axios

重点是去看一下Axios的说明书。
看看返回的response是什么样子的。
通过Axios可以完成增删功能。

整理代码

window.onload = function () {

    const homepage = {
        init() {
            axios.default.baseUrl = "http://localhost:3000/movies";
            homepage.func.render();
            document.addEventListener('click', homepage.func.handleDeleteListener, false);

        },
        func: {
            render() {
                let movieRow = document.getElementById("movie-row");
                movieRow.innerHTML = '';

                axios.get("http://localhost:3000/movies")
                    .then(function (response) {
                        let str = '', movies = response.data;
                        movies.forEach(movie => {
                            str += `

        
${movie.title}
        
${movie.date}
        
${movie.director}
        -
      
    
`
                        });

                        movieRow.innerHTML += str;


                    })
                    .catch(function (error) {
                        console.log(error)
                    });
            },
            handleDeleteListener(e) {
                let movieId = e.target.getAttribute("data-id");
                if (movieId) {
                    let confireDel = confirm("确认删除？");
                    if (confireDel)
                        homepage.func.deleteMovieById(movieId)
                    else return
                } else return
            },
            deleteMovieById(movieId) {
                axios.delete(`http://localhost:3000/movies/${movieId}`)
                    .then(function (response) {
                        if (response.status === 200) {
                            homepage.func.render()

                        }
                    })
                    .catch(function (error) {
                        console.log(error)
                    })
            }

        }
    }

    homepage.init();
};

整理好的代码结构是这个样子的。看起非常舒服。

总结

这个demo主要模拟了前端如何使用Axios从服务器请求数据。增删查都直接涉及到了。代码整理了之后也比较清晰。