关键词:
一、初识 vue 时的困惑
最近想学一门前端技术防身,看到博客园中写 vue 的多,那就 vue 吧。都说 vue 的官方教程写得好,所以我就从官方教程开始学习。官方教程说“Vue (读音 /vju?/,类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。”但是这个概念是个什么鬼?还是让人一头雾水嘛。而且我一开始也没有搞清楚 vue 的定位,只知道它是一个前端库,但是确实不知道它的优势是什么,还以为它是一个学会就能一劳永逸的万能的框架呢。官方教程一开始就讲怎么绑定页面上的元素和 JavaScript 中的数据,而且是双向绑定,自动更新,功能确实很强大。但是迟迟没有讲怎么和服务器端进行交互,怎么获取服务器端的数据。(后来经过反复阅读教程,才发现其实它一开始就说了“Vue 的核心库只关注视图层”,是我自己忽略了。)
二、最简单的前后端交互示例
吹再多的口水,也不如一个能运行的示例来得实在。这个例子也是从 vue 的官方教程中抄来的。首先,先建立一个 index.html
文件,编辑其内容,如下:
<!DOCTYPE html>
<html>
<head>
<title>My first Vue app</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/axios.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/lodash.min.js"></script>
</head>
<body>
<div id="watch-example">
<p>
Ask a yes/no question:
<input v-model="question">
</p>
<p> answer </p>
</div>
<script>
var watchExampleVM = new Vue(
el: ‘#watch-example‘,
data:
question: ‘‘,
answer: ‘I cannot give you an answer until you ask a question!‘
,
watch:
// 如果 question 发生改变,这个函数就会运行
question: function (newQuestion, oldQuestion)
this.answer = ‘Waiting for you to stop typing...‘
this.debouncedGetAnswer()
,
created: function ()
// `_.debounce` 是一个通过 Lodash 限制操作频率的函数。
// 在这个例子中,我们希望限制访问 yesno.wtf/api 的频率
// AJAX 请求直到用户输入完毕才会发出。想要了解更多关于
// `_.debounce` 函数 (及其近亲 `_.throttle`) 的知识,
// 请参考:https://lodash.com/docs#debounce
this.debouncedGetAnswer = _.debounce(this.getAnswer, 500)
,
methods:
getAnswer: function ()
if (this.question.indexOf(‘?‘) === -1)
this.answer = ‘Questions usually contain a question mark. ;-)‘
return
this.answer = ‘Thinking...‘
var vm = this
axios.get(‘https://yesno.wtf/api‘)
.then(function (response)
vm.answer = _.capitalize(response.data.answer)
)
.catch(function (error)
vm.answer = ‘Error! Could not reach the API. ‘ + error
)
)
</script>
</body>
</html>
然后使用 chromium 浏览器打开这个文件。下面是运行效果:
这里访问的后端是 https://yesno.wtf/api,它传回的数据时 json 格式的,如果直接访问它,得到的结果如下:
https://yesno.wtf 这是一个神奇的网站,当你对某件事拿不定注意,需要别人推你一把时,可以访问它,它会随机返回一个 gif 动画,点头表示 yes,摇头表示 no,帮你做这个艰难的决定。直接访问 https://yesno.wtf,注意在地址栏中不带 api 字样,可以得到这样的结果:
三、从这个示例,我学到了什么
首先,解答了我前面的疑惑,那就是怎么和后端交互。在这个示例中,它使用 axios 库从 https://yesno.wtf/api 获取数据。同时,在这个例子中,它还使用 lodash 限制刷新频率。
其次,这个示例只有一个 html 文件,在这个文件中,使用
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/axios.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/lodash.min.js"></script>
引入需要的 vue.js、 axios.js 和 lodash.js,不需要下载安装一些有的没的东西,不需要学习在服务器端运行 JavaScript 的任何知识。本来嘛,我是准备学 .netcore 的,再让我学个 nodejs 我也觉得不科学嘛。
最后,我知道了学习 vue 不是单纯学习 vue,还要学习 axios.js 和服务器交互,真的要写个产品,还少不了漂亮的 UI 界面啥的,所以还要学习和 vue 配套的 UI 框架,看来学习的路还很长。
共勉!
vue前后端交互(代码片段)
异步调用异步效果:事件函数Ajax定时任务多次异步调用依赖多次调用异步,结果顺序不确定,如果需要固定顺序,必须使用嵌套Promise概述Promise是异步编程的一种解决方案,从语法上讲Promise是一个对象,从它可以获取到异步操作的消息;... 查看详情
vue-resource的使用,前后端数据交互(代码片段)
vue-resource的使用,前后端数据交互1:导入vue与vue-resource的js js下载: https://pan.baidu.com/s/1fs5QaNwcl2AMEyp_kUgFyQ 注意如果是springBoot项目需要在配置文件中排除静态文件的拦截: post方法:newVue(el:"#app", 查看详情
前后端交互(小白教学)(代码片段)
在我们的印象中什么是前后端交互呢?我们一个后端程序员为什么要去学习前端知识?前后端交互到底是靠什么而进行关联的呢?接下来我们带着这三个问题来阅读这边文章!!!1.前后端交互所谓前后端交互,即前后端交互为前端和后端... 查看详情
vue体验(前后端交互)(代码片段)
记录:263体验XMLHttpRequest、jquery、Promise、fetch、axios的异步方式调用后端接口。本例环境:后端:node.js、express。前端:Vue.js、HTML、CSS、jQuery、axios。方式:分别使用XMLHttpRequest、jquery、Promise、fetch、axios 查看详情
初识springboot,创建一个最简单的示例(代码片段)
开始...1、首先创建一个maven工程,引入springboot依赖<dependencies><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-web</artifactId></depende 查看详情
前后端分离之使用axios进行前后端交互实现评论显示——django+mysql+vue+element(代码片段)
Axios进行前后端交互一.修改vue存在的文件路径二.解决跨域问题三.渲染数据到前端四.完整代码jshtml教学视频:5.axios请求后台——评论功能6.解决跨域问题cors——评论功能7.前端界面显示——评论功能前言:作者:神的... 查看详情
vue之前后端交互(代码片段)
Vue之前后端交互一、前后端交互模式接口调用方式原生ajax基于jQuery的ajaxfetchaxios异步JavaScript的执行环境是「单线程」所谓单线程,是指JS引擎中负责解释和执行JavaScript代码的线程只有一个,也就是一次只能完成一项任务,这个... 查看详情
前后端交互流程(代码片段)
1.前后端交互:前后端交互,也可以理解为数据交互。前端需要获取(GET)的数据获取上传(POST)的数据,要通过请求来完成的,前端发送请求,后端接收到请求后,便进行对数据库的操作,... 查看详情
使用form表单的name属性简单实现前后端交互(代码片段)
实现效果:点击提交后:前端页面源码:<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>Ajax前后端交互_通过name属性进行</title></head& 查看详情
使用ajax简单实现前后端交互(代码片段)
实现效果:点击提交后:前端页面源码:<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>Ajax前后端交互_通过Ajax进行</title></head> 查看详情
axios前后端交互工具学习(代码片段)
文章目录Axios前后端交互工具学习引言引入Axios介绍GET请求的方式then方法catch方法POST请求的方式PUT请求的方式Axios的基本配置Axios的拦截器Vue怎么和Axios配合呢?Axios前后端交互工具学习引言 Axios是一个异步请求技术,... 查看详情
axios前后端交互工具学习(代码片段)
文章目录Axios前后端交互工具学习引言引入Axios介绍GET请求的方式then方法catch方法POST请求的方式PUT请求的方式Axios的基本配置Axios的拦截器Vue怎么和Axios配合呢?Axios前后端交互工具学习引言 Axios是一个异步请求技术,... 查看详情
vue前后端交互(代码片段)
异步调用异步效果:事件函数Ajax定时任务多次异步调用依赖多次调用异步,结果顺序不确定,如果需要固定顺序,必须使用嵌套Promise概述Promise是异步编程的一种解决方案,从语法上讲Promise是一个对象,从它可以获取到异步操作的消息;... 查看详情
springboot+vue前后端分离项目的搭建及简单开发(这次保证看明白~)(代码片段)
...启动Vue项目3.编写Vue代码4.接收后端数据三、ElementUI使用1.简单的数据展示2.Element-ui更多...参看:https://www.bilibili.com/vide 查看详情
vue前后台交互,插件(代码片段)
目录Vuex插件前端存储数据汇总前后台交互方式(重点)axios插件同源策略-跨域问题前后台分离项目交互流程异步请求细节Element-ui插件jQ+Bs插件Django国际化配置总结Vuex插件Vuex插件可以完成任意组件间信息交互(移动端)了解vuex... 查看详情
网页前后端交互示例
...此方法经过本人验证有效,并附有代码。首先要实现网页前后台程序的交互需要安装后台框架,本人安装的框架为wamp(windows+apache+mysql+php)。安装程序可以通过我在百度网盘上的分享链接下 查看详情
网页前后端交互示例
...此方法经过本人验证有效,并附有代码。首先要实现网页前后台程序的交互需要安装后台框架,本人安装的框架为wamp(windows+apache+mysql+php)。安装程序可以通过我在百度网盘上的分享链接下载http: 查看详情
vue简单快速入门(代码片段)
Vue框架一、Vue.js概述1.简介Vue是一个渐进式(真正用到才引用)的JavaScript框架与其它大型框架不同的是,Vue被设计为可以自底向上逐层应用。Vue的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另一... 查看详情