> 馆藏中心

vue本地json数据问题

来源:cnblogs 编辑:王强

1.配置 build/webpack.dev.conf.js // 获取静态json数据 const express = require('express') const app = express() const apiServer = express() const bodyParser = require('body-parser') apiServer.use(bodyParser.urlencoded({ extended: true })) apiServer.use(bodyParser.json()) const apiRouter = express.Router() const fs = require('fs') apiRouter.route('/:apiName') .all(function (req, res) { fs.readFile('./db.json', 'utf8', function (err, data) { if (err) throw err var data = JSON.parse(data) if (data[req.params.apiName]) { res.json(data[req.params.apiName]) } else { res.send('no such api name') } }) }) apiServer.use('/api', apiRouter); apiServer.listen(8081, function (err) { if (err) { console.log(err) return } console.log('Listening at http://localhost:' + (8081) + '\n') }) 2.新建 db.json { "getNewsList": [ { "id": 1, "title": "新闻条目1新闻条目1新闻条目1新闻条目1", "url": "http://starcraft.com" }, { "id": 2, "title": "新闻条目2新闻条目2新闻条目2新闻条目2", "url": "http://warcraft.com" }, { "id": 3, "title": "新闻条3新闻条3新闻条3", "url": "http://overwatch.com" }, { "id": 4, "title": "新闻条4广告发布", "url": "http://hearstone.com" } ], "login": { "username": "yudongdong", "userId": 123123 }, "getPrice": { "amount": 678 }, "createOrder": { "orderId": "6djk979" }, "getOrderList": { "list": [ { "orderId": "ddj123", "product": "数据统计", "version": "高级版", "period": "1年", "buyNum": 2, "date": "2016-10-10", "amount": "500元" }, { "orderId": "yuj583", "product": "流量分析", "version": "户外版", "period": "3个月", "buyNum": 1, "date": "2016-5-2", "amount": "2200元" }, { "orderId": "pmd201", "product": "广告发布", "version": "商铺版", "period": "3年", "buyNum": 12, "date": "2016-8-3", "amount": "7890元" } ] } } 3.通过 localhost:8081/api/getNewsList 访问 4.在页面中获取的方式 export default { data() { newsList: [] }, created: function(){ this.$http.get('api/getNewsList').then((res)=> { this.newsList = res.data },(err)=> { console.log(err); }) } } 总结 以上所述是小编给大家介绍的vue2.5.2使用http请求获取静态json数据的实例代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持! 您可能感兴趣的文章:vue中axios处理http发送请求的示例(Post和get)Vue+axios 实现http拦截及路由拦截实例vue拦截器Vue.http.interceptors.push使用详解vue-resourse将json数据输出实例简单的vue-resourse获取json并应用到模板示例vue.js学习笔记:如何加载本地json文件www.179s.com防采集请勿采集本网。

改下路径,import认为你这个是npm安装的包了。你把menu所在的路径拼好就行了奖励园豆:5

============================================

本文主要讲v-resourse 获取json数据并传递到DOM中,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 1.demo目录,不要管index.html和index.js 2.html页面 vue-resourse-jos

把data换一个目录改一下路径吗

最近接到一个比较简单的项目,不准备使用数据库,打算用JSON数据就可以了。结合当前火热的VUE.JS进行数据渲染。 尽管不打算使用数据库,可是一般的操作增删查改依旧是

============================================

本文主要讲v-resourse 获取json数据并传递到DOM中,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 1.demo目录,不要管index.html和index.js 2.html页面 vue-resourse-jos

@小白萝卜呀: import JSON from 'menu.json' 改这个menu.json。拼成一个相对于你这个js位置的路径。

这样试试呢?不过还是建议老老实实看文档。newVue({el:'#post_from2',ready:function(){varself=this;this.$http.post('./fun/post.php',{type:"sydata&quo

1.准备工作 1.1 webpack.dev.conf.js 在 const portfinder = require(‘portfinder') 的下面加上以下代码 const express = require('express') const app = express() var appData = require('../data.json')//加载本地数据文件的路径 var leftMenu = appData.leftMenu //获取对应的本地数据 var 数据名称 = appData.选择项 var apiRoutes = express.Router() app.use('/api', apiRoutes) 找到devServer,在里面加入一下代码 before(app) { app.get('/api/leftmenu', (req, res) => { res.json({ errno: 0, data: leftMenu })//接口返回json数据,上面配置的数据seller就赋值给data请求后调用 }), app.get('/api/数据', (req, res) => { res.json({ errno: 0, data: 数据(与上面数据名称对应) }) }) } 2.在使用的组件里 created(){ this.$http.get('api/leftmenu').then((response) => { console.log(response) this.leftMenu = response.body.data //数据位置 }) } data(){ return{ leftMenu:[]; } } 总结 以上所述是小编给大家介绍的Vue2.5通过json文件读取数据的方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持! 您可能感兴趣的文章:vue-cli项目如何使用vue-resource获取本地的json数据(模拟服务端返回数据)详解vue渲染从后台获取的json数据详解vue-cli 脚手架项目-package.json详解通过JSON数据使用VUE.JSvue-resourse将json数据输出实例简单的vue-resourse获取json并应用到模板示例vue.js学习笔记:如何加载本地json文件内容来自www.179s.com请勿采集。

本站是提供个人知识管理的网络存储空间,所有内容均由用户发布,不代表本站观点。本文《vue本地json数据问题》转载自cnblogs,版权归原作者所有,若侵权请联系:E-MAIL:513175919@qq.com
违法违规信息请立即联系本网可获得现金奖励,TEL:1-8-2-1-0-2-3-3-3-8-1(电话仅供违法违规信息举报,侵权类信息请EMAIL。)

www.179s.com false 互联网 http://www.179s.com/jsblogcnk/po/pohvdk.html report 5105 改下路径,import认为你这个是npm安装的包了。你把menu所在的路径拼好就行了奖励园豆:5============================================把data换一个目录改一下路径吗============================================@小白萝卜呀: import JSON from 'menu.json' 改这个menu.json。拼成一个相对于你这个js位置的路径。

热门图片

经济金融企业管理法律法规社会民生科学教育降生活体育运动文化艺术电子数码电脑网络娱乐休闲行政地区心理分析医疗卫生