Vue-cli 使用json server在本地模拟请求数据的示例代

在前端开发中，模拟数据请求是非常常见的需求，特别是在接口尚未开发完成的情况下。本文将介绍如何使用Vue-cli结合json server在本地模拟请求数据，帮助开发者在没有后端支持的情况下完成前端页面的开发。以下是详细的示例代码和使用指南。

【开篇语】

在进行前后端分离开发时，经常会遇到后端接口开发滞后的情况。这时，我们可以利用json server来模拟后端接口，提供假数据供前端页面使用。接下来，让我们一起看看如何使用Vue-cli和json server实现本地模拟请求数据。

【json server简介】

json server是一个轻量级的服务器，用于生成静态的JSON数据。通过简单的配置，我们可以轻松地将它集成到Vue项目中，模拟后端接口返回的数据。

【准备工作】

确保你已经安装了Node.js和npm。然后，在Vue项目中执行以下命令安装json-server和axios：

```shell

npm install json-server --save // 安装json server

npm install axios --save // 安装axios库用于发送请求

```

【创建json文件】

在Vue项目的根目录下创建一个名为db.json的文件，用于存放模拟数据。这个文件的内容是一个JSON对象，包含了你的数据结构。

【配置json server】

打开Vue项目中的build目录下的dev-server.js文件，进行以下配置：

```javascript

// 引入json server模块

var jsonServer = require('json-server')

// 创建json服务器实例

var apiServer = jsonServer.create()

// 指定要模拟的json文件路径

var apiRouter = jsonServer.router('db.json')

// 使用默认中间件，处理静态文件和JSON数据等请求

var middlewares = jsonServer.defaults()

// 将中间件应用到json服务器实例上

apiServer.use(middlewares)

// 将apiRouter路由应用到json服务器上，使得请求可以被正确响应

apiServer.use('/json', apiRouter)

// 启动json服务器并监听端口，这里假设使用端口号8081启动服务器，根据实际情况进行修改。成功启动后会在控制台打印出提示信息。

apiServer.listen(port + 1, function(){

console.log('JSON Server is running')

})

```

【配置axios请求】

在Vue项目中配置axios发送请求到本地的json server。可以在项目的config目录下的index.js文件中配置代理表（proxyTable），将请求转发到本地的json server上。例如：

```javascript

想象一下在一个Vue组件中的使用场景。你可能会这样发起一个请求：

```javascript

this.$ajax({

url: '/api/articles', // api请求地址，指向json文件的地址，后缀代表文件中的对象或数组

method: 'get' // 请求方式

// 在这里，你可以添加各种axios配置，满足你的需求

}).then((response) => {

console.log(response, '请求成功');

}).catch((error) => {

console.log(error, '请求失败');

});

```

简写后的代码就像这样，更加简洁明了：

```javascript

this.$ajax.get('api/publishContent').then((response) => {

console.log(response, '请求成功');

}).catch((error) => {

console.log(error, '请求失败');

});

```

对于JSON-Server，它有一个特别之处：它默认只接受GET请求。如果你尝试使用POST、PUT、PATCH或DELETE请求，lowdb会自动且安全地将更改保存到db.json文件中。

在文档方面，你可以参考附上的GitHub地址和axios的中文文档进行深入学习。json server的设置和使用相当便捷，如果你对此感兴趣，不妨跟随相关教程进行设置。

狼蚁SEO提供的这篇文章为我们详细阐述了如何在Vue项目中使用axios与JSON-Server进行交互。相信通过阅读本文，大家对于这方面的知识有了更深入的了解和掌握。同时也希望大家能够支持狼蚁SEO，共同学习进步。在编程的世界里，每一次的和学习都是一次跨越，愿我们共同前行，创造更多的可能。

通过调用`cambrian.render('body')`，页面的主体部分得以呈现。让我们期待更多精彩的内容，共同编程的奥秘。