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 相关文章推荐
javascript GUID生成器实现代码
Oct 31 Javascript
使用jquery的ajax需要注意的地方dataType的设置
Aug 12 Javascript
jQuery右侧选项卡焦点图片轮播特效代码分享
Sep 05 Javascript
基于Flowplayer打造一款免费的WEB视频播放器附源码
Sep 06 Javascript
JS实现超简单的汉字转拼音功能示例
Dec 22 Javascript
react.js CMS 删除功能的实现方法
Apr 17 Javascript
微信小程序网络请求wx.request详解及实例
May 18 Javascript
浅谈Vue父子组件和非父子组件传值问题
Aug 22 Javascript
Vue.js实现图片的随意拖动方法
Mar 08 Javascript
JS 自执行函数原理及用法
Aug 05 Javascript
vue实现学生信息管理系统
May 30 Javascript
vue编写简单的购物车功能
Jan 08 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实例
2013/12/24 PHP
php apache开启跨域模式过程详解
2019/07/08 PHP
PHP实现图片防盗链破解操作示例【解决图片防盗链问题/反向代理】
2020/05/29 PHP
jQuery动态添加的元素绑定事件处理函数代码
2011/08/02 Javascript
JavaScript对象和字串之间的转换实例探讨
2013/04/21 Javascript
js实现可兼容IE、FF、Chrome、Opera及Safari的音乐播放器
2015/02/11 Javascript
JavaScript实现自动变换表格边框颜色
2015/05/08 Javascript
Javascript中的getUTCHours()方法使用详解
2015/06/10 Javascript
直接拿来用的页面跳转进度条JS实现
2016/01/06 Javascript
JS区分浏览器页面是刷新还是关闭
2016/04/17 Javascript
简单易懂的天气插件(代码分享)
2017/02/04 Javascript
浅谈FastClick 填坑及源码解析
2018/03/02 Javascript
JS中call和apply函数用法实例分析
2018/06/20 Javascript
JS拖拽排序插件Sortable.js用法实例分析
2019/02/20 Javascript
js实现多个倒计时并行 js拼团倒计时
2019/02/25 Javascript
vue+ts下对axios的封装实现
2020/02/18 Javascript
详解Node.js使用token进行认证的简单示例
2020/05/25 Javascript
自己编程中遇到的Python错误和解决方法汇总整理
2015/06/03 Python
matplotlib绘制符合论文要求的图片实例(必看篇)
2017/06/02 Python
python如何通过实例方法名字调用方法
2018/03/21 Python
Python 运行 shell 获取输出结果的实例
2019/01/07 Python
Python函数默认参数常见问题及解决方案
2020/03/26 Python
使用PyQt5实现图片查看器的示例代码
2020/04/21 Python
python不同系统中打开方法
2020/06/23 Python
详细分析Python垃圾回收机制
2020/07/01 Python
教你如何一步一步用Canvas写一个贪吃蛇
2018/10/22 HTML / CSS
标签和贴纸印刷:Lightning Labels
2018/03/22 全球购物
蔻驰意大利官网:COACH意大利
2019/01/16 全球购物
德国自行车商店:Tretwerk
2019/06/21 全球购物
模具专业推荐信
2013/10/30 职场文书
情人节寄语大全
2014/04/11 职场文书
向国旗敬礼活动小结
2014/09/27 职场文书
化验室岗位职责
2015/02/14 职场文书
共青团员自我评价
2015/03/10 职场文书
详解JavaScript中Arguments对象用途
2021/08/30 Javascript
分享python函数常见关键字
2022/04/26 Python