json_server

本文介绍了如何通过npm安装json-server,创建并启动本地JSON接口服务,配置axios进行数据操作,包括GET、POST、DELETE和模糊查询。重点在于实战步骤和axios的使用技巧。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

1.安装依赖:

npm -g i json-server/ cnpm install -g json-server

2.新增json目录 放置json文件,进入json终端

3.输入命令,查看版本:

json-server

4.启动接口服务(data.json为自己的json文件名):

注意:一定要在你的json文件下开启服务

json-server --watch --port 8081 data.json

5.安装axios:

npm i axios

6.在mian.js中配置全局默认请求地址:

1. 引入axios

     import axios from 'axios';
 2. 配置全局默认地址:

axios.defaults.baseURL = 'http://localhost:8081'

7.浏览器测试(list为自己的对象名):

http://localhost:8081/list

8.使用方式:

查询:get  axios.get("list")

修改:get axios.get(`list?name_like=${this.findInput}`)   //需要在请求地址中携带一个_like='xx';

增加:post  axios.post("list", this.xxx);

删除:delete     axios.delete(`list/${id}`)

模糊查询 :1.put :    全量的修改,会把原来所有的数据覆盖掉,需要改的和不需要改的都需要传参 

           2.patch :    axios.patch(`list/${item.id}`, {flag:item.flag});  //打补丁,只会修改传递的值  

### 创建和配置 `json_server_config.json` 文件 要创建并配置一个名为 `json_server_config.json` 的文件用于 JSON Server,可以按照以下方法操作: #### 1. 基本结构 JSON Server 支持通过自定义配置文件指定其运行参数。以下是该文件的一个基本模板及其说明[^3]。 ```json { "port": 3000, // 设置服务器监听的端口号,默认为 3000 "host": "localhost", // 设置主机地址,默认为 localhost "watch": true, // 是否监控数据文件的变化,默认为 false "routes": {}, // 自定义路由映射 "middlewares": [], // 添加中间件路径列表 "static": "./public" // 静态资源目录 (可选) } ``` 以上字段可以根据实际需求调整。例如,如果希望更改默认端口到 8080,则只需修改 `"port"` 字段即可[^3]。 #### 2. 如何保存此文件? 将上述内容复制到一个新的 `.json` 文件中,并命名为 `json_server_config.json`。确保将其放置在一个易于访问的位置,比如项目根目录下[^1]。 #### 3. 启动命令中的应用方式 当启动 JSON Server 时,可以通过 CLI 参数引用这个配置文件。具体做法如下所示[^1]: ```bash npx json-server --config ./path/to/json_server_config.json data.json ``` 这里假设您的数据库文件名叫做 `data.json` 并位于同一级目录下;当然也可以替换为您自己的其他名称或者路径。 另外还有一种更简便的方式是在项目的 package.json 中预先设定好脚本指令以便于后续调用方便快捷: ```javascript // 在 package.json 内部增加 scripts 节点下的新条目 "scripts":{ "start-json":"json-server --c ./path/to/json_server_config.json data.json" } ``` 之后就可以直接执行 npm run start-json 来轻松开启服务啦! #### 4. 加载远程模式支持 除了本地的数据源之外,还可以利用 JSON Server 提供的功能去连接远端 URL 地址作为输入来源之一[^2] 。此时只需要简单地把目标链接传递给程序入口处就可以了: ```bash npx json-server https://api.example.com/data.json ``` 这会告诉 JsonServer 不再读取本地磁盘上的任何东西而是转而请求网络接口获取最新资料展示出来。 --- ### 注意事项 - 如果遇到跨域问题,请确认浏览器插件状态以及服务器端是否启用了 CORS 功能。 - 对于复杂场景建议深入研究官方文档了解更多高级特性选项设置指南[^3]。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值