前言

如今，前端和后端分开开发越来越普遍。前端人员写完页面后，可以模拟一些数据进行代码测试，这样就不用等后端接口了，提高了我们的开发效率。今天，我们将分析如何在前端实现常用的模拟数据。

科目

项目基于vue-cli，必须先建立vue项目环境。如果有些同学不知道如何搭建vue项目，可以参考我的另一篇文章。模拟数据需要node.js中的express框架，所以必须先在项目中安装npm install express - save。

在建立基础之后，我们在src文件下创建一个模拟文件来存储我们的模拟数据。由于从后台返回的大部分数据都是json格式的，所以我们在mock文件下创建了一个user.json文件。

将以下代码添加到生成文件夹下的webpack.dev.conf.js文件中：

const express=require(' express ')const app=express()const user=require('./src/mock/user . JSON’)const routes=express。Router()app.use('/api '，routes)

然后添加开发服务器：

before (app) { app.get('/api '，(req，RES)={ RES . JSON(users)})}

完成以上两个步骤后，我们可以在网页上看到我们的模拟api文件。在地址栏中输入：http://localhost:8080/api

最后，我们只需要发送Ajax请求来获取数据

npm安装axios -S

发送Ajax请求获取App.vue文件中的数据

最后，重新启动项目npm运行dev，您可以看到请求的数据已经显示在页面上

后缀

本文简要介绍了模拟数据的一些使用方法。因为不熟悉express framework的用法，所以在配置的时候没有指定每个代码的功能。如果有的同学很清楚，可以留言，互相交流。

欢迎大家一起在GitHub上学习前端，分享代码之外的知识和技能。

找到我：GitHub

摘要

以上是边肖介绍的vue-cli项目中使用模拟数据的方法(借助express)。希望对大家有帮助。如果你有任何问题，请给我留言，边肖会及时回复你。非常感谢您对我们网站的支持！如果你觉得这篇文章对你有帮助，请转载，请注明出处，谢谢！