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 Undefined,Null类型和NaN值区别
Oct 22 Javascript
网页中的图片的处理方法与代码
Nov 26 Javascript
jQueryUI如何自定义组件实现代码
Nov 14 Javascript
js切换div css注意的细节
Dec 10 Javascript
js防止DIV布局滚动时闪动的解决方法
Oct 30 Javascript
jquery结婚电子请柬特效源码分享
Aug 21 Javascript
bootstrap table使用入门基本用法
May 24 Javascript
vue项目base64字符串转图片的实现代码
Jul 13 Javascript
layui 表格的属性的显示转换方法
Aug 14 Javascript
详解Vue.js 作用域、slot用法(单个slot、具名slot)
Oct 15 Javascript
vue style width a href动态拼接问题的解决
Aug 07 Javascript
vue之封装多个组件调用同一接口的案例
Aug 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字符串的比较函数strcmp()与strcasecmp()的使用详解
2013/05/15 PHP
九个你必须知道而且又很好用的php函数和特点
2013/08/08 PHP
php的SimpleXML方法读写XML接口文件实例解析
2014/06/16 PHP
thinkPHP实现瀑布流的方法
2014/11/29 PHP
Swoole4.4协程抢占式调度器详解
2019/05/23 PHP
图片自动缩小 点击放大
2008/07/07 Javascript
Javascript实现的类似Google的Div拖动效果代码
2011/08/09 Javascript
HTML,CSS,JavaScript速查表推荐
2014/12/02 Javascript
JS实现动态给图片添加边框的方法
2015/04/01 Javascript
全系IE支持Bootstrap的解决方法
2015/10/19 Javascript
JavaScript中日期的相关操作方法总结
2015/10/24 Javascript
js剪切板应用clipboardData实例解析
2016/05/29 Javascript
D3.js封装文本实现自动换行和旋转平移等功能
2016/10/14 Javascript
Node.js中用D3.js的方法示例
2017/01/16 Javascript
微信小程序实现漂亮的弹窗效果
2020/05/26 Javascript
快速解决bootstrap下拉菜单无法隐藏的问题
2018/08/10 Javascript
详解npm 配置项registry修改为淘宝镜像
2018/09/07 Javascript
[56:58]VP vs Optic 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
使用Python实现简单的服务器功能
2017/08/25 Python
让Python更加充分的使用Sqlite3
2017/12/11 Python
Python的numpy库中将矩阵转换为列表等函数的方法
2018/04/04 Python
Python中的Numpy矩阵操作
2018/08/12 Python
SELENIUM自动化模拟键盘快捷键操作实现解析
2019/10/28 Python
python 图片二值化处理(处理后为纯黑白的图片)
2019/11/01 Python
Python爬虫解析网页的4种方式实例及原理解析
2019/12/30 Python
如何对python的字典进行排序
2020/06/19 Python
python上下文管理的使用场景实例讲解
2021/03/03 Python
制药工程专业应届生求职信
2013/09/24 职场文书
纺织工程专业个人求职信范文
2014/01/27 职场文书
感恩节活动策划方案
2014/05/16 职场文书
抗震救灾标语
2014/06/26 职场文书
惊涛骇浪观后感
2015/06/05 职场文书
记者节感言
2015/08/03 职场文书
2016年小学生迎国庆广播稿
2015/12/18 职场文书
golang中字符串MD5生成方式总结
2021/07/04 Golang
动画电影《擅长捉弄人的高木同学》6月10日上映!
2022/03/20 日漫