vue最简单的前后端交互示例详解


Posted in Javascript onOctober 11, 2018

一、学习 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/axios@0.12.0/dist/axios.min.js"></script>
 <script src="https://cdn.jsdelivr.net/npm/lodash@4.13.1/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 浏览器打开这个文件。下面是运行效果:

vue最简单的前后端交互示例详解

这里访问的后端是 https://yesno.wtf/api ,它传回的数据时 json 格式的,如果直接访问它,得到的结果如下:

vue最简单的前后端交互示例详解

https://yesno.wtf 这是一个神奇的网站,当你对某件事拿不定注意,需要别人推你一把时,可以访问它,它会随机返回一个 gif 动画,点头表示 yes,摇头表示 no,帮你做这个艰难的决定。直接访问 https://yesno.wtf ,注意在地址栏中不带 api 字样,可以得到这样的结果:

vue最简单的前后端交互示例详解 

三、从这个示例,我学到了什么

首先,解答了我前面的疑惑,那就是怎么和后端交互。在这个示例中,它使用 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/axios@0.12.0/dist/axios.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/lodash@4.13.1/lodash.min.js"></script>

引入需要的 vue.js、 axios.js 和 lodash.js,不需要下载安装一些有的没的东西,不需要学习在服务器端运行 JavaScript 的任何知识。本来嘛,我是准备学 .netcore 的,再让我学个 nodejs 我也觉得不科学嘛。

最后,我知道了学习 vue 不是单纯学习 vue,还要学习 axios.js 和服务器交互,真的要写个产品,还少不了漂亮的 UI 界面啥的,所以还要学习和 vue 配套的 UI 框架,看来学习的路还很长。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
利用jQuery的deferred对象实现异步按顺序加载JS文件
Mar 17 Javascript
JavaScript高级程序设计(第三版)学习笔记1~5章
Mar 11 Javascript
Bootstrap页面布局基础知识全面解析
Jun 13 Javascript
JavaScript数据存储 Cookie篇
Jul 02 Javascript
微信小程序 Audio API详解及实例代码
Sep 30 Javascript
搭建Bootstrap离线文档的方法
Dec 02 Javascript
JS基于设计模式中的单例模式(Singleton)实现封装对数据增删改查功能
Feb 06 Javascript
vue实现form表单与table表格的数据关联功能示例
Jan 29 Javascript
ES6基础之解构赋值(destructuring assignment)
Feb 21 Javascript
jQuery操作attr、prop、val()/text()/html()、class属性
May 23 jQuery
使用JQuery自动完成插件Auto Complete详解
Jun 18 jQuery
vue使用element-ui实现表单验证
Dec 13 Vue.js
JavaScript中七种流行的开源机器学习框架
Oct 11 #Javascript
用Object.prototype.toString.call(obj)检测对象类型原因分析
Oct 11 #Javascript
使用vue 国际化i18n 实现多实现语言切换功能
Oct 11 #Javascript
详解Angular5/Angular6项目如何添加热更新(HMR)功能
Oct 10 #Javascript
Node.js npm命令运行node.js脚本的方法
Oct 10 #Javascript
vue环形进度条组件实例应用
Oct 10 #Javascript
Node.js中读取TXT文件内容fs.readFile()用法
Oct 10 #Javascript
You might like
PHP修改session_id示例代码
2014/01/08 PHP
laravel5实现微信第三方登录功能
2018/12/06 PHP
Yii框架多语言站点配置方法分析【中文/英文切换站点】
2020/04/07 PHP
JavaScript几种形式的树结构菜单
2010/05/10 Javascript
点击表单提交时出现jQuery没有权限的解决方法
2014/07/23 Javascript
Jquery修改页面标题title其它JS失效的解决方法
2014/10/31 Javascript
JS实现CheckBox复选框全选、不选或全不选功能
2020/07/28 Javascript
JS正则匹配URL网址的方法(可匹配www,http开头的一切网址)
2017/01/06 Javascript
js实现弹窗暗层效果
2017/01/16 Javascript
Bootstrap3多级下拉菜单
2017/02/24 Javascript
jquery插件canvaspercent.js实现百分比圆饼效果
2017/07/18 jQuery
深入理解node.js http模块
2018/01/24 Javascript
fullpage.js最后一屏滚动方式
2018/02/06 Javascript
vue-cli安装使用流程步骤详解
2018/11/08 Javascript
ES6中字符串的使用方法扩展
2019/06/04 Javascript
js 闭包深入理解与实例分析
2020/03/19 Javascript
[08:17]Ti9 现场cosplay
2019/09/10 DOTA
Python yield 小结和实例
2014/04/25 Python
Python中实现的RC4算法
2015/02/14 Python
Python三级菜单的实例
2017/09/13 Python
基于Python的文件类型和字符串详解
2017/12/21 Python
python基于物品协同过滤算法实现代码
2018/05/31 Python
python中的字符串内部换行方法
2018/07/19 Python
python机器学习之神经网络实现
2018/10/13 Python
python scipy求解非线性方程的方法(fsolve/root)
2018/11/12 Python
详解python 利用echarts画地图(热力图)(世界地图,省市地图,区县地图)
2019/08/06 Python
python 使用opencv 把视频分割成图片示例
2019/12/12 Python
英国电视和家用电器购物网站:rlrdistribution.co.uk
2018/11/20 全球购物
英国性能汽车零件和发动机配件在线:Maxpeedingrods
2019/11/05 全球购物
如何提高SQL Server的安全性
2016/07/25 面试题
道德模范先进事迹
2014/02/14 职场文书
中专毕业生个人职业生涯规划
2014/02/19 职场文书
2014年科室工作总结范文
2014/12/19 职场文书
大学生个人总结范文
2015/02/15 职场文书
阳光体育运动标语口号
2015/12/26 职场文书
一封真诚的自荐信帮你赢得机会
2019/05/07 职场文书