1.下载express

...

2.使用vue-cli下载好项目文件

...

3.找到文件 build - webpack.dev.conf.js

'use strict'
const utils = require('./utils')
const webpack = require('webpack')
const config = require('../config')
const merge = require('webpack-merge')
const path = require('path')
const baseWebpackConfig = require('./webpack.base.conf')
const CopyWebpackPlugin = require('copy-webpack-plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin')
const portfinder = require('portfinder')const HOST = process.env.HOST
const PORT = process.env.PORT && Number(process.env.PORT)/*** 使用express框架启动一个服务器*/
var express = require('express')
var app = express()
//1.读取数据
var appData=require('../static/json/table.json');
var businessNum=appData.businessNum;
var recruitingNum=appData.businessNum;
var customerData=appData.businessNum;//2.使用expresss配置路由,指定接口请求
var apiRoutes=express.Router(); //定义一个路由
const devWebpackConfig = merge(baseWebpackConfig, {module: {rules: utils.styleLoaders({ sourceMap: config.dev.cssSourceMap, usePostCSS: true })},// cheap-module-eval-source-map is faster for development
  devtool: config.dev.devtool,// these devServer options should be customized in /config/index.js
  devServer: {clientLogLevel: 'warning',historyApiFallback: {rewrites: [{ from: /.*/, to: path.posix.join(config.dev.assetsPublicPath, 'index.html') },],},hot: true,contentBase: false, // since we use CopyWebpackPlugin.compress: true,host: HOST || config.dev.host,port: PORT || config.dev.port,open: config.dev.autoOpenBrowser,overlay: config.dev.errorOverlay? { warnings: false, errors: true }: false,publicPath: config.dev.assetsPublicPath,proxy: config.dev.proxyTable,quiet: true, // necessary for FriendlyErrorsPlugin
    watchOptions: {poll: config.dev.poll,},before(apiRoutes) {apiRoutes.get('/api/businessNum', (req, res) => {res.json({// 这里是你的json内容errno: 0,data: businessNum})});apiRoutes.get('/api/recruitingNum', (req, res) => {res.json({// 这里是你的json内容errno: 0,data: recruitingNum})});apiRoutes.get('/api/customerData', (req, res) => {res.json({// 这里是你的json内容errno: 0,data: customerData})})}},plugins: [new webpack.DefinePlugin({'process.env': require('../config/dev.env')}),new webpack.HotModuleReplacementPlugin(),new webpack.NamedModulesPlugin(), // HMR shows correct file names in console on update.new webpack.NoEmitOnErrorsPlugin(),// https://github.com/ampedandwired/html-webpack-pluginnew HtmlWebpackPlugin({filename: 'index.html',template: 'index.html',inject: true}),// copy custom static assetsnew CopyWebpackPlugin([{from: path.resolve(__dirname, '../static'),to: config.dev.assetsSubDirectory,ignore: ['.*']}])]
})module.exports = new Promise((resolve, reject) => {portfinder.basePort = process.env.PORT || config.dev.portportfinder.getPort((err, port) => {if (err) {reject(err)} else {// publish the new Port, necessary for e2e testsprocess.env.PORT = port// add port to devServer configdevWebpackConfig.devServer.port = port// Add FriendlyErrorsPlugindevWebpackConfig.plugins.push(new FriendlyErrorsPlugin({compilationSuccessInfo: {messages: [`Your application is running here: http://${devWebpackConfig.devServer.host}:${port}`],
        },onErrors: config.dev.notifyOnErrors? utils.createNotifierCallback(): undefined}))resolve(devWebpackConfig)}})
})

4.在页面中发送axios请求(先在main.js中引入axios)

...
import axios from 'axios'
...
/* 全局引入axios */
Vue.prototype.$http = axios

5.在页面中请求数据

  created () {this.$http.get('/api/businessNum').then(response => {console.log(response)}).catch(response => {console.log(response)})}

6.页面加载返回数据信息

转载于:https://www.cnblogs.com/yulingjia/p/8794396.html

Vue(二十一)使用express模拟接口数据相关推荐

  1. 接口 同花顺_Fiddler模拟接口数据(mock)

    我们在测试过程中,经常会遇到查看不同接口数据前端页面展示的场景,今天我们就一起来看下如何用Fiddler模拟接口数据(mock). 01 mock定义 mock测试就是在测试过程中,对于某些不容易构造 ...

  2. vue实现多行数据提交_Vue+Mockjs,模拟接口数据,实现前后端独立开发

    前后端分工协作是一个非常高效的做法,但是有时前后端分离不彻底会很痛苦.前后端应该是异步进行的,进度互不影响,但是在没有mock的时候,前端却严重依赖后端的接口,总会苦苦等待后端接口出来才能继续开发.为 ...

  3. vue如何使用mockjs摸拟接口数据

    mockjs的作用 生成模拟数据 模拟 Ajax 请求,返回模拟数据 基于 HTML 模板生成模拟数据(后续更新) 帮助编写单元测试(后续更新) Vue 中使用 mock 有两种使用方式,一种是仅编写 ...

  4. 前端使用mockjs模拟接口数据

    在前后端分离开发中,有时候后台开发比较慢还没有给回接口给前端,那么这时我们可以自己模拟数据(也就是mock数据). 当然可能你会想到我新建个js文件,把数据模拟好导出再引入请求就可以啦.这个方法虽然可 ...

  5. 学习vue饿了吗之模拟后台数据

    1.建立data.json,放置目录如下 2.安装vue-resource npm install vue-resource --save 在main.js中配置 import VueResource ...

  6. 学习Spring Boot:(二十一)使用 EhCache 实现数据缓存

    前言 当多次查询数据库影响到系统性能的时候,可以考虑使用缓存,来解决数据访问新能的问题. SpringBoot 已经为我们提供了自动配置多个 CacheManager 的实现,只要去实现使用它就可以了 ...

  7. 问题二十一:怎么模拟ray tracing图形中不同材料的颜色(diffuse and metal)

    在漫射材料章节,我们将多个球都模拟成漫射材料的颜色.那么问题来了,我们能不能将不同的球模拟成不同材料的颜色呢?可以哈!我们这一章节就干这事. 21.1总结一下设置颜色的几种方法 我们还是先回忆一下:r ...

  8. 研发阶段模拟接口数据

    因为在vue-cli工程中需要创建很多.vue文件,我们希望创建vue文件和创建html.css.js文件一样右键即可选择创建,并且创建的文件中可预先写好模板代码. webstorm-Preferen ...

  9. 【C语言】案例二十一 从键盘输入一组数据,求出这一组数据的平均值并输出(调用函数)

    函数的定义 在C语言中最基础的程序模块就是函数,函数被视为程序中的基本逻辑单位,一个C语言程序由一个main()函数和若干个普通函数构成. 定义一个C函数的语法格式如下: 返回值类型 函数名([[参数 ...

最新文章

  1. CentOS Linux解决 Device eth0 does not seem to be present
  2. 华为南太无线解决方案部梁旭阳_工业互联网产业联盟网络组走进华为南京研究所技术研讨会顺利召开...
  3. python socket实现文件传输(防粘包)
  4. python爬虫获取方法_小白学python爬虫:2.获得数据
  5. mysql 5.7 配置多实例 — 独立配置文件方式
  6. Online ML那点事-!
  7. Jerry的Kubernetes学习笔记
  8. 2.第一个HTML页面
  9. mysql递归查询树,帮你突破瓶颈
  10. 经典卷积神经网络的学习(二)—— VGGNet
  11. JSON与csv哪一个更自描述_NBA历届选秀状元,你更喜欢哪一个/哪一个最成功
  12. 遥感图像的辐射畸变与辐射校正
  13. ideal如何快速导入import_IntelliJ IDEA 自动导入包 快捷方式
  14. php模仿一个开票系统,一个模仿oso的php论坛程序(之一)
  15. Matlab与Excel文件的数据交换
  16. 高德地图很详细的用法 定位 搜索 添加小蓝点marker 移动地图实时定位
  17. 1248 - Every derived table must have its own alias
  18. python如何调整按钮的位置_Python tkinter布局与按钮间距设置方式
  19. 虚拟机IC617 REHAT导入工艺库操作
  20. 前沿重器[28] | 前沿的向量召回都是怎么做的

热门文章

  1. 商越加入阿里云原生合作伙伴计划,共创智慧采购新生态
  2. c语言sum出错,ACM:Sum Problem 求和问题C语言源码
  3. 开发笔记:游戏逻辑模块组织及数据同步
  4. 专接本汇编开发工具【Masm for Winodws 集成实验环境】安装细则
  5. 2021东京奥运会数据接口
  6. .Net软件工程师必备面试题134道
  7. Oracle goldengate 11g错误汇总
  8. exp/expdp中query参数的使用
  9. ORACLE sqlplus set 命令速查
  10. Appscan漏洞 之 加密会话(SSL)Cookie 中缺少 Secure 属性