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 ...
随机推荐
- SurfaceView之绘制sin曲线
package com.loaderman.customviewdemo; import android.animation.ValueAnimator; import android.content ...
- springboot之docker化
1.Docker安装 本人是centos7系统,安装也是按照官方文档进行安装.https://docs.docker.com/install/linux/docker-ce/centos/ ,即 1. ...
- C#子线程执行完后通知主线程(转)
其实这个比较简单,子线程怎么通知主线程,就是让子线程做完了自己的事儿就去干主线程的转回去干主线程的事儿. 那么怎么让子线程去做主线程的事儿呢,我们只需要把主线程的方法传递给子线程就行了,那么传递方法 ...
- Linux清除痕迹
Linux清除痕迹 第一种方法: 在退出会话前直接执行: #history -r 清除当前会话的命令历史记录 第二种方法: 在vim中执行自己不想让别人看到的命令 随便用vim打开一个文件 :set ...
- 最新 百合佳缘java校招面经 (含整理过的面试题大全)
从6月到10月,经过4个月努力和坚持,自己有幸拿到了网易雷火.京东.去哪儿. 百合佳缘等10家互联网公司的校招Offer,因为某些自身原因最终选择了 百合佳缘.6.7月主要是做系统复习.项目复盘.Le ...
- 服务器NGINX连接数
kill -HUP 1900 重启某个进程! 1.查看Web服务器(Nginx Apache)的并发请求数及其TCP连接状态: netstat -n | awk '/^tcp/ {++S[$NF]} ...
- elasticsearch7.1.1【win】下载安装
下载:https://www.elastic.co/cn/downloads/elasticsearch 历史版本下载:https://www.elastic.co/cn/downloads/past ...
- 【转帖】iPhone 11 Pro Max皇帝版物料成本不足3500元 卖一赚二
iPhone 11 Pro Max皇帝版物料成本不足3500元 卖一赚二 https://www.cnbeta.com/articles/tech/894449.htm 供应链的掌控力很重要 苹果今年 ...
- Fiddler之基础:面板、图标介绍
1.面板介绍:菜单栏,工具栏,回话面板,监控面板 2.工具栏-图标 3.会话面板-图标 4.监控面板 5.状态栏 控制台Fiddler的左下角有一个命令行工具叫做QuickExec,允许你直接输入命令 ...
- vim入门一 常用指令
以下为自己常用的vim指令总结 一.插入命令 a 在光标所在字符后进入插入模式 A 调到光标所在行行尾进入插入模式 i 在光标所在字符前插入模式 I 调到光标所在行行首进入插入模式 o 调到光标所在上 ...