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);
        },
        ........  //下面的配置不用修改,这里省略
        }

原文地址:https://www.cnblogs.com/chun321/p/9454571.html

时间: 2024-08-07 06:14:46

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

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

问题:vue里面当通过索引值获取数据时,ajax数据成功返回,但是在火狐下不渲染 解决: 原文地址:https://www.cnblogs.com/zjp-/p/10306665.html

老蜗牛写采集:获取数据(正则篇)

致歉 首先感谢博友对这个系列的支持,很多加群的人都问我啥时候更新,我一直回答尽快,结果一拖就一年了.因为工作和生活占据我大量的时间,所以只能跟大伙说声抱歉. 使用正则获取数据 前两篇讲到如何采集html数据,那采集回来肯定要截取我们有用的部分,举个例子.我们要采集搜狐新闻的社会栏目,地址如下: http://news.sohu.com/shehuixinwen.shtml 我们首先获取到新闻列表,看上两章介绍到使用xNet获取到搜狐新闻的社会栏目的html源码,当然你可以使用httpreques

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

在Vue中使用了Swiper ,动态从后台获取数据的之后,swiper滑动失效?? 是因为swiper提前初始化了,那时候数据还没有完全出来.这里有两种解决办法 1. 使用vue提供的$nextTick()方法 当Vue构造器里的data值被修改完成后会调用这个方法,也相当于一个钩子函数吧,和构造器里的updated生命周期很像. 在数据初始化完毕之后,再初始化swiper就不会出现问题了 this.$nextTick(function () { var swiper = new Swiper(

vue使用jsonp获取数据,开发热卖推荐组件

1.安装jsonp cnpm install --save jsonp 2.jsonp API jsonp( url, opts, fn ) 3.封装jsonp方法 src/assets/js/jsonp.js import jsonp from 'jsonp'; /*data格式案例 { id:1, name:'cyy' } */ const parseParam=param=>{ /*将data格式转换为 [ [id,1], [name,cyy] ] */ let arr=[]; for(c

MariaDB 10.0.X中,动态列支持 JSON 格式来获取数据。

MariaDB 10.0.X中,动态列(Dynamic Columns),可以支持 JSON 格式来获取数据. 为了兼容传统SQL语法,MariaDB 10和MySQL5.7支持原生JSON格式,即关系型数据库和文档型NoSQL数据库集于一身. 使用说明: ###表结构 create table assets (   item_name varchar(32) primary key, -- A common attribute for all items   dynamic_cols  blo

vue 中使用 AJAX获取数据的方法

在VUE开发时,数据可以使用jquery和vue-resource来获取数据.在获取数据时,一定需要给一个数据初始值. 看下例: <script type="text/javascript"> new Vue({ el:'#app', data:{data:""}, created:function(){ var url="json.jsp"; var _self=this; $.get(url,function(data){ _se

Validform和aui2.0结合使用的表单自定义验证提示和列表页异步获取数据Demo

二.添加自定义验证演示       Validform验证提示大多都是在输入框或下拉框的右边或下面.感觉就是不美观,特别是表单字段少的时候,这种在相应对象旁边的提示就没必要了,      它会给人一种不友好的感觉(只是自己的感觉).所以下面写了三种添加演示,希望大家能给出建议,以免下次用起来纠结,不知道用哪种好.        表单验证插件是我们经常使用的Validform_v5.3.2_min.js.先上添加1演示的表单验证js代码,这里我设置了点击提交按钮后才验证.其他添加演示的区别不大,详

初识vue 2.0(12):使用$nextTick获取更新后的DOM

Vue 异步执行 DOM 更新. 只要观察到数据变化,Vue 将开启一个队列,并缓冲在同一事件循环中发生的所有数据改变. 如果同一个 watcher 被多次触发,只会被推入到队列中一次.这种在缓冲时去除重复数据对于避免不必要的计算和 DOM 操作上非常重要. 然后,在下一个的事件循环"tick"中,Vue 刷新队列并执行实际 (已去重的) 工作. Vue 在内部尝试对异步队列使用原生的 Promise.then 和 MessageChannel,如果执行环境不支持,会采用 setTim

vue中如何使用echarts,使用axios获取数据

1==>首先准备一个容器 <div id="echartContainer" style="width:400px; height:400px"></div> <!--创建一个echarts的容器--> 2==>在当前的页面中使用axios  和   引入放在本地在static文件中的静态文件op.js    引入echarts import axios from 'axios'; import {option} fr