在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. vue+Typescript初级入门

    Typescript 在前端圈已经逐渐普及,Vue 2.5.0 改进了类型声明,使得对 TypeScript 更加友好 不过要想在项目中直接使用 TypeScript 仍然需要对项目进行一些改造 PS ...

  2. 阶段5 3.微服务项目【学成在线】_day06 页面发布 课程管理_20-课程计划添加-前端页面调试

    调试课程计划的添加功能 课程添加的弹窗使用的是dialog组件 这个变量控制对话框是否显示 当点击按钮的时候就设置为true.那么弹窗就会显示出来了  测试 在测试的节点下面添加一个子节点 添加成功后 ...

  3. 看看BeginInvoke的用法,亲爱的们

    看看它是杂带参数的哈 using System; using System.Threading; class MyTest { delegate bool deleTest(string a,stri ...

  4. NVIDIA显卡电源不足

    NVIDIA显卡 Ubuntu16.04安装驱动后出现问题:Unable to determine the device handle for GPUXXX 安装NVIDIA驱动后输入:nvidia- ...

  5. 最新 梦网科技java校招面经 (含整理过的面试题大全)

    从6月到10月,经过4个月努力和坚持,自己有幸拿到了网易雷火.京东.去哪儿.梦网科技等10家互联网公司的校招Offer,因为某些自身原因最终选择了梦网科技.6.7月主要是做系统复习.项目复盘.Leet ...

  6. eNSP——配置NAT

    原理: 实验案例: 拓扑图: 实验编址: 1.基本配置 根据实验编址进行基本配置,并测试连通性. 2.配置静态NAT 公司在网关路由器R1上配置访问外网的默认路由. 需要在网关路由器R1上配置NAT地 ...

  7. Eclipse启动时报错Java was started but returned exit code=13

    Eclipse启动时报错Java was started but returned exit code=13 如图所示 原因是通过第三方更新JRE时,第三方安装的是32位的JRE,与64位的eclip ...

  8. Flink中案例学习--State与CheckPoint理解

    1.State概念理解 在Flink中,按照基本类型,对State做了以下两类的划分:Keyed State, Operator State. Keyed State:和Key有关的状态类型,它只能被 ...

  9. 日常工作问题解决:centos7下配置网卡以及查询网卡UUID

    目录 1.配置网卡 1.1 网卡查看命令:ifconfig -a 1.2 网卡配置文件说明 1.3 重启网络服务 2.查看确认网卡UUID 2.1 网卡配置文件正常时 2.2 网卡配置文件不可用或者配 ...

  10. 乐字节Java学习01-Java语言概述,Java发展前景,Java的特点

    从这篇文章开始,小乐准备写一整系列的Java学习文章,一步一步带您进入Java的神奇世界! 这是第一篇:Java语言概述以及Java的发展前景 1.SUN公司介绍 SUN公司全称是Stanford U ...