在vue-cli脚手架项目中,找到build ---- webpack.dev.conf.js 文件,具体位置如下图:

找到文件后添加下面的内容,写在头部:

//这是 webpack.dev.conf.js 文件里的
'use strict'

/*新版的vue-cli代替原来的dev-server.js文件,现在在这里可以简单配置node请求,获取一些本地数据 */
const express = require("express");//需要先npm install --save express
const app = express();
const appData = require("../data.json"); //data.json,就是本地的模拟数据
const appRoutes = express.Router();
appRoutes.get("/seller", function(req, res) {
res.json({
errno: 0,
data: appData.seller
})
});
appRoutes.get("/ratings", function(req, res) {
res.send({
errno: 0,
data: appData.ratings
})
});
appRoutes.get("/goods", function(req, res) {
res.send({
errno: 0,
data: appData.goods
})
}); //app.use("/api", appRoutes); /*结束 */

然后还是在当前文件进行修改,找到 devWebpackConfig 下面的 devServer 的配置进行修改,如下:

 devServer: {
//这里是在建立本地传数据的时候需要修改的
before(app) {
app.use("/api", appRoutes);
},
........ //下面的配置不用修改,这里省略
}

vue 2.0+ 怎么写本地接口获取数据的更多相关文章

  1. vue 配合vue-resource调用接口,获取数据

    1.先用node+express+mysql简单配置一下后台 const express = require('express');const mysql = require('mysql');con ...

  2. Vue事件 定义方法执行方法 获取数据 改变数据 执行方法传值 以及事件对象

    <template> <div id="app"> <!-- <img v-bind:src='url' /> <img :src= ...

  3. vue.js--基础事件定义,获取数据,执行方法传值

    <template> <div id="app"> <h1>{{ msg }}</h1> <br> <button ...

  4. VUE通过索引值获取数据不渲染的问题

    问题:vue里面当通过索引值获取数据时,ajax数据成功返回,但是在火狐下不渲染 解决:

  5. Vue 2.0基础语法:系统指令

    本文最初发表于博客园,并在GitHub上持续更新前端的系列文章.欢迎在GitHub上关注我,一起入门和进阶前端. 以下是正文. Vue初体验 新建一个空的项目,引入vue.js文件.写如下代码: &l ...

  6. 使用Vue.js和Axios从第三方API获取数据 — SitePoint

    更多的往往不是,建立你的JavaScript应用程序时,你会想把数据从远程源或消耗一个[ API ](https:/ /恩.维基百科.org /维基/ application_programming_ ...

  7. vue ajax获取数据的时候,如何保证传递参数的安全或者说如何保护api的安全

    https://segmentfault.com/q/1010000005618139 vue ajax获取数据的时候,如何保证传递参数的安全或者说如何保护api的安全 点击提交,发送请求.但是api ...

  8. vue模拟后端获取数据——json-server与express

    转载自: https://blog.csdn.net/weixin_39728230/article/details/80293892 https://blog.csdn.net/lxkll/arti ...

  9. 在Vue中使用了Swiper ,动态从后台获取数据的之后,swiper滑动失效??

    在Vue中使用了Swiper ,动态从后台获取数据的之后,swiper滑动失效?? 是因为swiper提前初始化了,那时候数据还没有完全出来.这里有两种解决办法 1. 使用vue提供的$nextTic ...

随机推荐

  1. selenium WebDriver 清空input的方式

    做自动测试时,经常会出现某些文本框带有默认值的形式,此时我们为了输入我们预期的数据,就需要我们对默认值清楚后做处理.本文章提供四种方法 //方法1 public static void setElem ...

  2. osg::Camera example

    #ifdef _WIN32 #include <Windows.h> #endif // _WIN32 #include<iostream> #include <osgV ...

  3. No WebApplicationContext found: no ContextLoaderListener registered

    修改前运行报错:No WebApplicationContext found: no ContextLoaderListener registered? <web-app> <dis ...

  4. thymeleaf自定义属性

    例如我想给添加一个属性data-page,可以根据(SpringEL/Ognl)表达式计算获得. 需求: 期望效果 app个数大于0,有数据时链接 <xxx data-page="/a ...

  5. droid AVD创建及设置中各参数详解

    设置AVD时有些参数比较模糊,特地找了篇文章,大家参考下! 本文根据如下的模拟器安装做一些解释: Name: 自定义虚拟的名称,不能有空格或者其他非法字符,否则不能创建,即Creat AVD不能高亮点 ...

  6. EasyNetQ使用(八)【对延迟消息插件的支持,自动订阅者】

    RabbitMQ延迟消息插件仍然在实验阶段.你使用这个功能要自担风险. RabbitMQ延迟消息插件为RabbitMQ增加了新的交换机类型,允许延时消息投递. EasyNetQ为交换机通过定义一种新的 ...

  7. linux 网络配置及远程连接

    linux 网络配置及远程连接 前言 本文结合自己的经历主要讲述以Centos7为基础网络配置和远程连接的解决步骤 网络配置: 安装好centos7后,是上不了网的,配置步骤如下: (1).输入命令d ...

  8. 人工神经网络反向传播算法(BP算法)证明推导

    为了搞明白这个没少在网上搜,但是结果不尽人意,最后找到了一篇很好很详细的证明过程,摘抄整理为 latex 如下. (原文:https://blog.csdn.net/weixin_41718085/a ...

  9. 【CUDA开发】CUDA编程接口(一)------一十八般武器

    子曰:工欲善其事,必先利其器.我们要把显卡作为通用并行处理器来做并行算法处理,就得知道CUDA给我提供了什么样的接口,就得了解CUDA作为通用高性能计算平台上的一十八般武器.(如果你想自己开发驱动,自 ...

  10. Mariadb/Mysql命令行常用命令

    一.初始化等 1.登陆数据库方法    mysql -u 用户名 -p 用户密码 2.修改root及用户密码 use mysql; update user set password=password( ...