脚本宝典收集整理的这篇文章主要介绍了浅谈使用ajax和vue实现前后端分离,脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
Ajax即Asynchronous Javascript And XML,它的意思是异步js和xml,包括: HTML 或 XHTML, CSS, JavaScript, DOM, XML, XSLT, 以及最重要的XMLHttpRequest。使用Ajax技术网页应用能够快速地将增量更新呈现在用户界面上,而不需要重载(刷新)整个页面,这使得程序能够更快地回应用户的操作。
Vue是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与现代化的工具链以及各种支持类库结合使用时,Vue 也完全能够为复杂的单页应用提供驱动。
以上内容引用自百度百科。
ajax帮我们封装了javascript的XmlHttpRequest对象,使得我们可以很轻松地通过url地址来获取到一些数据,再通过dom操作将数据渲染到页面上,这样我们便不需要刷新整个页面,就能在前端上非常快速地改变外观。
而vue则为我们提供了数据和dom的响应式驱动,帮助我们实时渲染页面中的dom元素,而不再需要我们使用原生js复杂臃肿的document.queryselector方法获取元素再做操作。
总之,ajax负责获取数据,vue负责实时渲染数据,就这么简单。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>vue和ajax的配合使用</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
</head>
<body>
<div id="app">
<span>{{message}}</span>
<input type="button" value="获取Message" @click="getMessage">
</div>
<script>
var vue = new Vue({
el: "#app",
data: {
message: "demo"
},
methods: {
getMessage:function(){
var that=this;
$.ajax({
type: "method",
url: "url",
data: "data",
dataType: "dataType",
success: function (response) {
that.message = response.data;
}
});
}
}
})
</script>
</body>
</html>
在这个案例中,我引入了vue2.0和jquery的官方地址,并随手写了一个id为app的div,在这个div中的span标签中,将我在vue对象中声明的message变量渲染在这里,如读者所见,它的初值是"demo"。
另外,除了声明了变量,我还声明了一个函数,名叫getMessage,它将作为ajax请求的回调函数,它的作用是:获取ajax请求得到的数据并且赋值给message变量。div中的按钮通过vue指令@click绑定了这个函数。当我们点击了这个按钮后,message变量的值就会发生变化,随之发生的就是页面数据的实时渲染,这非常酷!
这里要注意的是,getMessage()函数中的this指向问题。如读者所见,我们必须先将this存放到that(当然也可以取别的名字)中,在ajax回调中使用that而不是this。
如果你使用以下这种写法,那你就大错特错了!
<script>
var vue = new Vue({
el: "#app",
data: {
message: "demo"
},
methods: {
getMessage:function(){
$.ajax({
type: "method",
url: "url",
data: "data",
dataType: "dataType",
success: function (response) {
this.message = response.data;
}
});
}
}
})
</script>
这样去写,会导致this.message报undefined异常。这就是this指向不对的问题。
说了这么多,如果读者想要复制这段代码自己测试的话,请将ajax请求中的属性加以更改,否则将无效。
我们以java为例,传统的开发会在jsp中通过嵌入java代码实现与后端的链接,但这,写过的都知道,比较笨重且麻烦,如果有一种办法能让浏览器自己通过脚本语言渲染数据就好了。于是,我们想到了Vue。
我们可以通过ajax请求给后端的Servlet,也就是MVC模式下的视图层,然后通过回调函数将数据存放在Vue对象中,而vue对象中的data是和页面元素双向绑定的,这样就能在不需要刷新页面的情况下渲染新的元素。
这样一来,前端就真的只是前端,后端就真的只是后端了。
前端请求后端接口的数据然后渲染到页面,后端只需要负责开发供前端人员使用的接口。这样一来,相比于传统开发模式,开发效率将大大提高。
以上全部内容仅代表个人观点,如有异议请及时指出,毕竟博主也只是个菜鸟。
以上是脚本宝典为你收集整理的浅谈使用ajax和vue实现前后端分离全部内容,希望文章能够帮你解决浅谈使用ajax和vue实现前后端分离所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。