vue搭建本地数据接口（jsonserver）

最新推荐文章于 2024-04-05 12:34:24 发布
最新推荐文章于 2024-04-05 12:34:24 发布
阅读量533 收藏 2
点赞数 1
分类专栏： vue 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_47664976/article/details/116331068
版权

全局安装jsonseerver

打开终端在根路径下 npm install -g json-server

2、创建文件夹（名称自定义即可）

在随意位置创建文件夹 jsonserver ，然后cd jsonserver 目录下

3、初始化package.json

在cd jsonserver 目录下 执行 npm init ,然后填写配置信息
在这里插入图片描述
完成后在该文件夹下生成package.json文件

4、在文件夹下cmd中执行npm install json-server --save-dev 安装依赖在这里插入图片描述

5、配置启动方式（命令）

在这里插入图片描述

6、在当前目录下创建user.js

最低0.47元/天 解锁文章
小小地鼠
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
手把手教你用vue + node 作后端连接数据库
weixin_44235659的博客
12-28 1万+
手把手教你用 vue做前端，node做后端写接口并连接数据库
Vue使用json-serve模拟接口请求详解
IT程序猿
09-06 245
以上就是json-serve的基本使用了。注意事项是json-serve默认支持get请求**我们将刚才的请求改成post请求。可以看到响应成功，完美撒花！
vue3如何封装接口
最新发布
weixin_62980497的博客
04-05 613
1,首先 安装并导入 axios库 可以使用npm或ayrn来安装。
在vue中使用JSON-Server？Mock数据的增删改查
weixin_40381947的博客
06-02 1930
JSON-Server 是用于快速搭建基于 JSON 数据文件的 REST API 的工具。它可以将 JSON 数据文件作为 REST API 的后端服务，通过 HTTP 请求进行数据的增删改查操作。使用 json-server 不需要编写后端代码和数据库，仅需提供一个 JSON 文件即可快速搭建 REST API 服务，方便前端开发人员进行接口测试和模拟数据。 而Mock数据是一种虚拟的数据，用于在前端开发中模拟后端数据。在使用Axios请求Mock数据时，可以对Mock数据进行增删改查操作
vue-cli 配置本地接口
qq_43512502的博客
06-26 808
npm 安装 express 2.首先找到bulid目录下的webpack.dev.conf.js 如图 3, 然后在webpack.dev.conf.js文件中添加如下代码 const express = require('express'); const app = express(); const appData = require('../data...
vue中json-server（模拟数据）
zh_is_code_world的博客
08-21 2576
  作为前端，在开发的过程，遇到这种调用后端接口调试起来还是很麻烦的，我们要找后端的一个服务器，然后关联起来 ，或者把前端代码放上去，这样都是挺麻烦的，解决的办法就是前端放mock data，主要有两种方式：   （1）json-server模拟数据 使用json-server这个工具，可以虚构出后端接口对应的数据，然后在项目里发送特定的请求，就可以发请求拿到模拟的数据，首先npm安装 ...
Vue-cli 使用json server在本地模拟请求数据的示例代码
10-19
本篇文章主要介绍了Vue-cli 使用json server在本地模拟请求数据的示例代码，非常具有实用价值，需要的朋友可以参考下
Vue请求JSON Server服务器数据的实现方法
10-17
主要介绍了Vue请求JSON Server服务器数据的实现方法,需要的朋友可以参考下
详解vue 模拟后台数据（加载本地json文件）调试
10-19
本篇文章主要介绍了详解vue 模拟后台数据（加载本地json文件）调试，具有一定的参考价值，有兴趣的可以了解一下
vue配置请求本地json数据的方法
01-19
本篇文章主要介绍了vue配置请求本地json数据的方法，分享给大家，具体如下： 在build文件夹下找到webpack.dev.conf.js文件，在const portfinder = require(‘portfinder’)后添加 const express = require('express...
Vue设置本地数据接口(json)
d295968572的博客
06-05 3126
1. 我们知道在2.9.1的版本中没有express。        a) npm install express –D        b) npm install vue-resource -S2. 注意： 这里安装vue-resource后需要在main.js注册并使用下          a)  import VueResource from 'vue-resource'          ...
vue开发请求本地模拟数据的配置方法
热门推荐
FireBird_one的博客
11-28 1万+
VUE开发请求本地数据的配置，早期的vue-lic下面有dev-server.js和dev-client.js两文件，请求本地数据在dev-server.js里配置，最新的vue-webpack-template 中已经去掉了dev-server.js和dev-client.js 改用webpack.dev.conf.js代替，所以 配置本地访问在webpack.dev.conf.js里配置即可。
Vue（二）模拟本地数据，做数据接口
左眼回忆的博客
03-27 3596
Vue（二）模拟本地数据，做数据接口 一、默认创建好vue的项目，我这里的vue项目是test如图 二、 （1）创建json.data文件，文件与index.html文件同级，如上图，写入以下代码 { "seller": { "name": "粥品香坊（回龙观）", "description": "蜂鸟专送", "deliveryTime": 38,
vue连接后端本地接口_Vue-cli中本地跨域请求后端接口详细配置
weixin_29157493的博客
02-22 2178
RT打开你的vue项目工程目录,如下:项目目录选择config下的index.js文件,在proxyTable中添加如下配置:添加的配置找到dev下的proxyTable配置,这里详细解释下proxyTable中的配置.图中的'/admin'意思是你配置的接口名称,比如请求login/login接口,,则请求的url为'/admin/login/login'如图接口中的url地址其中change...
js 导出 （兼容IE）
夜惊如水
09-04 466
if (typeof window.navigator.msSaveBlob !== 'undefined') { window.navigator.msSaveBlob(new Blob([data],{type: 'application/vnd.ms-excel'}), fileName+'.xls') }else{ let url = window.URL.createObjectURL(new Blob([data],{type: 'appl...
vue cli工程中的本地数据接口
此爱如少年
11-03 590
1、常规请求 使用Vue CLI新建的项目中，我需要使用本地数据进行测试，于是写了下面的数据请求： let url = '/src/assets/city.json' fetch(url).then(response => { return response.json() }).then(data => { conso...
vue写后端接口
hhhhs2的博客
04-26 2097
1.分别执行以下代码 npm init -y npm i express npm i nodemon 在pageage.json中吧scripts中的 text改成 “dev”: “nodemon index.js” 这样就可以热启动了 2. //引入 express const express = require("express"); const app = express(); //news.json的路径 const news = require("./json/news.json")
Vue项目封装请求数据的接口总结
weixin_30337251的博客
09-17 1967
最近开始了第一份工作，对于前端新手小白，以前的惯用做法都是直接在需要的页面写请求数据的接口。但是因为项目中会频繁的请求后台，所以将所有的请求封装起来，方便管理。 一、配置url（可以放在一个js中） 引入axios：import axios from “axios” 配置url const service=axios.crea...
vue项目总结之配置本地，测试，生产环境api
kayla_wang的博客
05-31 1万+
最近在做vue项目，想实现通过不同的命令，打包之后调用不同环境的api，防止来回切换不同的api出错。例如: npm run dev 调用本地环境 npm run test 调用阿里测试环境api npm run build 调用 生产环境api先简单说一下创建vue项目的流程:1. npm install -g vue-cli 全局安装脚手架（只安装一次）2....
vue获取本地c盘 json文件数据
06-10
使用 Vue.js 和 Axios 获取本地 C 盘 JSON 文件数据需要注意安全问题，因为浏览器通常不允许访问本地文件系统。如果你想获取本地 C 盘 JSON 文件数据，需要在本地搭建一个 Web 服务器，然后将 JSON 文件放在服务器的目录下，最后通过 Axios 发送 HTTP 请求获取数据。 以下是获取本地 C 盘 JSON 文件数据的步骤： 1. 安装 Node.js，然后在命令行中使用以下命令安装一个简单的 Web 服务器： ```bash npm install -g http-server ``` 2. 在本地 C 盘创建一个目录，将 JSON 文件放在目录下。假设你的 JSON 文件名为 `data.json`，放在 `C:\data` 目录下。 3. 在命令行中切换到 `C:\data` 目录下，然后使用以下命令启动 Web 服务器： ```bash http-server -p 8080 ``` 在上面的命令中，`-p 8080` 表示使用 8080 端口启动 Web 服务器。你也可以使用其他端口号。 4. 在 Vue 组件中使用 Axios 发送 HTTP 请求获取数据： ```javascript created() { axios.get('http://localhost:8080/data.json') .then(response => { this.jsonData = response.data; }) .catch(error => { console.log(error); }); } ``` 在上面的代码中，`http://localhost:8080/data.json` 是 Web 服务器上 JSON 文件的 URL 地址。 5. 在 Vue 组件中使用获取到的 JSON 数据： ```html <template> <div> <ul> <li v-for="item in jsonData" :key="item.id"> {{ item.name }} </li> </ul> </div> </template> ``` 以上就是获取本地 C 盘 JSON 文件数据的步骤。需要注意的是，为了保证安全，不要将 Web 服务器暴露在公网上。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值