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 入门基础知识 想学习js的朋友可以参考下
Dec 26 Javascript
jQuery为iframe的body添加click事件的实现代码
Apr 07 Javascript
如何使用Javascript正则表达式来格式化XML内容
Jul 04 Javascript
详解jQuery插件开发中的extend方法
Nov 19 Javascript
JavaScript实现的简单幂函数实例
Apr 17 Javascript
js读取json文件片段中的数据实例
Mar 09 Javascript
详解Vue2.X的路由管理记录之 钩子函数(切割流水线)
May 02 Javascript
Vue渲染函数详解
Sep 15 Javascript
防止页面url缓存中ajax中post请求的处理方法
Oct 10 Javascript
JavaScript递归函数解“汉诺塔”算法代码解析
Jul 05 Javascript
详解babel升级到7.X采坑总结
May 12 Javascript
关于AngularJS中几种Providers的区别总结
May 17 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 函数执行效率的小比较
2010/10/17 PHP
PHP is_array() 检测变量是否是数组的实现方法
2016/06/13 PHP
js Event对象的5种坐标
2011/09/12 Javascript
js判读浏览器是否支持html5的canvas的代码
2013/11/18 Javascript
浏览器窗口加载和大小改变事件示例
2014/02/27 Javascript
jquery中 $.expr使用实例介绍
2014/06/09 Javascript
node.js中的buffer.write方法使用说明
2014/12/10 Javascript
js日期范围初始化得到前一个月日期的方法
2015/05/05 Javascript
使用Browserify配合jQuery进行编程的超级指南
2015/07/28 Javascript
jQuery事件绑定方法学习总结(推荐)
2016/11/21 Javascript
微信小程序搜索组件wxSearch实例详解
2017/06/08 Javascript
使用JS动态显示文本
2017/09/09 Javascript
angular内置provider之$compileProvider详解
2017/09/27 Javascript
vue.js todolist实现代码
2017/10/29 Javascript
vue-image-crop基于Vue的移动端图片裁剪组件示例
2018/08/28 Javascript
Vuex 快速入门(简单易懂)
2018/09/20 Javascript
详解ES6系列之私有变量的实现
2018/11/21 Javascript
Makefile/cmake/node-gyp中区分判断不同平台的方法
2018/12/18 Javascript
微信小程序Flex布局用法深入浅出分析
2019/04/25 Javascript
《javascript设计模式》学习笔记三:Javascript面向对象程序设计单例模式原理与实现方法分析
2020/04/07 Javascript
[01:03:27]Optic vs VGJ.S 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/20 DOTA
Python使用reportlab将目录下所有的文本文件打印成pdf的方法
2015/05/20 Python
python 环境变量和import模块导入方法(详解)
2017/07/11 Python
Python随机生成均匀分布在单位圆内的点代码示例
2017/11/13 Python
Opencv图像处理:如何判断图片里某个颜色值占的比例
2020/06/03 Python
HTML5之SVG 2D入门13—svg对决canvas及长处和适用场景分析
2013/01/30 HTML / CSS
Easy Spirit官网:美国休闲鞋履中的代表品牌
2019/04/12 全球购物
应届生求职信写作技巧
2013/10/24 职场文书
网管求职信
2014/03/03 职场文书
端午节活动策划方案
2014/03/09 职场文书
企业法人授权委托书
2014/04/03 职场文书
2015年度物业公司工作总结
2015/04/27 职场文书
世界名著读书笔记
2015/06/25 职场文书
庆七一主持词
2015/06/29 职场文书
教你用Java Swing实现自助取款机系统
2021/06/11 Java/Android
基于Redission的分布式锁实战
2022/08/14 Redis