最近接到一个比较简单的项目,不准备使用数据库,打算用json数据就可以了。结合当前火热的vue.js进行数据渲染。
尽管不打算使用数据库,可是一般的操作增删查改依旧是少不了的。如果使用到数据库的话,不妨做一个api出来,那么网站、app等都可以依照这个进行操作。在这篇文章里面,我们只是打算简单的引用而已。
下面先来看看我的json文件,这里是一个类别文档category.json:
{
"msg": "ok",
"data":[
{
"id":"1",
"name": "地产",
"url":"/category/list/1"
},
{ "id":"2",
"name": "科技",
"url":"/category/list/2"},
{ "id":"3",
"name": "医药",
"url":"/category/list/3"},
{ "id":"4",
"name": "其他",
"url":"/category/list/4"}
]
}
下面我们通过javascript进行渲染,将数据渲染到导航里面去。这里有两种方式:如果你的项目已经带有jquery的话,可以参考一下使用下面的代码:
$(function(){
$.ajax({
type:'get',
url:'category.json',
success: function(data){
if(data.msg == "ok"){
pushdom(data.data);
}
else
{
alert("服务器返回异常");
} },
error: function(data){
alert(json.stringify(data));
}
});
function pushdom(data1){
var vm = new vue({ el: '#app', data: { peps:data1 } });
}
})
然后到html中,把数据渲染出来
上面的代码是使用jquery的$.ajax 将json的数据引入,但如果你的项目里面没有使用到jquery的话,就要使用到vue-resource.js了。
在html中引入:
我第一次使用vue-resource.js的时候,和vue.js版本不匹配居然屡屡出错,这是新手必须要注意的。这是一个坑啊,如果你们运行下面的代码不能渲染的话,99%是遇到这个坑了。
var app = new vue({
el: '#app',
data: {
peps: ''
},
mounted: function() {
this.getjsoninfo()
},
methods: {
getjsoninfo: function() {
this.$http.get('category.json').then(function(response){
console.log(response.data.data)
var resdata = response.data.data
this.peps = resdata
}).catch(function(response){
console.log(response)
console.log("居然没有弹窗")
})
}
}
})
html处不用做其它修改。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持萬仟网。
希望与广大网友互动??
点此进行留言吧!