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 相关文章推荐
VBScript版代码高亮
Jun 26 Javascript
JS request函数 用来获取url参数
May 17 Javascript
javascript动态添加样式(行内式/嵌入式/外链式等规则)
Jun 24 Javascript
jquery cookie的用法总结
Nov 18 Javascript
ExtJS判断IE浏览器类型的方法
Feb 10 Javascript
node.js中的buffer.Buffer.byteLength方法使用说明
Dec 10 Javascript
JavaScript动态修改背景颜色的方法
Apr 16 Javascript
如何通过js实现图片预览功能【附实例代码】
Mar 30 Javascript
使用jquery给指定的table动态添加一行、删除一行
Oct 13 Javascript
vue.js学习之UI组件开发教程
Jul 03 Javascript
Vue路由守卫及页面登录权限控制的设置方法(两种)
Mar 31 Javascript
jquery插件懒加载的示例
Oct 24 jQuery
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
十大感人催泪爱情动漫 第一名至今不忍在看第二遍
2020/03/04 日漫
PHP配置心得包含MYSQL5乱码解决
2006/11/20 PHP
百度工程师讲PHP函数的实现原理及性能分析(三)
2015/05/13 PHP
Prototype使用指南之selector.js说明
2008/10/26 Javascript
仅Firefox中链接A无法实现模拟点击以触发其默认行为
2011/07/31 Javascript
js获得网页背景色和字体色的方法
2014/03/21 Javascript
基于jQuery实现搜索关键字自动匹配功能
2020/03/26 Javascript
Javascript复制实例详解
2016/01/28 Javascript
JavaScript 数组中最大最小值
2016/06/05 Javascript
AngularJS 简单应用实例
2016/07/28 Javascript
改变layer confirm弹窗按钮的颜色方法
2019/09/12 Javascript
Vuex实现数据共享的方法
2019/12/20 Javascript
jQuery实现手风琴特效
2021/01/11 jQuery
[37:35]DOTA2上海特级锦标赛A组资格赛#1 Secret VS MVP.Phx第二局
2016/02/25 DOTA
python 控制语句
2011/11/03 Python
深入了解Python数据类型之列表
2016/06/24 Python
使用Django开发简单接口实现文章增删改查
2019/05/09 Python
Django框架之DRF 基于mixins来封装的视图详解
2019/07/23 Python
python 实现将Numpy数组保存为图像
2020/01/09 Python
python opencv 实现读取、显示、写入图像的方法
2020/06/08 Python
Python 基于jwt实现认证机制流程解析
2020/06/22 Python
FOREO斐珞尔官方旗舰店:LUNA露娜洁面仪
2018/03/11 全球购物
怎样声明子类
2013/07/02 面试题
南京某公司笔试题
2013/01/27 面试题
早会主持词
2014/03/17 职场文书
2014年母亲节演讲稿范文
2014/05/07 职场文书
幼儿教师小班个人总结
2015/02/05 职场文书
2015年小学财务工作总结
2015/07/20 职场文书
如何书写授权委托书?
2019/06/25 职场文书
Python一行代码实现自动发邮件功能
2021/05/30 Python
pycharm部署django项目到云服务器的详细流程
2021/06/29 Python
Vue3如何理解ref toRef和toRefs的区别
2022/02/18 Vue.js
Java 写一个简单的图书管理系统
2022/04/26 Java/Android
多线程Spring通过@Scheduled实现定时任务
2022/05/25 Java/Android
关于mysql中string和number的转换问题
2022/06/14 MySQL
JavaScript架构localStorage特殊场景下二次封装操作
2022/06/21 Javascript