爱站程序员基地json-server与axios的简单使用
- 一、json-server的简单使用
- 1、安装
- 2、新建json数据
- 3、启动服务
- 4、接口规则-RESTful说明
- 1、查询所有数据
- 2、删除单条数据
- 3、实时查询
- 4、实现数据新增
- 5、在Vue项目中，如何将Axios封装成公共函数
一、json-server的简单使用
json-server参考链接
1、安装
npm install -g json-server
2、新建json数据
- 新建一个文件夹
- 在此文件夹中新建db.json文件，数据如下所示
{\"posts\": [{ \"id\": 1, \"title\": \"json-server\", \"author\": \"typicode\" }]}
3、启动服务
在此文件位置下输入如下命令：
json-server --watch db.json
可点击该链接查看是否能正常使用。
4、接口规则-RESTful说明
| 接口地址 | 请求方式及 | 适用情况 |
|---|---|---|
| /posts | GET | 查询所有数据 |
| /posts/id | GET | 查询单条数据 |
| /posts | POST | 添加，提交的参数在请求体 {title,author}；id为数字，每次添加会自动加1 |
| /posts/id | DELETE | 删除 |
| /posts/id | PUT | 修改 请求体{title,author} 全部修改 |
| /posts/id | PATCH | 修改 请求体{title} 个别修改 |
二、axios部分使用
axios参考链接
1、查询所有数据
<!DOCTYPE html><html lang=\"zh-CN\"><head><meta charset=\"UTF-8\" /><meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" /><title>Document</title><link rel=\"stylesheet\" href=\"../libs/bootstrap/css/bootstrap.min.css\" /><script src=\"../libs/vue.js\"></script><script src=\"../libs/axios.min.js\"></script></head><body><div id=\"app\" class=\"container\"><div class=\"form-group\"><label class=\"sr-only\" for=\"keywords\"></label><inputtype=\"text\"class=\"form-control\"id=\"keywords\"placeholder=\"搜索标题\"v-model=\"searchWords\"v-focus/></div><table class=\"table table-bordered\"><tr><th>编号</th><th>标题</th><th>作者</th><th>操作</th></tr><tr v-for=\"(item,index) in bookList\" :key=\"item.id\"><td>{{index+1}}</td><td>{{item.title}}</td><td>{{item.author}}</td><td><button type=\"button\" class=\"btn btn-danger\" @click=\"del(item.id)\">删除</button></td></tr></table></div><script>const vm = new Vue({el: \"#app\",data: {bookList: [],searchWords: \'\',},created() {this.getAllList();},methods: {//查询所有数据getAllList() {axios.get(\"http://localhost:3000/posts\").then((res) => {this.bookList = res.data;}).catch((err) => {console.log(err);});},},});</script></body></html>
2、删除单条数据
//删除数据del(id) {if (confirm(\"确认删除该条数据吗？\")) {axios.delete(`http://localhost:3000/posts/${id}`).then((res) => {this.getAllList();}).catch((err) => {console.log(\"###del##\" + err);});}},
3、实时查询
//实时查询watch: {//监听searchWords是否改变searchWords() {axios.get(\"http://localhost:3000/posts\", {params: {title_like: this.searchWords,},}).then((res) => {// 接收模糊查询的列表this.bookList = res.data;}).catch((err) => {console.log(\"###searchWords##\" + err);});},},
4、实现数据新增
//实现数据新增addBook() {if (this.title.trim() && this.author.trim()) {axios.post(`http://localhost:3000/posts`, {title: this.title,author: this.author,}).then((res) => {this.getAllList();//情况输入框this.title = \"\";this.author = \"\";}).catch((err) => {console.log(\"###addBook##\" + err);});} else {alert(\"请输入有效数据进行新增！\");return;}},
5、在Vue项目中，如何将Axios封装成公共函数
- 方法：将axios定义到Vue原型上
未将axios定义到Vue原型上时，每个组件需要用到axios时，都需要import
<script>import Axios from \"axios\";export default {data() {return {list: [],};},methods: {getList() {Axios.get(\"http://localhost:6005/heroList\").then((res) => {this.list = res.data;});},addHero() {this.$router.push(\"/addHero\");},},mounted() {this.getList();},};</script>
将axios定义到Vue原型上后
- 步骤1：在路由定义文件中，此处是index.js，将axios定义到Vue原型上
//将axios变成公共方法import Axios from \"axios\";Vue.prototype.$request = Axios;
- 步骤2：组件中使用axios发起请求时，使用this.$request，无需import axios
<script>// import Axios from \"axios\";export default {data() {return {list: [],};},methods: {getList() {this.$request.get(\"http://localhost:6005/heroList\").then((res) => {this.list = res.data;});},addHero() {this.$router.push(\"/addHero\");},},mounted() {this.getList();},};</script>
