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 图片上传预览-兼容标准
Jun 01 Javascript
JavaScript 封装Ajax传递的数据代码
Jun 05 Javascript
jquery实现根据浏览器窗口大小自动缩放图片的方法
Jul 17 Javascript
基于javascript实现浏览器滚动条快到底部时自动加载数据
Nov 30 Javascript
javascript表单处理具体实现代码(表单、链接、按钮)
May 07 Javascript
动态的9*9乘法表效果的实现代码
May 16 Javascript
AngularJS 所有版本下载地址
Sep 14 Javascript
jQuery图片轮播功能实例代码
Jan 29 Javascript
tab栏切换原理
Mar 22 Javascript
微信小程序数字滚动插件使用详解
Feb 02 Javascript
收集前端面试题之url、href、src
Mar 22 Javascript
新年快乐! javascript实现超级炫酷的3D烟花特效
Jan 30 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 验证码的实现代码
2011/07/17 PHP
PHP实现获取客户端IP并获取IP信息
2015/03/17 PHP
Zend Framework教程之Loader以及PluginLoader用法详解
2016/03/09 PHP
自写的利用PDO对mysql数据库增删改查操作类
2018/02/19 PHP
捕获关闭窗口的脚本
2009/01/10 Javascript
javascript+iframe 实现无刷新载入整页的代码
2010/03/17 Javascript
function foo的原型与prototype属性解惑
2010/11/19 Javascript
file模式访问网页时iframe高度自适应解决方案
2013/01/16 Javascript
由浅入深讲解Javascript继承机制与simple-inheritance源码分析
2015/12/13 Javascript
HTML Table 空白单元格补全的简单实现
2016/10/13 Javascript
jquery+Jscex打造游戏力度条
2020/09/12 Javascript
jQGrid动态填充select下拉框的选项值(动态填充)
2016/11/28 Javascript
Angularjs自定义指令Directive详解
2017/05/27 Javascript
浏览器调试动态js脚本的方法(图解)
2018/01/19 Javascript
vue如何根据网站路由判断页面主题色详解
2018/11/02 Javascript
浅谈python中requests模块导入的问题
2018/05/18 Python
Python键盘输入转换为列表的实例
2018/06/23 Python
Python hashlib常见摘要算法详解
2020/01/13 Python
解决pycharm中导入自己写的.py函数出错问题
2020/02/12 Python
Python使用pyyaml模块处理yaml数据
2020/04/14 Python
python利用后缀表达式实现计算器功能
2021/02/22 Python
HTML5+CSS3网页加载进度条的实现,下载进度条的代码实例
2016/12/30 HTML / CSS
Algenist奥杰尼官网:微藻抗衰老护肤品牌
2017/07/15 全球购物
美国正宗设计师眼镜在线零售商:EYEZZ
2019/03/23 全球购物
法律专业自我鉴定
2013/10/03 职场文书
运动会通讯稿200字
2014/02/16 职场文书
预备党员的自我评价
2014/03/12 职场文书
2014年两会学习心得范例
2014/03/17 职场文书
超市活动计划书
2014/04/24 职场文书
四风对照检查材料思想汇报
2014/09/20 职场文书
2014年语文教研组工作总结
2014/12/06 职场文书
2014年学前班工作总结
2014/12/08 职场文书
毕业生对母校寄语
2015/02/26 职场文书
高中生军训感言
2015/08/01 职场文书
小学中队长竞选稿
2015/11/20 职场文书
司法廉洁教育心得体会
2016/01/20 职场文书