本文实例讲述了Vue加载json文件的方法。分享给大家供大家参考,具体如下:
一、在构建/dev-server。js文件里<代码>应用var=表达()这句代码后面添加如下(旧版):
var appData=https://www.yisu.com/zixun/require (“. ./address.json”);//引入address.json文件
var apiRoutes=express.Router ();
apiRoutes。(/地址,函数(点播,res) {
res.json ({
errno: 0,
数据:appData
});
});
app.use (/api, apiRoutes);//访问地址为:/api/地址
之前
新版代码如下:
在文件里添加如下代码:
const表达=要求(表达)
const应用=表示()
var appData=https://www.yisu.com/zixun/require (“. ./address.json”)
var apiRoutes=express.Router ()
app.use (/api, apiRoutes)
之前
//在devServer对象里添加如下代码:
之前(app) {
app.get (/api/地址,(要求,res)=比;{
res.json ({
errno: 0,
数据:appData
}）
}）
}
之前
二,然后重新<代码> npm dev>
三,这时候在浏览器输入便可看到json文件的数据了。
在组件里可以用axios或者其它方式请求获取数据,请求网址为:/api/地址,例如用axios的话:
(1)、下载axios,如果没有的话
npm安装,节省axios vue-axios
之前
(2),在main.js里引入
从“axios”进口axios
Vue.prototype。$ http=axios
之前
(3),开始请求
美元。http.get (/api/地址)。(反应=比;{
console.log(响应)
}、响应=比;{
console.log(“数据加载失败”)
}）
之前
<强>代码检验,检验,美化,格式化工具:
http://tools.jb51.net/code/json
http://tools.jb51.net/code/jsonformat
互相转换工具:
http://tools.jb51.net/code/xmljson
http://tools.jb51.net/code/jsoncodeformat
压缩/转义工具:
http://tools.jb51.net/code/json_yasuo_trans
希望本文所述对大家vue.js程序设计有所帮助。
