vue-cli项目使用mock数据的方法(借助express)
前言
现如今前后端分离开发越来越普遍,前端人员写好页面后可以自己模拟一些数据进行代码测试,这样就不必等后端接口,提高了我们开发效率。今天就来分析下前端常用的mock数据的方式是如何实现的。
主体
项目是基于vue-cli的,首先必须搭建好vue项目环境。如果有同学不知道如何搭建vue项目,可以参考我的另外一篇文章。因为mock数据需要借助node.js中express框架,所以必须先在项目中安装npm install express --save
。
搭建完基础后,我们在src文件下创建一个mock文件,用来存放我们模拟数据。因为现在大多后台返回数据类型为json格式,所以我们在mock文件下创建一个user.json文件。
接下来在build文件夹下webpack.dev.conf.js文件中添加以下代码:
const express = require('express')
const app = express()
const users = require('../src/mock/user.json')
const routes = express.Router()
app.use('/api', routes)
然后在devServer添加:
before (app) {
app.get('/api', (req, res) => {
res.json(users)
})
}
完成以上两步之后,我们就可以在网页中看到我们mock的api文件了。 在地址栏输入:http://localhost:8080/api
最后我们只需要发送Ajax请求来获取数据就可以了
npm install axios -S
在App.vue文件中发送Ajax请求获取数据
最后重启项目npm run dev
, 可以看到请求的数据已经显示在页面中
后缀
本文大体介绍了一些mock数据的使用方法,因为自己也对express框架用法不是很熟,所以在配置的时候没有具体说明每一句代码的作用,如果有同学清楚也可以留言,大家一起交流。
欢迎在GitHub上一起学习前端,分享代码以外的知识技能。
找到我:GitHub
vue-cli项目使用mock数据的方法(借助express)的更多相关文章
- 改造@vue/cli项目为服务端渲染-ServerSideRender
VUE SEO方案二 - SSR服务端渲染 在上一章中,我们分享了预渲染的方案来解决SEO问题,个人还是很中意此方案的,既简单又能解决大部分问题.但是也有着一定的缺陷,所以我们继续来看下一个方案--服 ...
- 【vue】本地开发mock数据支持
项目离不开数据渲染的支持,为本地开发配置 数据 支持. (一)方式一:安装JSON Server搭建mock数据的服务器 json Server 是一个创建 伪RESTful服务器的工具. 配置流程 ...
- vue-cli 本地开发mock数据使用方法
vue-cli 中可以通过配置 proxyTable 解决开发环境的跨域问题,具体可以参考这篇文章: Vue-cli proxyTable 解决开发环境的跨域问题 如果后端接口尚未开发完成,前端开发一 ...
- vue 中使用 AJAX获取数据的方法
在VUE开发时,数据可以使用jquery和vue-resource来获取数据.在获取数据时,一定需要给一个数据初始值. 看下例: <script type="text/javascri ...
- vue-cli项目配置mock数据(新版本)
最新的vue-webpack-template 中已经去掉了dev-server.js 但是要进行模拟后台数据的,如何模拟本地数据操作? 解决方法: dev-server.js 改用webpack-d ...
- 在vue项目中mock数据
第一步:安装: 在命令行中执行: npm install mockjs; 第二步:定义index.js文件 我们新建一个mock文件夹,此文件夹中建一个index.js文件:在index.js中输入以 ...
- 在vue项目中, mock数据
1. 在根目录下创建 test 目录, 用来存放模拟的 json 数据, 在 test 目录下创建模拟的数据 data.json 文件 2.在build目录下的 dev-server.js的文件作如下 ...
- vue/cli项目添加外部js文件的一个方法
有一个util.js文件,内容如下 function Util () { ... } export default new Util() 可以在main.js里面通过import引入js import ...
- vue cli 项目的提交
前提: 配置git.以及git的ssh key信息 假设已经都安装好了,此处我用vue项目为例,因为vue-cli已经默认为我生成了ignore文件 在项目目录 初始化本地仓库,会创建一个.git目录 ...
随机推荐
- C++11标准中常用到的各种算法汇总.
在C++11标准中定义了很多算法,这些算法可以让我们很方便的操作各种容器和数组,这里要注意一下,这些算法操作的并非容器,而是迭代器,然后通过迭代器来操作容器中的数据,算法本身并不会关注容器中保存的数据 ...
- MFC中listbox控件中各种属性的详解
ListBox控件是Windows 窗体的一个空间,ListBox 控件显示一个项列表,用户可从中选择一项或多项. 如果项总数超出可以显示的项数,则自动向 ListBox 控件添加滚动条. ...
- bzoj 2510 弱题 矩阵乘
看题就像矩阵乘 但是1000的数据无从下手 打表发现每一行的数都是一样的,只不过是错位的,好像叫什么循环矩阵 于是都可以转化为一行的,O(n3)->O(n2)*logk #include< ...
- Python中的turtle初探
turtle Python自带了一个turtle库,就像名字turtle说的那样,你可以创建一个turtle,然后这个turtle可以前进,后退,左转,这个turtle有一条尾巴,能够放下和抬起,当尾 ...
- 【功耗测试环境预置自动化脚本开发】【切换wifi模式为siso模式】【用到方法*args】
import os,reimport logginglogging.basicConfig(level=logging.DEBUG, format='%(asctime)s %(filename)s[ ...
- mysql输入中文出现ERROR 1366
MySQL输入中文出现如下错误: ERROR 1366: 1366: Incorrect string value: '\xE6\xB0\xB4\xE7\x94\xB5...' for column ...
- mysql服务设置远程连接 解决1251 client does not support ..问题
在docker里面创建mysql容器后设置的密码在远程主机连接时候出现错误: 一.如果是在docker里面安装的mysql镜像则需要先进入mysql里面:参考上一篇:https://www.cnblo ...
- RPC基于http协议通过netty支持文件上传下载
本人在中间件研发组(主要开发RPC),近期遇到一个需求:RPC基于http协议通过netty支持文件上传下载 经过一系列的资料查找学习,终于实现了该功能 通过netty实现文件上传下载,主要在编解码时 ...
- 最近面试 Java 后端开发的感受!
阅读本文大概需要 4.3 分钟. 首发:cnblogs.com/JavaArchitect/p/10011253.html 上周,密集面试了若干位Java后端候选人,工作经验在3到5年间.我的标准其实 ...
- 解决:git push error: failed to push some refs to
出现错误的原因是github中的README.md文件不在本地代码目录中. 也就是说我们需要先将远程代码库中的任何文件先pull到本地代码库中,才能push新的代码到github代码库中. 使用如下命 ...