新建项目，然后下载json-server模块
sudo npm i json-server -g
构建文件目录
- client 前端文件
- 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文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width initial-scale=1.0">
<title>Movies</title>
<script src="./node_modules/axios/dist/axios.min.js"></script>
<script src="./main.js"></script>
</head>
<body>
</body>
</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
<div class="container">
<form id="addMovie" action="http://localhost:3000/movies" method="post">
<div>
<label for="">Title</label><input type="text" name="title" required>
</div>
<div>
<label for="">date</label><input type="text" name="date" required></div>
<div>
<label for="">director</label><input type="text" name="director" required>
</div>
<div>
<button id="addButton" type="submit">提交</button>
</div>
</form>
</div>
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 += `<li class="movie-box">
<div class="m-title">${movie.title}</div>
<div class="m-score">${movie.date}</div>
<div class="m-score">${movie.director}</div>
<i class="delete" data-id=${movie.id}>-</i>
</li>`
});
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从服务器请求数据。增删查都直接涉及到了。代码整理了之后也比较清晰。
