vue+webpack模拟后台数据的示例代码


Posted in Javascript onJuly 26, 2018

一、在webpack-dev-conf.js文件中:

1、在const portfinder = require(‘portfinder')后添加如下内容

const express = require('express')
const app = express() //请求server
var appData = require('../mock/goods.json') //加载本地数据文件
var apiRoutes = express.Router()
app.use(apiRoutes) //通过路由请求数据

2、找到devServer,在里面加上before()方法

devServer: {
 clientLogLevel: 'warning',
 historyApiFallback: {
  rewrites: [
   { from: /.*/, to: path.posix.join(config.dev.assetsPublicPath, 'index.html') },
  ],
 },
 hot: true,
 contentBase: false, // since we use CopyWebpackPlugin.
 compress: true,
 host: HOST || config.dev.host,
 port: PORT || config.dev.port,
 open: config.dev.autoOpenBrowser,
 overlay: config.dev.errorOverlay ? { warnings: false, errors: true } : false,
 publicPath: config.dev.assetsPublicPath,
 proxy: config.dev.proxyTable,
 quiet: true, // necessary for FriendlyErrorsPlugin
 watchOptions: {
  poll: config.dev.poll,
 },
 before(app) {
  app.get('/goods', (req, res) => {
   res.json(appData)
  })
 }
},

二、在goods.json文件:

{
 "status": "0",
 "msg": "",
 "result": [
  {
   "productId": "100001",
   "productName": "小米6",
   "productPrice": "2499",
   "productImg": "1.jpg"
  },{
   "productId": "100002",
   "productName": "音箱",
   "productPrice": "999",
   "productImg": "2.jpg"
  },{
   "productId": "100003",
   "productName": "电脑",
   "productPrice": "199",
   "productImg": "3.jpg"
  }
 ]
}

三、在GoodsList.vue文件中:

vue+webpack模拟后台数据的示例代码

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript返回网页中锚点数目的方法
Apr 03 Javascript
jquery获取多个checkbox的值异步提交给php
Jul 07 Javascript
Jquery中巧用Ajax的beforeSend方法
Jan 20 Javascript
JavaScript 经典实例日常收集整理(常用经典)
Mar 30 Javascript
浅谈JavaScript中变量和函数声明的提升
Aug 09 Javascript
jQuery插件HighCharts绘制的2D堆柱状图效果示例【附demo源码下载】
Mar 14 Javascript
AngularJS实现页面跳转后自动弹出对话框实例代码
Aug 02 Javascript
vue绑定设置属性的多种方式(5)
Aug 16 Javascript
Angular 5.0 来了! 有这些大变化
Nov 15 Javascript
JS基于for语句编写的九九乘法表示例
Jan 04 Javascript
VUE脚手架的下载和配置步骤详解
Apr 01 Javascript
vuex管理状态 刷新页面保持不被清空的解决方案
Nov 11 Javascript
JavaScript设计模式之工厂模式和抽象工厂模式定义与用法分析
Jul 26 #Javascript
vue父组件异步获取数据传给子组件的方法
Jul 26 #Javascript
JavaScript设计模式之构造器模式(生成器模式)定义与用法实例分析
Jul 26 #Javascript
JavaScript设计模式之单例模式原理与用法实例分析
Jul 26 #Javascript
JavaScript设计模式之原型模式分析【ES5与ES6】
Jul 26 #Javascript
如何把vuejs打包出来的文件整合到springboot里
Jul 26 #Javascript
JavaScript中变量提升与函数提升经典实例分析
Jul 26 #Javascript
You might like
PHP使用CURL实现多线程抓取网页
2015/04/30 PHP
PHP使用fopen与file_get_contents读取文件实例分享
2016/03/04 PHP
dojo 之基础篇(三)之向服务器发送数据
2007/03/24 Javascript
js下用eval生成JSON对象
2010/09/17 Javascript
JQUERY的属性选择符和自定义选择符使用方法(二)
2011/04/07 Javascript
Javascript 面向对象编程(一) 封装
2011/08/28 Javascript
Jquery $.getJSON 在IE下的缓存问题解决方法
2014/10/10 Javascript
javascript 继承学习心得总结
2016/03/17 Javascript
解决node.js安装包失败的几种方法
2016/09/02 Javascript
javascript 分号总结及详细介绍
2016/09/24 Javascript
详解js的事件代理(委托)
2016/12/22 Javascript
从零开始学习Node.js系列教程二:文本提交与显示方法
2017/04/13 Javascript
JS简单实现点击跳转登陆邮箱功能的方法
2017/10/31 Javascript
不使用JavaScript实现菜单的打开和关闭效果demo
2018/05/01 Javascript
浅谈vue中组件绑定事件时是否加.native
2019/11/09 Javascript
node.js使用mongoose操作数据库实现购物车的增、删、改、查功能示例
2019/12/23 Javascript
[15:28]DOTA2 HEROS教学视频教你分分钟做大人-剧毒术士
2014/06/13 DOTA
Python配置mysql的教程(推荐)
2017/10/13 Python
python导入csv文件出现SyntaxError问题分析
2017/12/15 Python
Python3.4 splinter(模拟填写表单)使用方法
2018/10/13 Python
基于Python实现ComicReaper漫画自动爬取脚本过程解析
2019/11/11 Python
pytorch载入预训练模型后,实现训练指定层
2020/01/06 Python
Python2手动安装更新pip过程实例解析
2020/07/16 Python
MANGO官方网站:西班牙芒果服装品牌
2017/01/15 全球购物
eBay英国购物网站:eBay.co.uk
2019/06/19 全球购物
工程造价自荐信
2013/10/09 职场文书
总经理司机职责
2014/02/02 职场文书
大学优秀班主任事迹材料
2014/05/02 职场文书
党的群众路线对照检查材料思想汇报(学校)
2014/10/04 职场文书
离婚协议书怎样才有法律效力
2014/10/10 职场文书
农村党支部承诺书
2015/04/30 职场文书
2015年七年级班主任工作总结
2015/05/21 职场文书
2016大学生党校学习心得体会
2016/01/06 职场文书
jquery插件实现代码雨特效
2021/04/24 jQuery
宫崎骏十大动画电影,宫崎骏好看的动画电影排名
2022/03/22 日漫
详解Golang如何实现支持随机删除元素的堆
2022/09/23 Python