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 相关文章推荐
Aptana调试javascript图解教程
Nov 30 Javascript
动态载入js提高网页打开速度的方法
Jul 04 Javascript
Bootstrap网格系统详解
Apr 26 Javascript
jQuery实现可展开折叠的导航效果示例
Sep 12 Javascript
JavaScript实现简单生成随机颜色的方法
Sep 21 Javascript
详解JSONObject和JSONArray区别及基本用法
Oct 25 Javascript
关于Angularjs中自定义指令一些有价值的细节和技巧小结
Apr 22 Javascript
浅谈Angular HttpClient简单入门
May 04 Javascript
JS构造一个html文本内容成文件流形式发送到后台
Jul 31 Javascript
VUE渲染后端返回含有script标签的html字符串示例
Oct 28 Javascript
React学习之JSX与react事件实例分析
Jan 06 Javascript
vue 查看dist文件里的结构(多种方式)
Jan 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&&mysql)三
2006/10/09 PHP
PHP 源代码压缩小工具
2009/12/22 PHP
PHP通过正则表达式下载图片到本地的实现代码
2011/09/19 PHP
Youku 视频绝对地址获取的方法详解
2013/06/26 PHP
浅谈Eclipse PDT调试PHP程序
2014/06/09 PHP
深入浅析PHP无限极分类的案例教程
2016/05/09 PHP
php处理单文件、多文件上传代码分享
2016/08/24 PHP
php 命名空间(namespace)原理与用法实例小结
2019/11/13 PHP
javascript中创建对象的几种方法总结
2013/11/01 Javascript
js获取数组的最后一个元素
2015/04/14 Javascript
Jquery实现顶部弹出框特效
2015/08/08 Javascript
jQuery基于toggle实现click触发DIV的显示与隐藏问题分析
2016/06/12 Javascript
JavaScript基于原型链的继承
2016/06/22 Javascript
微信js-sdk分享功能接口常用逻辑封装示例
2016/10/13 Javascript
基于React实现表单数据的添加和删除详解
2017/03/14 Javascript
zTree jQuery 树插件的使用(实例讲解)
2017/09/25 jQuery
React Native悬浮按钮组件的示例代码
2018/04/05 Javascript
详解性能更优越的小程序图片懒加载方式
2018/07/18 Javascript
JS实现的贪吃蛇游戏完整实例
2019/01/18 Javascript
javascript中的offsetWidth、clientWidth、innerWidth及相关属性方法
2020/05/14 Javascript
vue el-upload上传文件的示例代码
2020/12/21 Vue.js
[00:31]2016完美“圣”典风云人物:国士无双宣传片
2016/12/04 DOTA
编写Python脚本来获取mp3文件tag信息的教程
2015/05/04 Python
整理Python 常用string函数(收藏)
2016/05/30 Python
Python实现的大数据分析操作系统日志功能示例
2019/02/11 Python
【python】matplotlib动态显示详解
2019/04/11 Python
Html5调用手机摄像头并实现人脸识别的实现
2018/12/21 HTML / CSS
Exoticca英国:以最优惠的价格提供豪华异国情调旅行
2018/10/18 全球购物
应付会计岗位职责
2013/12/12 职场文书
鲜花方阵解说词
2014/02/13 职场文书
一次性工伤赔偿协议书范本
2014/11/25 职场文书
2014年民主评议党员工作总结
2014/12/02 职场文书
2014年政教处工作总结
2014/12/20 职场文书
2015年关爱留守儿童工作总结
2015/05/22 职场文书
Nginx同一个域名配置多个项目的实现方法
2021/03/31 Servers
mysql分表之后如何平滑上线详解
2021/11/01 MySQL