如何在Vue脚手架中使用json-server模拟数据接口

最新推荐文章于 2024-05-26 00:08:20 发布
最新推荐文章于 2024-05-26 00:08:20 发布
阅读量779 收藏 5
点赞数 2
分类专栏： 前端 文章标签： vue.js json 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/LEElcg/article/details/125928632
版权

1.先全局安装 json-server

 

2.可以在vue项目src目录下新建api文件夹，并在里面创建db.json文件

 3.然后监听json-server --watch db.json

 出现这个页面后，代表模拟接口已经开始运行了，但是在vue项目中，需要重新运行项目，于是会导致模拟接口不能使用的情况，然后需要在cmd终端中找到db.json文件所在的目录运行出来就可以。在终端也会出现上述图片样子。

4.发送请求获取数据

 于是就成功返回数据了

前端.Lee
关注
  • 2
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue使用json-serve模拟接口请求详解
IT程序猿
09-06 271
以上就是json-serve的基本使用了。注意事项是json-serve默认支持get请求**我们将刚才的请求改成post请求。可以看到响应成功，完美撒花！
Vue 通过json-server搭建本地接口数据
weixin_44560027的博客
06-10 251
一、通过json-server搭建本地数据接口 1、在终端根目录下全局安装json-server依赖包(其实就是Win+R，输入cmd回车)，输入命令：npm install -g json-server 2、创建文件夹,即Hotel，初始化项目： 输入命令：npm init 把json-server存放到项目中，输入命令：npm install json-server --save 调整启动方式，即 json-server --watch db.json 创建 db.json 文件，文件名称可
Vue小案例-购物车案例(知识点:json-server,vuex,axios,组件通信和数组方法find，reduce)
最新发布
a4867的博客
05-26 628
小案例设计知识点蛮多，日后需要时候方便找，也算一个巩固。虽然这个小案例比较简单，但是设计的知识点还是蛮多，如json-server,vuex,axios，组件通信和一些数组的常用方法，非常利用巩固学习。
vue中使用json-server
hyqhyqhyqq的博客
03-05 1347
1.安装json-server的两个依赖 npm -g i json-servernpm install -g json-server2.安装axios依赖 npm i axios3.全局导入axios使用src目录下main.js文件内 import axios from ‘axios’;4.配置全局默认地址：src目录下main.js文件内 axios.defaults.baseURL = ‘http://localhost:8081’5.创建一个json文件夹，json文件夹内新创一个data.jso
在vue中使用JSON-server
weixin_54003465的博客
05-27 516
json-server可以快速的模拟接口它是一个基于的命令行工具。
在vue中使用JSON-Server？Mock数据的增删改查
weixin_40381947的博客
06-02 1953
JSON-Server 是用于快速搭建基于 JSON 数据文件的 REST API 的工具。它可以将 JSON 数据文件作为 REST API 的后端服务，通过 HTTP 请求进行数据的增删改查操作。使用 json-server 不需要编写后端代码和数据库，仅需提供一个 JSON 文件即可快速搭建 REST API 服务，方便前端开发人员进行接口测试和模拟数据。 而Mock数据是一种虚拟的数据，用于在前端开发中模拟后端数据。在使用Axios请求Mock数据时，可以对Mock数据进行增删改查操作
vue使用json-server 模拟数据
qq_45387575的博客
11-09 1580
在package.json文件中，scripts中配置一个mock，该端口号作为访问虚拟数据的端口号。该端口作为脚手架的端口号。
vue脚手架的项目与json-server结合.docx
10-04
在后端还没有开发好，即没有提供数据是，则提前写好前后端的数据接口，前端人员利用json-server模拟出数据，前端利用fetch（或ajax）从json-server上请求到数据，进行动态数据的展示。等到后端人员把业务逻辑写好后...
详解Vue CLI 3.0脚手架如何mock数据
10-17
配置完成后，依然在项目中使用 axios 或其他 HTTP 库，向 `/api/home.json` 发送请求，即可获取 mock 数据。 总的来说，Vue CLI 3.0 在 mock 数据配置上的主要变化在于使用 `public` 目录代替 `static` 目录，并在 ...
vue-manage-system-master.zip
05-30
10. **JSON Server**：为了方便开发，项目可能使用了JSON Server作为模拟后端服务，提供RESTful API接口，使得前端开发可以独立于后端进行。 以上就是关于"vue-manage-system-master.zip"项目的一些主要知识点。...
vue-shop:vue-shop构建web端购物商城网站
05-12
webpack + ES6/7 + nodejs + express 实现web端购物商城网站前端构架页面结构(H5,CSS3,原生JS)框架(基于Vue脚手架:vue-cli)进行搭建数据请求处理框架(vue-resource或者Axios)Vue-Router进行路由处理使用json-...
vue 运用mock数据的示例代码
08-28
接下来，在 vue 组件中使用 this.$mock 可以直接产生 mock 数据。例如：this.$mock.mock('getBoardList', function() { ... }).这种方式可以模拟真实的后台接口，返回虚拟的数据。 在 dev-server 文件中，可以使用 ...
vue和json-server实现端口对接
m0_74924621的博客
12-01 116
第三部：在src文件夹下创建一个data.json文件，随便写点，这里是用json-server官网样例使用cnpm run mock开启下端口：然后ctrl+点击下第一条：说明json环境部署成功o(*￣▽￣*)ブ。
vue使用json-server模拟get和post接口初探
weixin_42077503的博客
12-22 2292
安装： npm install json-server -g 注：要提前准备好node环境哦~ 准备mock数据： 新建一个db.json文件，这里我将它放在src/mock/下。 { "hello": [ { "name": "tom", "age": 18 }, { "name": "jack", "age": 19 } ] } 启动： 在控制台里输入"json-server -h"可以查看json
web期末作业 vue3 + json-server 实现简单的增删改查
睡醒继续做梦的博客
12-09 2214
web期末作业 vue3 + json-server 实现简单的增删改查
从零开始学习Vue - json-server 入门基础
兀坐晴窗独饮茶
02-06 842
1. json-server 入门基础 1.1 安装 json-server 参考文档 : json-server 详解 json-server官方文档 执行 npm install -g json-server 安装 json-server 注意: json-server 是严格遵守 restful 规范的 1.2 使用 json-server 创建 db.json 文件 { "user": [ { "id": 1, "title": "json-serv
vue中json-server（模拟数据）
zh_is_code_world的博客
08-21 2583
  作为前端，在开发的过程，遇到这种调用后端接口调试起来还是很麻烦的，我们要找后端的一个服务器，然后关联起来 ，或者把前端代码放上去，这样都是挺麻烦的，解决的办法就是前端放mock data，主要有两种方式：   （1）json-server模拟数据 使用json-server这个工具，可以虚构出后端接口对应的数据，然后在项目里发送特定的请求，就可以发请求拿到模拟的数据，首先npm安装 ...
vue+jsonserver
woochon的博客
11-13 565
使用jsonserver+axios模拟数据 安装(前提是安装有node环境) npm install --save json-server 提供json数据文件 在项目根目录下，新建一个 JSON 文件db.json 配置json-server 在build\webpack.dev.conf.js下配置，如果是用旧版本的手脚架工具初始化的项目，是在build/dev-server.js下配置。 ...
Vue-cli 使用json server在本地模拟请求数据
weixin_34062329的博客
11-01 228
写在前面： 开发的时候，前后端不论是否分离，接口多半是滞后于页面开发的。所以建立一个REST风格的API接口，给前端页面提供虚拟的数据，是非常有必要的。json server 作为模拟工具，因为设置简单，容易上手。本文是做一个简单的上手介绍，有需要的朋友可以做一下参考，喜欢的可以点波赞，或者关注一下，希望可以帮到大家。 本文首发于我的个人blog：obkoro1.com json server...
如何在vue中使用jsonserver调数据
05-18
要在Vue中使用JSON Server调用数据，您需要进行以下步骤： 1. 安装JSON Server 在终端中运行以下命令来安装JSON Server： ``` npm install -g json-server ``` 2. 创建JSON数据文件 创建一个名为 `db.json` 的...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值