最近学习一个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. HashMap与ConcurrentHashMap的区别(转)

    从JDK1.2起,就有了HashMap,正如前一篇文章所说,HashMap不是线程安全的,因此多线程操作时需要格外小心. 在JDK1.5中,伟大的Doug Lea给我们带来了concurrent包,从 ...

  2. swift之xib关联UIView

    有点坑爹,设置file owner 不行,搞了一早上,来说下怎么关联吧 自定义UIView要重写 required init(coder aDecoder: NSCoder) { super.init ...

  3. oracle delete t1;drop table t1;drop table t1 purge

    Truncate tableTruncate table t1;Ddl语言,自动提交:不能回退:回收范围::挪动高水位线:将所有的数据清除,保留表结构:将表缩的最小:保留表的约束和权限. Drop t ...

  4. java Web 监听器Listener详解

    简介 JavaWeb中的监听器是Servlet规范中定义的一种特殊类,它用于监听web应用程序中的ServletContext.HttpSession和 ServletRequest这三大域对象的创建 ...

  5. Python中__new__与__init__介绍

    在python2.x中,从object继承得来的类称为新式类(如class A(object))不从object继承得来的类称为经典类(如class A()) 新式类跟经典类的差别主要是以下几点: 1 ...

  6. golang hello

    package main import "fmt" func main() { fmt.Printf("Hello, world.\n") }

  7. CSS文本溢出处理

    1.超出层的高度和宽度时文本自动隐藏 overflow:hidden;text-overflow:ellipsis; 2.超出层的宽度时隐藏溢出的文本以...表示,Firefox不兼容,只隐藏溢出的文 ...

  8. Linux oprofile命令

    一.简介 oProfile是Linux平台上的一个功能强大的性能分析工具,支持两种采样(sampling)方式:基于事件的采样(eventbased)和基于时间的采样(timebased),它可以工作 ...

  9. javascript DES加密

    研究联通wifi登陆中,发现了一个名为"encryption.js"的文件.这个文件一看即知是加密过的,首先自己尝试去手工解密,看到太烦琐了,忽然想到网上有js解密工具,遂决定用来 ...

  10. Django框架 之 Form表单和Ajax上传文件

    Django框架 之 Form表单和Ajax上传文件 浏览目录 Form表单上传文件 Ajax上传文件 伪造Ajax上传文件 Form表单上传文件 html 1 2 3 4 5 6 7 <h3& ...