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）,希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！

赞 (0)

相关推荐

  • 详解在vue-cli项目中使用mockjs(请求数据删除数据)

    详解在vue-cli项目中使用mockjs(请求数据删除数据)

    在我们的生产实际中,后端的接口往往是较晚才会出来,于是我们的前端的许多开发都要等到接口给我们才能进行,这样对于我们前端来说显得十分的被动,于是有没有可以制造假数据来模拟后端接口呢,答案是肯定的.于是今天我们来介绍一款非常强大的插件Mock.js,可以非常方便的模拟后端的数据,也可以轻松的实现增删改查这些操作,在后台数据完成之后,你所做的只是去掉mockjs:停止拦截真实的ajax,仅此而已. 搭建一个vue项目 # 全局安装 vue-cli $ npm install --global vue-

  • 在vue-cli搭建的项目中增加后台mock接口的方法

    在vue-cli搭建的项目中增加后台mock接口的方法

    用vue-cli搭建一个前端开发环境确实是极其方便,在写前端代码肯定也是少不了需要调用后台提供的业务接口进行前后端交互,特别在敏捷开发中,前后端都要提前确定业务接口并进行打桩,在开发过程中基本是没有现成的后台可以调用,基本上都是自己写mock进行模拟. 在vue-cli搭建的项目中,框架上用的是express的web框架,要做一个mock是很方便的. 假设前端页面上需要获取所有的新闻列表,那么就需要mock一个能够返回所有新闻列表数据的接口. 接下来就在项目中实现mock功能. 脚手架生成项目

  • 详解vue-cli项目中怎么使用mock数据

    详解vue-cli项目中怎么使用mock数据

    前言 注意:网上很多教程说需要在build目录下的dev-server.js文件中配置,但目前最新的vue-cli是没有dev-server.js这个文件的,因为已经被合并到webpack.dev.conf.js文件中,所以直接在该文件中配置即可 步骤 1.在根目录新建一个mock文件夹用于存在所有用于数据测试的.json文件 dir.png posts.json { "code": 200, "data": [ { "id": 0, "

  • 详解vue-cli 本地开发mock数据使用方法

    详解vue-cli 本地开发mock数据使用方法

    vue-cli 中可以通过配置 proxyTable 解决开发环境的跨域问题,具体可以参考这篇文章:Vue-cli proxyTable 解决开发环境的跨域问题 如果后端接口尚未开发完成,前端开发一般使用mock数据. mock方法有多种多样,这里给出两种: 方法一: 使用express搭建静态服务 mock数据写在json文件中,proxyTable 里将接口代理到具体mock数据json文件上. 具体方法: 创建 mock 文件夹 build/dev-server.js 中添加如下代码 np

  • vue-cli项目中怎么使用mock数据

    vue-cli项目中怎么使用mock数据

    在vue项目中, mock数据可以使用 node 的 express模块搭建服务 1. 在根目录下创建 test 目录, 用来存放模拟的 json 数据, 在 test 目录下创建模拟的数据 data.json 文件 2.在build目录下的 dev-server.js的文件作如下更改 var appData = require('../test/data.json') // 获取数据 var apiRoutes = express.Router(); //get请求 apiRoutes.get

  • 详解在vue-cli项目下简单使用mockjs模拟数据

    为什么要用mockjs 实际开发中,前后端分离,前端需要后端的接口去完成页面的渲染,但是并不能等到后端成员写完接口再开始进行测试.大部分情况下,前后端需要同时进行开发.因此便需要mockjs制造随机数据来进行后端接口模拟. 看了官方文档之后一脸懵逼,这些都是什么鬼?????因此总结了一篇文章,来介绍mockjs的简单使用. 首先搭建一个vue项目 不介绍了 安装mockjs npm install mockjs --save-dev 启动项目 npm run dev 创建mock.js文件 在s

  • vue-cli项目中使用Mockjs详解

    vue-cli项目中使用Mockjs详解

    背景 前端在早期jQuery时代时,前端功能和后端工程基本上都是合在一起,典型的就是常见的maven工程下面的webapp目录包含前端各类静态资源文件. 这个时候,我们总是会遇到这些问题: 老大,接口文档还没输出,我的好多活干不下去啊! 后端小哥,接口写好了没,我要测试啊! 测试时间不够啊,就要发版了,今天难道我有看明天的太阳升起? 诸如种种,就是一句话:劳资,再也不要指望你们了! node出现之后,准确的说是前后端分离之后,前端迫切需要一种机制,不在需要依赖后端接口开发.经过这几年的发展,有好

  • 详解vue-cli项目中用json-sever搭建mock服务器

    详解vue-cli项目中用json-sever搭建mock服务器

    vue-cli下配置json-server 使用json-server实现后台数据接口 先建一个json文件:db.json 放在build/下 在build/dev-server.js中配置 (注意变量命名) github说明: 启动项目 地址栏输入 localhost:8081 服务已启动成功 8081后加相应后缀即可访问数据 localhost:8081/posts l localhost:8081/comments 最后做一下浏览器代理 设置config/index.jsr如下 最后验证

  • 在 Vue-CLI 中引入 simple-mock实现简易的 API Mock 接口数据模拟

    在 https://www.jb51.net/article/151520.htm这篇文章中,我们介绍了在 Angular-CLI 中引入 simple-mock 的方法. 本文以 Vue-CLI 为例介绍引入 simple-mock 实现前端开发数据模拟的步骤. 本质上这里介绍的是在 webpack-dev-server 中配置 simple-mock 实现 API Mock,所以适用于任何采用 webpack 的前端项目. 1 simple-mock 简介 simple-mock 是一个引入

  • vue-cli项目使用mock数据的方法（借助express）

    前言 现如今前后端分离开发越来越普遍,前端人员写好页面后可以自己模拟一些数据进行代码测试,这样就不必等后端接口,提高了我们开发效率.今天就来分析下前端常用的mock数据的方式是如何实现的. 主体 项目是基于vue-cli的,首先必须搭建好vue项目环境.如果有同学不知道如何搭建vue项目,可以参考我的另外一篇文章.因为mock数据需要借助node.js中express框架,所以必须先在项目中安装npm install express --save. 搭建完基础后,我们在src文件下创建一个moc

  • vue-cli3使用mock数据的方法分析

    本文实例讲述了vue-cli3使用mock数据的方法.分享给大家供大家参考,具体如下: 在前后端分离的开发模式中,后端给前端提供一个接口,由前端向后端发请求,得到数据后前端进行渲染.由于前后端开发进度的不统一,前端往往使用本地的测试数据进行数据渲染的测试. 正文开始 在vue-cli构建的项目,我们可以借助devServer开启一个服务,然后我们可以通过路由模拟一个接口来进行测试. 在vue-cli2和vue-cli3中的配置方式是不同的.下面分别展示 ## vue-cli2 先放一张vue-c

  • 在vue里面设置全局变量或数据的方法

    实例如下: const MyPlugin = { // install方法是必需的 // // 包含两个参数:Vue 构造器,一个可选的选项对象 install(Vue, options) { Vue.prototype.test = "test" ; Vue.prototype.wechat = "my wechat!"; } }; export default MyPlugin 此方法可以单独起一个文件,在引入到需要的页面里面,就可以用vue实例取到相应数据,像

  • vue配置请求本地json数据的方法

    本篇文章主要介绍了vue配置请求本地json数据的方法,分享给大家,具体如下: 在build文件夹下找到webpack.dev.conf.js文件,在const portfinder = require('portfinder')后添加 const express = require('express') const app = express() const appData = require('../data.json') // 加载本地json文件 const seller = appDa

  • Vue CLI项目 axios模块前后端交互的使用(类似ajax提交)

    Vue-CLI项目-axios模块前后端交互(类似ajax提交)08.31自我总结,内容如下: Vue-CLI项目-axios前后端交互 一.模块的安装 npm install axios --save #--save可以不用写 二.配置main.js import axios from 'axios' Vue.prototype.$axios = axios; 三.使用 created() { // 组件创建成功的钩子函数 // 拿到要访问课程详情的课程id let id = this.$ro

  • 利用Vue3 创建Vue CLI 项目（一）

    利用Vue3 创建Vue CLI 项目（一）

    目录 一.官方文档 二.创建Vue CLI项目 1.安装Vue CLI 2.创建web应用 3.启动web应用 三.Vue CLI项目结构讲解 一.官方文档 Vue3文档 - vuejs https://www.vue3js.cn/docs/zh/ Vue核心功能:数据绑定 Vue CLI文档 https://cli.vuejs.org/zh/guide/ Vue CLI = Vue.js + 一堆组件 二.创建Vue CLI项目 1.安装Vue CLI 淘宝镜像 SQL: npm get re

  • 利用Vue3 (一）创建Vue CLI 项目

    利用Vue3 (一）创建Vue CLI 项目

    目录 一.官方文档 二.创建Vue CLI项目 1.安装Vue CLI 2.创建web应用 3.启动web应用 三.Vue CLI项目结构讲解 一.官方文档 Vue3文档 - vuejs https://www.vue3js.cn/docs/zh/ Vue核心功能:数据绑定 Vue CLI文档 https://cli.vuejs.org/zh/guide/ Vue CLI = Vue.js + 一堆组件 二.创建Vue CLI项目 1.安装Vue CLI 淘宝镜像 SQL: npm get re

  • vue cli webpack中使用sass的方法

    1:安装依赖 npm install sass-loader node-sass --save-dev 2:html中 修改style <style lang="sass"> /* write sass here */ </style> 3: 使用正常sass 语法 //但是会报错 <style lang="sass"> $highlight-color: #F90; $highlight-border: 1px solid $h

  • Vue实现用户自定义字段显示数据的方法

    如下: 代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible&q

  • Vue刷新修改页面中数据的方法

    因为Vue对象一旦生成之后,如果只是修改Vue对象中的数据,在页面上是不会自动更新的,得用Vue.set()函数来进行修改,函数格式为Vue.set(data,'para','value'),其中data为Vue创建时传输的data对象名,后面两个参数分别是data对象中的变量名称与值 页面初始化代码: <script type="text/javascript" charset="utf-8"> mui.init(); var data = { dx:

随机推荐