新版vue-cli如何使用json-server来mork
新版的vue-cli由于把dev-server。js合并到webpack.dev.conf.js中,所以在配置json-server的时候文档中的方法就不适应了第一步:安装:命令行中输入 cnpm install json-server --save第二步:找到build/webpack.dev.conf.js并在const portfinder = require('portfinder')这一
新版的vue-cli由于把dev-server。js合并到webpack.dev.conf.js中,所以在配置json-server的时候文档中的方法就不适应了
第一步:安装:命令行中输入 cnpm install json-server --save
第二步:找到build/webpack.dev.conf.js并在const portfinder = require('portfinder')这一行下面添加如下配置
const express = require('express') //node.js的内置框架
const app = express()//请求server
var appData = require('../static/json-moni/jiekou1.json')//加载本地数据文件
var suibian= appData.suibian//获取对应的本地数据并赋值给变量
var suibian2= appData.suibian2//获取对应的本地数据并赋值给变量
app.use('/api', apiRoutes)//通过路由请求数据
第三步:设置get请求:在build/webpack.dev.conf.js下找到devServer并在watchOptions: {
poll: config.dev.poll,
},后面添加如下配置:
before(app) {
app.get('api/suibian', (req, res) => {
res.json({
errno: 0,
data: suibian
})//接口返回json数据,上面配置的数据seller就赋值给data请求后调用
}),
app.get('api/suibian2', (req, res) => {
res.json({
errno: 0,
data: suibian2
})//接口返回json数据,上面配置的数据seller就赋值给data请求后调用
})
}
基本配置就如上所述了,下面就是自己写个json文件和调用接口测试了
一:json文件如下:
{
"suibian": {
"supports": [
{
"title": "name1",
"id": "0"
},
{
"title": "name2",
"id": "1"
},
{
"title": "name3",
"id": "2"
}
]
}
}
备注:可以在http://localhost:8080/api/suibian来查看自己写的接口json数据
二:templat中随便写模板,如:
<ul>
<li v-for="item in itemlis">{{ item.title }}</li>
</ul>
三:调用可以用vue-resource,书写格式如下:
export default {name: 'HelloWorld',
created:function(){
this.$http.get('api/suibian').then((res)=>{
console.log(res)
this.itemlis=res.data.data.supports //注意使用箭头函数才可用this不然需要在函数外先定义变量把this赋值给变量
console.log(this.itemlis)
},function(err){
console.log(err)
})
},
data () {
return {
msg: 'Welcome to Your Vue.js App',
itemlis:[],
}
}
}
更多推荐
所有评论(0)