vue.js学习笔记(二)：如何加载本地json文件
2024-08-25 14:49:38
在项目开发的过程中，如果后台接口还未开发完成，这个时候所以我们可以自建一个假数据文件(如data.json)到项目文件夹中，这样我们就可以模仿后台的数据进行开发。但是，如何在一个vue.js 项目中引入本地的json文件呢，下面就将步骤贴出来。
整个项目是由vue-cli脚手架搭建而成。具体项目结构如下：
1：首先我们使用vue-cli脚手架工具打包成上图所示的样子，不会vue-cli请跳转至这里：传送门
2：我们找到bulid>dev-server.js,然后打开
3：在里面加入这段代码，大概在20行左右）。
var app = express() // 从这后面开始加
var goodsData = require('../data.json')
var router = express.Router()
router.get("/goods", function (req,res) {
res.json(goodsData)
})
app.use(router)
这里用到的是node.js+express框架的知识。
4：将json文件放入项目中
{
"status":"0",
"result":[
{
"productId":"10001",
"productName":"小米6",
"prodcutPrice":"2499",
"prodcutImg":"mi6.jpg"
},
{
"productId":"10002",
"productName":"小米笔记本",
"prodcutPrice":"3999",
"prodcutImg":"note.jpg"
},
{
"productId":"10003",
"productName":"小米6",
"prodcutPrice":"2499",
"prodcutImg":"mi6.jpg"
},
{
"productId":"10004",
"productName":"小米6",
"prodcutPrice":"2499",
"prodcutImg":"1.jpg"
},
{
"productId":"10001",
"productName":"小米6",
"prodcutPrice":"2499",
"prodcutImg":"mi6.jpg"
},
{
"productId":"10002",
"productName":"小米笔记本",
"prodcutPrice":"3999",
"prodcutImg":"note.jpg"
},
{
"productId":"10003",
"productName":"小米6",
"prodcutPrice":"2499",
"prodcutImg":"mi6.jpg"
},
{
"productId":"10004",
"productName":"小米6",
"prodcutPrice":"2499",
"prodcutImg":"1.jpg"
}
] }
5： 在某个组件中使用axios或者vue-resource调用:
<script>
import axios from 'axios'
export default{
data(){
return { }
}
mounted () {
this.getGoodsList()
},
methods: {
getGoodsList () {
axios.get('/goods').then((res) => {
var result = res.data
console.log(result)
})
}
}
}
</script>
6：页面中打印这个结果：
最新文章
- tomcat URL乱码问题
- sql 查询最近30分钟或者自定义时间数据
- c语言检测文件是否存在int __cdecl access(const char *, int);
- 第十四章 校本化CSS
- Sonar+Hudson+Maven构建系列之二：迁移Sonar
- c#经典俄罗斯方块 vs2012开发
- POJ 2594 传递闭包的最小路径覆盖
- iOS获取文件和文件夹大小
- font awesome icon
- linux lsof命令详解
- YII 自动引入juquery进行表单验证
- EDM（邮件营销）
- Project下载提示检索 COM 类工厂中 CLSID 为 {36D27C48-A1E8-11D3-BA55-00C04F72F325} 的组件失败
- ubuntu命令查询版本和内核版本
- 「mysql优化专题」视图应用竟然还可以这么优化？不得不收藏（8）
- 论文泛读·Adversarial Learning for Neural Dialogue Generation
- Java面试题 静态代码块 构造代码块 构造方法 的执行顺序
- 08-Python入门学习-文件与函数
- Javascript 数组相关操作
- PHP安装+使用