最近学习一个vue-cli的项目,需要与后台进行数据交互,这里使用本地json数据来模仿后台数据交互流程。然而发现build文件夹下没有dev-server.js文件了,因为新版本的vue-webpack-template 中已经去掉了dev-server.js,取而代之的是webpack.dev.conf.js文件,所以可以在webpack.dev.conf.js里配置本地访问。

对比旧版本的build文件夹,新版本的build下少了dev-server.js和dev-client.js

旧版本

新版本

新版本配置webpack.dev.conf.js进行本地数据访问,在const portfinder = require(‘portfinder’)后添加

const express = require('express')
const app = express() //创建express应用程序
var appData = require('../data.json')//加载本地数据文件
var seller = appData.seller//获取对应的本地数据
var goods = appData.goods
var ratings = appData.ratings
var apiRoutes = express.Router() // 获取一个 express 的路由实例
app.use('/api', apiRoutes)

其中,app.use是express“调用中间件的方法”。所谓“中间件(middleware),就是处理HTTP请求的函数,用来完成各种特定的任务,比如检查用户是否登录、分析数据、以及其他在需要最终将数据发送给用户之前完成的任务。”。这是阮一峰文章的原话。

简而言之,app.use() 里面使用的参数,主要是函数。但这个使用,并不是函数调用,而是使能的意思。当用户在浏览器发出请求的时候,这部分函数才会启用,进行过滤、处理。

(了解express框架请移步express)然后在下面找到devServer,在里面添加

before(app) {
app.get('/api/seller', (req, res) => {
res.json({
errno: 0,
data: seller
})//接口返回json数据,上面配置的数据seller就赋值给data请求后调用
}),
app.get('/api/goods', (req, res) => {
res.json({
errno: 0,
data: goods
})
}),
app.get('/api/ratings', (req, res) => {
res.json({
errno: 0,
data: ratings
})
})
}

本地data.json数据放在根目录下与index.js同级,重行执行npm run dev,输入  localhost:8080/api/seller,结果如下:

已经请求到了本地数据

vue模拟后台数据,请求本地数据的配置(旧版本dev-server.js,新版本webpack.dev.conf.js)的更多相关文章

  1. vue脚手架用axios请求本地数据

    首先需要声明的是:本地请求,不用考虑跨域问题,这适用刚入坑的前端小白看,小白在做自己的项目时,通常都是用自己写的json数据,之后用axios请求过来,渲染到页面上. 1.cnpm install a ...

  2. VUE请求本地数据的配置json-server

    VUE开发请求本地数据的配置,早期的vue-lic下面有dev-server.js和dev-client.js两文件,请求本地数据在dev-server.js里配置,最新的vue-webpack-te ...

  3. VUE开发请求本地数据的配置,旧版本dev-server.js,新版本webpack.dev.conf.js

    VUE开发请求本地数据的配置,早期的vue-lic下面有dev-server.js和dev-client.js两文件,请求本地数据在dev-server.js里配置,最新的vue-webpack-te ...

  4. vue - webpack.base.conf.js

    描述:webapck基本配置文件. 为了给开发文件和打包文件(webpack.dev.conf.js|| webpack.prod.conf.js) 提供方便. 'use strict' // 路径 ...

  5. Vue学习之Vue模拟后台数据

    前后端项目的开发,需要前端和后端同时进行开发,有时后端开发人员还未完成API接口可以提供给前端调用,因此就需要模拟前端请求后端接口,后端返回数据.一般开发中都是返回json数据格式来完成前后端的交互. ...

  6. 本地Vue项目跨域请求本地Node.js服务器的配置方法

    前言:跨域请求是在本地开发时经常遇到的需求,也很简单,只是几句代码配置一下的问题.我初次配置跨域请求时由于官方的说明太简洁,找到的教程又落伍,调试了一番并没有解决问题,到最后解决问题,已花费了很多时间 ...

  7. iOS开发——数据持久化&本地数据的存储(使用NSCoder将对象保存到.plist文件)

    本地数据的存储(使用NSCoder将对象保存到.plist文件)   下面通过一个例子将联系人数据保存到沙盒的“documents”目录中.(联系人是一个数组集合,内部为自定义对象).   功能如下: ...

  8. vue --- 脚手架初始化项目中配置文件webpack.base.conf.js代码含义

    'use strict' //引入node path 中间件 可以获取到 path 路径的一些信息 const path = require('path') //引入utils工具模块 utils主要 ...

  9. vue 模拟后台数据(加载本地json文件)调试

    首先创建一个本地json文件,放在项目中如下 { "runRedLight":{ "CurrentPage": 1, "TotalPages" ...

随机推荐

  1. 1.forEach():遍历数组,并为每个元素调用传入的函数; 举例:

    var a = [1,2,3]; var sum = 0; //传一个参数 a.forEach(function(v){ sum += v; }); console.log(sum);//6 //传三 ...

  2. Maven 国内源

    maven的仓库好慢的说,还是配置一个国内的源吧.推荐aliyun 在maven/conf/settings.xml 文件里配置mirrors的子节点,添加如下mirror <mirror> ...

  3. centos6下的安装navicat premium

    centos6下的安装navicat premium CentOS6下做开发的时候,数据库客户端是一个必须要有的工具,因为经常要和数据库打交道.由于数据库的类型多样,有MySQL.Oracle.Pos ...

  4. android 4.0.4系统下实现apk的静默安装和启动

    转 android 4.0.4系统下实现apk的静默安装和启动 分类: Android 2013-02-14 14:13 1762人阅读 评论(10) 收藏 举报 最近在android 4.0.4系统 ...

  5. 643. Maximum Average Subarray I 最大子数组的平均值

    [抄题]: Given an array consisting of n integers, find the contiguous subarray of given length k that h ...

  6. Hyperledger Fabric Chaincode解析

    首先看下Blockchain结构,除了header指向下一个block的hash value外,block是由一组transaction构成, Transactions --> Blocks - ...

  7. 关于Java异常一段很有意思的代码

    今天学习了Java的异常,讲到try-catch-finally时,老师演示了一段代码,觉得很有意思,很能反映出其执行的过程,让自己有点绕,特意记录一下. 只要代码执行到try代码内部, 不管有没有异 ...

  8. 三分题两道:lightoj1146 Closest Distance、lightoj1240 Point Segment Distance (3D)

    lightoj1146 Two men are moving concurrently, one man is moving from A to B and other man is moving f ...

  9. 桥梁(Bridge)模式

    桥梁(Bridge)模式:桥梁模式是一个非常有用的模式,也是比较复杂的一个模式.熟悉这个模式对于理解面向对象的设计原则,包括"开-闭"原则(OCP)以及组合/聚合复用原则(CARP ...

  10. vee-validate表单校验的基本使用

    今天主要记录一下用vee-validate来进行表单校验的几个基本使用.包括最基础的必填和长度校验:异步请求服务的校验(重名校验),还有延迟校验.如何引入等就不在这里赘述了,直接进入主题. 1.必填和 ...