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添加options点击事件并传值实例代码
May 18 Javascript
使用jquery.qrcode.js生成二维码插件
Oct 17 Javascript
学习vue.js表单控件绑定操作
Dec 05 Javascript
详解Javascript数据类型的转换规则
Dec 12 Javascript
jQuery中map函数的两种方式
Apr 07 jQuery
详解如何在 vue 项目里正确地引用 jquery 和 jquery-ui的插件
Jun 01 jQuery
vue基于Element构建自定义树的示例代码
Sep 19 Javascript
javascript将非数值转换为数值
Sep 13 Javascript
ES6 对象的新功能与解构赋值介绍
Feb 05 Javascript
Vue运用transition实现过渡动画
May 06 Javascript
JS数组方法reduce的用法实例分析
Mar 03 Javascript
在Vue中使用Select选择器拼接label的操作
Oct 22 Javascript
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中的魔术方法总结和使用实例
2015/05/11 PHP
如何在HTML 中嵌入 PHP 代码
2015/05/13 PHP
PHP+JS实现的实时搜索提示功能
2018/03/13 PHP
PHP实现 APP端微信支付功能
2018/06/22 PHP
php设计模式之装饰模式应用案例详解
2019/06/17 PHP
自动检查并替换文本框内的字符
2006/06/30 Javascript
javascript据option的value值快速设定初始的selected选项
2007/08/13 Javascript
Javascript 日期处理之时区问题
2009/10/08 Javascript
jQuery实现form表单reset按钮重置清空表单功能
2012/12/18 Javascript
JS实现的左侧竖向滑动菜单效果代码
2015/10/19 Javascript
基于javascript制作微博发布栏效果
2016/04/04 Javascript
利用Js的console对象,在控制台打印调式信息测试Js的实现
2016/11/26 Javascript
BootStrap Table对前台页面表格的支持实例讲解
2016/12/22 Javascript
JavaScript数据结构中栈的应用之表达式求值问题详解
2017/04/11 Javascript
详解Vue2.0配置mint-ui踩过的那些坑
2018/04/23 Javascript
jQuery实现炫丽的3d旋转星空效果
2018/07/04 jQuery
详解easyui基于 layui.laydate日期扩展组件
2018/07/18 Javascript
在vue项目中正确使用iconfont的方法
2018/09/28 Javascript
JavaScript中的事件与异常捕获详析
2019/02/24 Javascript
vue tab滚动到一定高度,固定在顶部,点击tab切换不同的内容操作
2020/07/22 Javascript
[01:07:47]Secret vs Optic Supermajor 胜者组 BO3 第一场 6.4
2018/06/05 DOTA
Python类的动态修改的实例方法
2017/03/24 Python
python调用Delphi写的Dll代码示例
2017/12/05 Python
Python提取特定时间段内数据的方法实例
2019/04/01 Python
Python 字符串类型列表转换成真正列表类型过程解析
2019/08/26 Python
python实现三壶谜题的示例详解
2020/11/02 Python
python基于opencv 实现图像时钟
2021/01/04 Python
欧洲最大的化妆品连锁公司:Douglas道格拉斯
2017/05/06 全球购物
StubHub澳大利亚:购买或出售您的门票
2019/08/01 全球购物
机械工程师的岗位职责
2013/11/17 职场文书
应届实习生的自我评价范文
2014/01/05 职场文书
应届本科毕业生求职信
2014/07/23 职场文书
销售人才自我评价范文
2014/09/27 职场文书
房屋租赁协议书
2014/10/18 职场文书
2014年除四害工作总结
2014/12/06 职场文书
寻找成龙观后感
2015/06/12 职场文书