vue-cli下配置json-server

最新推荐文章于 2025-03-29 11:24:38 发布
最新推荐文章于 2025-03-29 11:24:38 发布
阅读量5.1k 收藏 4
点赞数 2
分类专栏： vue学习 文章标签： 伪造后台数据接口 json-server
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/biubiubiuzzz/article/details/78066621
版权
本文介绍如何使用json-server快速创建本地数据接口。通过建立db.json文件并进行简单配置，即可在开发环境中模拟后端API，方便前端开发人员进行调试。

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

使用json-server实现后台数据接口

先建一个json文件：db.json    放在build/下


在build/dev-server.js中配置 （注意变量命名）

github说明：




启动项目 地址栏输入 localhost:8081


服务已启动成功 8081后加相应后缀即可访问数据

localhost:8081/posts

l

localhost:8081/comments


最后做一下浏览器代理 设置config/index.jsr如下


最后验证一下


完结撒花=-=

json-server-vue3：带有JSON服务器“后端”的Vue3项目
02-16
json-server-vue3 项目设置 npm install 编译和热重装以进行开发 npm run serve [注意：在单独的终端上执行此操作]在没有身份验证的情况下启动服务器 npm run server-noauth 使用身份验证启动服务器 npm run server-auth 编译并最小化生产（尚未测试） npm run build 自定义配置 请参阅。
新版vue-cli如何使用json-server来mork
wangle_style的博客
03-06 3262
新版的vue-cli由于把dev-server。js合并到webpack.dev.conf.js中，所以在配置json-server的时候文档中的方法就不适应了第一步：安装：命令行中输入 cnpm install json-server --save第二步：找到build/webpack.dev.conf.js并在const portfinder = require('portfinder')这一...
json-server使用方法
最新发布
ya3288426755的博客
03-29 605
如果你不想使用默认的3000端口，可以通过--port这样，你的服务器就会在上运行。
vue中使用json-server
hyqhyqhyqq的博客
03-05 1490
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 入门基础
兀坐晴窗独饮茶
02-06 927
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.js】vue中的Ajax——json-server
qq_52499703的博客
09-01 473
一个在前端本地运行，可以存储json数据的server，当后端api未搭建好，前端开发人员可以自行搭建server服务器。
详解vue-cli项目中用json-sever搭建mock服务器
10-19
本文将详细讲解如何在基于vue-cli构建的项目中利用json-server搭建一个Mock服务器。 首先，json-server是一个快速、开箱即用的简单的HTTP服务器，它可以让你通过JSON文件模拟API接口。在vue-cli项目中使用json-...
Vue-cli 使用json server在本地模拟请求数据的示例代码
10-19
4. 在Vue项目中配置代理，将前端的请求代理到json server实例运行的本地服务器上。 ```javascript proxyTable: { '/api': { target: '***', changeOrigin: true, pathRewrite: { '^/api': '/' } } } ``` ...
浅谈vue-cli加载不到dev-server.js的解决办法
11-28
然而，在更新到较新的VueWebpackTemplate时，可能会遇到“vue-cli加载不到dev-server.js”的问题。这是因为旧版本中，开发服务器的配置通常在dev-server.js文件中，但新版本已经移除了这个文件，转而使用webpack.dev...
webpack4+Vue搭建自己的Vue-cli项目过程分享
10-18
这里需要注意的是，虽然Vue-cli已经提供了大量的配置，但是在深入学习时，掌握基础的Webpack配置依旧是非常重要的。 具体搭建Vue-cli项目过程如下： 1. 创建项目的基本文件结构：包括创建index.html、src目录下的...
Vue-cli 使用json server在本地模拟请求数据
weixin_34062329的博客
11-01 270
写在前面： 开发的时候，前后端不论是否分离，接口多半是滞后于页面开发的。所以建立一个REST风格的API接口，给前端页面提供虚拟的数据，是非常有必要的。json server 作为模拟工具，因为设置简单，容易上手。本文是做一个简单的上手介绍，有需要的朋友可以做一下参考，喜欢的可以点波赞，或者关注一下，希望可以帮到大家。 本文首发于我的个人blog：obkoro1.com json server...
Vue请求JSON Server服务器数据的实现方法
10-17
主要介绍了Vue请求JSON Server服务器数据的实现方法,需要的朋友可以参考下
vue中如何搭建JSON-server
weixin_44111864的博客
04-30 722
第一步：初始化项目： npm init -y； 第二步：安装 json-server ： npm i json-server -D ； 第三步： 在项目根目录下创建db.json，并写上合法的json数据，如下： 测试数据: { “books”:[ {“id”:“878911”,“name”:“三国”,“author”:“罗贯中”}, {“id”:“878912”,“name”:“水浒”,“au...
vue中json-server（模拟数据）
zh_is_code_world的博客
08-21 2662
  作为前端，在开发的过程，遇到这种调用后端接口调试起来还是很麻烦的，我们要找后端的一个服务器，然后关联起来 ，或者把前端代码放上去，这样都是挺麻烦的，解决的办法就是前端放mock data，主要有两种方式：   （1）json-server模拟数据 使用json-server这个工具，可以虚构出后端接口对应的数据，然后在项目里发送特定的请求，就可以发请求拿到模拟的数据，首先npm安装 ...
vue+jsonserver
woochon的博客
11-13 617
使用jsonserver+axios模拟数据 安装(前提是安装有node环境) npm install --save json-server 提供json数据文件 在项目根目录下，新建一个 JSON 文件db.json 配置json-server 在build\webpack.dev.conf.js下配置，如果是用旧版本的手脚架工具初始化的项目，是在build/dev-server.js下配置。 ...
在vue中使用JSON-server
weixin_54003465的博客
05-27 915
json-server可以快速的模拟接口它是一个基于的命令行工具。
Vue前端开发必备工具——json-server模拟后端服务器
bjzhang75的博客
08-30 1054
Json-server 是一个零代码快速搭建本地 RESTful API 的工具。它使用 JSON 文件作为数据源，并提供了一组简单的路由和端点，可以模拟后端服务器的行为。github地址：https://github.com/typicode/json-servernpm地址：https://www.npmjs.com/package/json-server。
json-server的vue应用
前端
05-31 1434
Mock服务 什么是Mock Mock英文中有虚拟，模拟的意思； Mock服务主要是提供模拟的数据，Mock可以用来解除测试对象对外部服务的依赖（比如数据库，第三方接口等），使得测试用例可以独立运行； Mock应用于前端的优势 Mock服务主要是提供模拟数据，因此通过Mock服务可以实现前后端的分离。 用于前端的Mock插件 mock.js vue项目中的json-serve...
在vue中使用JSON-Server？Mock数据的增删改查
weixin_40381947的博客
06-02 2219
JSON-Server 是用于快速搭建基于 JSON 数据文件的 REST API 的工具。它可以将 JSON 数据文件作为 REST API 的后端服务，通过 HTTP 请求进行数据的增删改查操作。使用 json-server 不需要编写后端代码和数据库，仅需提供一个 JSON 文件即可快速搭建 REST API 服务，方便前端开发人员进行接口测试和模拟数据。 而Mock数据是一种虚拟的数据，用于在前端开发中模拟后端数据。在使用Axios请求Mock数据时，可以对Mock数据进行增删改查操作
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值