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 相关文章推荐
IE与Firefox下javascript getyear年份的兼容性写法
Dec 20 Javascript
js 字符串转化成数字的代码
Jun 29 Javascript
Javascript模块化编程(一)AMD规范(规范使用模块)
Jan 17 Javascript
JS动态调用方法名示例介绍
Dec 18 Javascript
php结合imgareaselect实现图片裁剪
Jul 05 Javascript
CSS3实现动态背景登录框的代码
Jul 28 Javascript
javascript中Date format(js日期格式化)方法小结
Dec 17 Javascript
图片旋转、鼠标滚轮缩放、镜像、切换图片js代码
Dec 13 Javascript
ASP.NET jquery ajax传递参数的实例
Nov 02 Javascript
jquery 一键复制到剪切板的实例
Sep 20 jQuery
JS实现数组的增删改查操作示例
Aug 29 Javascript
JavaScript实现栈结构详细过程
Dec 06 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的array_diff()函数在处理大数组时的效率问题
2011/11/27 PHP
php写的AES加密解密类分享
2014/06/20 PHP
ThinkPHP实现跨模块调用操作方法概述
2014/06/20 PHP
浅析iis7.5安装配置php环境
2015/05/10 PHP
event.srcElement+表格应用
2006/08/29 Javascript
jQuery 实现侧边浮动导航菜单效果
2014/12/26 Javascript
实例解析JS布尔对象的toString()方法和valueOf()方法
2015/10/25 Javascript
你一定会收藏的Nodejs代码片段
2016/02/04 NodeJs
js将滚动条滚动到指定位置的简单实现方法
2016/06/25 Javascript
AngularJS入门教程之ng-checked 指令详解
2016/08/01 Javascript
JS当前页面登录注册框,固定DIV,底层阴影的实例代码
2016/09/29 Javascript
AngularJs中Bootstrap3 datetimepicker使用实例
2016/12/13 Javascript
JS实现简单表格排序操作示例
2017/10/07 Javascript
Bootstrap 树控件使用经验分享(图文解说)
2017/11/06 Javascript
vue双向数据绑定知识点总结
2018/04/18 Javascript
vue实现直播间点赞飘心效果的示例代码
2019/09/20 Javascript
easy_install python包安装管理工具介绍
2013/02/10 Python
利用python程序生成word和PDF文档的方法
2017/02/14 Python
Django数据库操作的实例(增删改查)
2017/09/04 Python
Python输出带颜色的字符串实例
2017/10/10 Python
PyCharm+PySpark远程调试的环境配置的方法
2018/11/29 Python
Python字符串和正则表达式中的反斜杠('\')问题详解
2019/09/03 Python
Python实现把类当做字典来访问
2019/12/16 Python
Python列表倒序输出及其效率详解
2020/03/04 Python
python 实现朴素贝叶斯算法的示例
2020/09/30 Python
维多利亚的秘密官方网站:Victoria’s Secret
2018/10/24 全球购物
长曲棍球装备:Lacrosse Monkey
2020/12/02 全球购物
个性大学生自我评价
2013/12/04 职场文书
出纳员岗位职责
2014/03/13 职场文书
党员创先争优公开承诺书
2014/03/28 职场文书
《有趣的发现》教学反思
2014/04/15 职场文书
2015年语文教学工作总结
2015/05/25 职场文书
公司员工培训管理制度
2015/08/04 职场文书
小学班主任工作随笔
2015/08/15 职场文书
七个Python必备的GUI库
2021/04/27 Python
MySQL非空约束(not null)案例讲解
2021/08/23 MySQL