标签：axios console server json vue data method localhost

作为一个前端开发工程师，在后端还没有ready的时候，不可避免的要使用mock的数据。很多时候，我们并不想使用简单的静态数据，而是希望自己起一个本地的mock-server来完全模拟请求以及请求回来的过程。

json-server就是一个很好的可以替代工作的工具

1.json-server是一个包插件库 能够在脚手架开启服务器来模拟后端使用

全局安装：npm/cnpm install json-server -g

2.在项目根目录进行新建一个data文件夹，下或者直接创建db.json

 

 

3.在package.json文件里进行添加一行代码来做服务器开启

 

 4.启动项目服务命令: npm run json

或者使用data监听命令时， json-server data.json

新建data文件夹 里创建的data.json文件

{
   "data":[]
}

5.控制台就会打印输出成功

 

 6.这样在代码引用axios来进行数据请求

 

 7.最后数据请求成功

 

 

 

 二、增删该查

可以在axios的请求上来进行数据接口的调用和判断

1.增加数据

import axios from 'axios'

created(){
//post 提交 get获取 del删除
axios({
   method:"post",
   url:"http://localhost:3000/data",
   data:{
    username:'jack',
    age:18
}
}).then((data)=>{
  console.log(data)
})
}

2.删除某一条数据 用id去删除

axios({
   method:'delete',
   url:'http://localhost:3000/data/1' //直接使用id删除
}).then((data)=>{
  console.log(data)
})

//可以看看动态路由

3.修改数据

axios({
  method:"patch",
  url:"http://localhost:3000/data/3",  //id
  data:{
  username:'rose' //修改内容
}
}).then((data)=>{
 console.log(data)
})

4.查找所有数据

axios({
  method:"get",
  url:"http://localhost:3000/data",
}).then((data)=>{
  console.log(data)
})

5.查找指定某一条

axios({
 method:"get",
  url:"http://localhost:3000/data/3",
}).then((data))=>{
  console.log(data)
}

6.根据给定的name查找

axios({
  method:"get",
  url:"http://localhost:3000/data?username=rose",
}).then((data)=>{
 console.log(data)
})

7.模糊查询

axios({
  method:"get",
  url:"http://localhost:3000/data?q=r",
}).then((data)=>{
  console.log(data)
})

 

标签：axios,console,server,json,vue,data,method,localhost
来源： https://www.cnblogs.com/cc-font/p/15962687.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。