vue 2.0+ 怎么写本地接口获取数据
在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+ 怎么写本地接口获取数据的更多相关文章
- vue 配合vue-resource调用接口,获取数据
1.先用node+express+mysql简单配置一下后台 const express = require('express');const mysql = require('mysql');con ...
- Vue事件 定义方法执行方法 获取数据 改变数据 执行方法传值 以及事件对象
<template> <div id="app"> <!-- <img v-bind:src='url' /> <img :src= ...
- vue.js--基础事件定义,获取数据,执行方法传值
<template> <div id="app"> <h1>{{ msg }}</h1> <br> <button ...
- VUE通过索引值获取数据不渲染的问题
问题:vue里面当通过索引值获取数据时,ajax数据成功返回,但是在火狐下不渲染 解决:
- Vue 2.0基础语法:系统指令
本文最初发表于博客园,并在GitHub上持续更新前端的系列文章.欢迎在GitHub上关注我,一起入门和进阶前端. 以下是正文. Vue初体验 新建一个空的项目,引入vue.js文件.写如下代码: &l ...
- 使用Vue.js和Axios从第三方API获取数据 — SitePoint
更多的往往不是,建立你的JavaScript应用程序时,你会想把数据从远程源或消耗一个[ API ](https:/ /恩.维基百科.org /维基/ application_programming_ ...
- vue ajax获取数据的时候,如何保证传递参数的安全或者说如何保护api的安全
https://segmentfault.com/q/1010000005618139 vue ajax获取数据的时候,如何保证传递参数的安全或者说如何保护api的安全 点击提交,发送请求.但是api ...
- vue模拟后端获取数据——json-server与express
转载自: https://blog.csdn.net/weixin_39728230/article/details/80293892 https://blog.csdn.net/lxkll/arti ...
- 在Vue中使用了Swiper ,动态从后台获取数据的之后,swiper滑动失效??
在Vue中使用了Swiper ,动态从后台获取数据的之后,swiper滑动失效?? 是因为swiper提前初始化了,那时候数据还没有完全出来.这里有两种解决办法 1. 使用vue提供的$nextTic ...
随机推荐
- vue+Typescript初级入门
Typescript 在前端圈已经逐渐普及,Vue 2.5.0 改进了类型声明,使得对 TypeScript 更加友好 不过要想在项目中直接使用 TypeScript 仍然需要对项目进行一些改造 PS ...
- 阶段5 3.微服务项目【学成在线】_day06 页面发布 课程管理_20-课程计划添加-前端页面调试
调试课程计划的添加功能 课程添加的弹窗使用的是dialog组件 这个变量控制对话框是否显示 当点击按钮的时候就设置为true.那么弹窗就会显示出来了 测试 在测试的节点下面添加一个子节点 添加成功后 ...
- 看看BeginInvoke的用法,亲爱的们
看看它是杂带参数的哈 using System; using System.Threading; class MyTest { delegate bool deleTest(string a,stri ...
- NVIDIA显卡电源不足
NVIDIA显卡 Ubuntu16.04安装驱动后出现问题:Unable to determine the device handle for GPUXXX 安装NVIDIA驱动后输入:nvidia- ...
- 最新 梦网科技java校招面经 (含整理过的面试题大全)
从6月到10月,经过4个月努力和坚持,自己有幸拿到了网易雷火.京东.去哪儿.梦网科技等10家互联网公司的校招Offer,因为某些自身原因最终选择了梦网科技.6.7月主要是做系统复习.项目复盘.Leet ...
- eNSP——配置NAT
原理: 实验案例: 拓扑图: 实验编址: 1.基本配置 根据实验编址进行基本配置,并测试连通性. 2.配置静态NAT 公司在网关路由器R1上配置访问外网的默认路由. 需要在网关路由器R1上配置NAT地 ...
- Eclipse启动时报错Java was started but returned exit code=13
Eclipse启动时报错Java was started but returned exit code=13 如图所示 原因是通过第三方更新JRE时,第三方安装的是32位的JRE,与64位的eclip ...
- Flink中案例学习--State与CheckPoint理解
1.State概念理解 在Flink中,按照基本类型,对State做了以下两类的划分:Keyed State, Operator State. Keyed State:和Key有关的状态类型,它只能被 ...
- 日常工作问题解决:centos7下配置网卡以及查询网卡UUID
目录 1.配置网卡 1.1 网卡查看命令:ifconfig -a 1.2 网卡配置文件说明 1.3 重启网络服务 2.查看确认网卡UUID 2.1 网卡配置文件正常时 2.2 网卡配置文件不可用或者配 ...
- 乐字节Java学习01-Java语言概述,Java发展前景,Java的特点
从这篇文章开始,小乐准备写一整系列的Java学习文章,一步一步带您进入Java的神奇世界! 这是第一篇:Java语言概述以及Java的发展前景 1.SUN公司介绍 SUN公司全称是Stanford U ...