vue2.0仿真后台json数据详解

最近，一个2.0或更高版本的购物平台正在跟进。说到模拟后台数据交互，视频谈到json-server是一个插件和express。由于前面的配置都在build/dev-server.js文件夹中，所以它们在vue2.0中都消失了，并且都集成到了build/webpack.dev.conf.js文件中。在不断查阅数据后，仿真终于成功。

1.首先，npm install vue-resource - save安装vue-resource并在页面上引用它(- save会将依赖包的名称添加到package.json文件的dependencies关键字中，而- save-dev会添加到package.json文件的devDependencies中)

2.在项目目录中添加一个xx.json。随你怎么叫，但里面的格式必须是json格式。如果不确定是否符合json格式，可以点击这里使用工具进行验证

3.直接在webpack-dev-conf.js文件中修改

第一步：在const portfinder=require(' portfinder ')后添加

const express=require(' express ')const app=express()//request server varappdata=require('./db . JSON ')//加载本地数据文件=appdata.getboardlistvar获取相应的本地数据varproducts=appdata . getproductlistvarboards=appdata . getboardlistvar apiroutes=express . router()app . use('/API '，API routes)第二步：找到devServer并在其中添加before()方法

devserver : { clientloglevel : '警告'，historyApiFallback: {重写：[{ from :/}。*/，to : path . POSIX . join(config . dev . assets public path，' index.html') }，]，}，hot: true，contentBase: false，//因为我们使用了CopyWebpackPlugin。compress: true，host: HOST || config.dev.host，port: PORT || config.dev.port，open : config . dev . autoopenbrowser，overlay : config . dev . error overlay？{ warnings: false，errors: true } : false，public path : config . dev . assets public path，proxy : config . dev . proxy table，quiet: true，//friendyerrorsplash watch options : { poll 3360 config . dev . poll，}，//在此处添加，请记住在它前面加上逗号，否则您将在(app) {app.get('/api/news '，(req，news)之前报告错误到达这里后，请记住所有修改的配置都需要重新启动运行命令：npm run dev才能生效(这非常重要，否则无法请求数据)

然后我们可以在浏览器中请求我们模拟的数据：

5.通过get in create()函数请求json数据，并将其添加到页面中

export default { components 3360 { slide }，//请求模拟json数据created:function () {this。$ http.get ('API/news ')。然后((数据)={this。news list=data . data . data；//newsList是在页面上定义的变量，用于加载请求的数据}，(err)={console.log (err)}，这。$ http.get ('API/products ')。然后((数据)={ this . product list=data . data . data；}，(err)={console.log(err)}，这。$http.get('api/boards ')。然后((data)={ this . boardlist=data . data . data；}，(err)={console.log (err)}，一个在页面上定义的变量，用于加载请求的数据

Data () {return {boardlist: []，newslist: []，productlist 3360 {}}，6。在页面上调用

页面如下所示：

以上是边肖介绍的vue2.0仿真背景下json数据的详细讲解和整合，希望对大家有所帮助。如果你有任何问题，请给我留言，边肖会及时回复你。非常感谢您对我们网站的支持！