摘要:最近是让给我折腾的做梦都梦见写。。。留言可按回复已留暂无留言删除该写了返回失败内容时间戳顶次数踩次数失败
最近是让json给我折腾的做梦都梦见写json???。。。阿欧~琢磨着我算是明白了吧~我说说看,你们听听看~有不同观点可以给我留言哟~
接口就是由前后端协定好异步交互数据的方式,使用ajax的形式或者jsonp的形式进行传递,数据格式可以是字符串或者json
这次用到的知识点:
vue生命周期: (钩子函数)
created -> 实例已经创建 √ new Vue()创建完成成功之后调用方法 beforeCompile -> 编译之前 compiled -> 编译之后 ready -> 插入到文档中 √ beforeDestroy -> 销毁之前 destroyed -> 销毁之后
之前讲的get/post/jsonp的方式也可以用下面这种方式写:
this.$http({ url:地址 data:给后台提交数据, method:"get"/post/jsonp jsonp:"cb" //cbName }).then(function(res){},function(res){});
分析:
原理:通过在textarea中输入数据,通过v-model获取用户输入的数据,在add方法通过添加接口将要添加的数据格式存在mydata数组中,这里面的内容是用户输入的,所以获取通过content:this.t1;同样通过getPage方法获取一页数据接口,这里面获取的是数组,需要循环遍历一下,存在mydata数组中,最后通过created调用一下,然后在结构中用v-for显示在页面当中
created:function () { this.getPage(1); }
我需要添加数据还需要把之前的数据显示出来,这就需要两个接口,两个接口都在weibo.php中:
添加一条接口
weibo.php?act=add&content=xxx 添加一条 返回:{error:0, id: 新添加内容的ID, time: 添加时间}
获取一页数据接口
weibo.php?act=get&page=1 获取一页数据 返回:[{id: ID, content: "内容", time: 时间戳, acc: 顶次数, ref: 踩次数}, {...}, ...]
同样,这里有数据交互,仍然需要引入
这里面还有关于时间的自定义过滤器:
Vue.filter("date",function(input){ var oDate=new Date(input*1000); return oDate.getFullYear()+"-"+(oDate.getMonth()+1)+"-"+oDate.getDate()+" "+oDate.getHours()+":"+oDate.getMinutes()+":"+oDate.getSeconds(); });
结构中过滤一下date:
{{item.time|date}}
还有一个知识点就是在网速慢的情况下会出现花括号,在用到花括号的范围上加v-cloak解决,当然还有其他解决办法如v-text="msg">v-html="msg">
呈现样子:
结构:
问:为啥@click="add"有时候有括号有时候没有?答:如果有参数的话就加括号,咩有参数就不用加了
问:为啥我引入weibo.php文件没有调用?答:因为这需要php的运行环境,比如链接数据库的参数。(可按 Enter 回复)该写vm了:
Vue.filter("date",function(input){ var oDate=new Date(input*1000); return oDate.getFullYear()+"-"+(oDate.getMonth()+1)+"-"+oDate.getDate()+" "+oDate.getHours()+":"+oDate.getMinutes()+":"+oDate.getSeconds(); }); window.onload=function () { var URL="weibo.php"; var vm=new Vue({ el:".znsArea", data:{ t1:"", mydata:[] }, methods:{ add:function () { // weibo.php?act=add&content=xxx this.$http({ url:URL, data:{ act:"add", content:this.t1 } }).then(function (res) { var jsons=res.data; this.mydata.unshift({ con:this.t1, time:jsons.time, acc:"0", ref:"0", id:jsons.id }) this.t1=""; },function (res) { alert("返回失败"); }) }, getPage:function (n) { this.$http({ url:URL, data:{ // weibo.php?act=get&page=1 act:"get", page:n } }).then(function (res) { var arr=res.data; for(var i=0;i文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/50500.html
摘要:选择结构变量和数据类型,赋值和输出算术运算选择结构循环结构函数定义,函数调用变量作用域栈,程序运行的基石面向对象异常处理语言提供的公用包上一节介绍了的算术运算,如加减乘除等,的运算规则跟四则运算一样。 选择结构 变量和数据类型,赋值和输出 算术运算 选择结构 = 60) { System.out.println(You have passed the exam...
摘要:前端日报精选浅谈前端和移动端的事件机制字符串转数字陷阱前端魔法堂调用栈,异常实例中的宝藏一份完美的前端清单专为现代网站和极致的开发者打造居中办法学习笔记中文开发如何在里面优雅的解决跨域,路由冲突问题超详细前端学习译响应式脑电波如何使 2017-10-26 前端日报 精选 浅谈前端和移动端的事件机制JavaScript 字符串转数字:陷阱前端魔法堂——调用栈,异常实例中的宝藏一份完美的前...
阅读 3095·2023-04-25 18:22
阅读 2293·2021-11-17 09:33
阅读 3242·2021-10-11 10:59
阅读 3223·2021-09-22 15:50
阅读 2783·2021-09-10 10:50
阅读 849·2019-08-30 15:53
阅读 426·2019-08-29 11:21
阅读 2669·2019-08-26 13:58
{{item.con}}
{{item.time|date}} {{item.acc}} {{item.ref}} 删除