vue + webpack 模拟后台数据

一、在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 FriendlyErrorsPluginwatchOptions: {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 模拟后台数据相关推荐

vue项目模拟后台数据
这次我们来模拟一些后台数据,然后去请求它并且将其渲染到界面上.关于项目的搭建鄙人斗胆向大家推荐我的一篇随笔<Vue开发环境搭建及热更新> 一.数据建立我这里为了演示这个过程所以自己编写了 ...
vue --- configureWebpack模拟后台数据
初识使用vue/cli搭建的项目可以在vue.config.js中,模拟一个后台(express写法) vue.config.js configureWebpack: {devServer: {// ...
vue-cli模拟后台数据交互
作为一个前端入坑的妹子,在学习vue的道路上挣扎徘徊,由一开始的对vue一直蒙圈只知道双向数据绑定和一些'V-x'的指令,慢慢通过一个视频的学习渐渐入坑,对于我这个js基础不怎么好而且编程思维又不是很 ...
vue 饿了么模拟后台数据
1创建好项目后先模拟一下提供的json文件数据,为后面的工作做准备.首先把data.json放到与package.json平级目录下 (这是我的目录结构) 2.查看data.json数据结构分为 ...
vue mock模拟后台接口数据
vue mock 一.Json server 二.Mock 服务 1.安装 2.创建 Mock 3.main.js引入 4.组件中axure请求一.Json server 轻量级,将已有的json文 ...
学习vue饿了吗之模拟后台数据
1.建立data.json,放置目录如下 2.安装vue-resource npm install vue-resource --save 在main.js中配置 import VueResource ...
vue模仿后台数据_Vue学习之Vue模拟后台数据
1 {2 "seller": {3 "name": "粥品香坊(回龙观)",4 "description": " ...
vue项目模拟假数据
开发vue项目的时候需要用到一些假数据,这里我就分享一下用json-server这个包来托管数据. 首先就是npm install -g json-server来全局安装. 之后新建一个json文件, ...
vue 获取php后台数据,vue.js框架，php做后台语言，ajax获取数据不鞥正常渲染
悬赏园豆:20 [已解决问题] 解决于 2016-11-21 15:11 //这是html结构<div class="box" id="box"> ...

vue + webpack 模拟后台数据

一、在webpack-dev-conf.js文件中：

二、在goods.json文件：

三、在GoodsList.vue文件中：

vue + webpack 模拟后台数据相关推荐

最新文章

热门文章