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 相关文章推荐
JS下载文件|无刷新下载文件示例代码
Apr 17 Javascript
node.js中的fs.rmdirSync方法使用说明
Dec 16 Javascript
JavaScript通过使用onerror设置默认图像显示代替alt
Mar 01 Javascript
浅谈javascript基础之客户端事件驱动
Jun 10 Javascript
javascript封装addLoadEvent实现页面同时加载执行多个函数的方法
Jul 25 Javascript
使用jquery/js获取iframe父子级、同级获取元素的方法
Aug 05 Javascript
Bootstrap如何激活导航状态
Mar 22 Javascript
使用jQuery如何写一个含验证码的登录界面
May 13 jQuery
layui 图片上传+表单提交+ Spring MVC的实例
Sep 21 Javascript
vue+elementUI动态生成面包屑导航教程
Nov 04 Javascript
小程序识别身份证,银行卡,营业执照,驾照的实现
Nov 05 Javascript
js 数组 fill() 填充方法
Nov 02 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
PHP5中MVC结构学习
2006/10/09 PHP
PHP SPL标准库之数据结构堆(SplHeap)简单使用实例
2015/05/12 PHP
php用户名的密码加密更安全的方法
2019/06/21 PHP
在laravel5.2中实现点击用户头像更改头像的方法
2019/10/14 PHP
js导航菜单(自写)简单大方
2013/03/28 Javascript
jquery导航制件jquery鼠标经过变色效果示例
2013/12/05 Javascript
关于javaScript注册click事件传递参数的不成功问题
2014/07/18 Javascript
jQuery中animate用法实例分析
2015/03/09 Javascript
jQuery实现Email邮箱地址自动补全功能代码
2015/11/03 Javascript
JavaScript类型检测之typeof 和 instanceof 的缺陷与优化
2016/01/13 Javascript
jquery UI Datepicker时间控件的使用及问题解决
2016/04/28 Javascript
微信小程序 自定义对话框实例详解
2017/01/20 Javascript
使用JavaScript中的lodash编写双色球效果
2018/06/24 Javascript
vue.js使用watch监听路由变化的方法
2018/07/08 Javascript
深入理解Vue router的部分高级用法
2018/08/15 Javascript
VUE前后端学习tab写法实例
2019/08/06 Javascript
layer弹出层取消遮罩的方法
2019/09/25 Javascript
mpvue微信小程序的接口请求fly全局拦截代码实例
2019/11/13 Javascript
[01:01:41]DOTA2-DPC中国联赛 正赛 PSG.LGD vs Magma BO3 第二场 1月31日
2021/03/11 DOTA
Python实现简单登录验证
2016/04/13 Python
python实现守护进程、守护线程、守护非守护并行
2018/05/05 Python
python仿抖音表白神器
2019/04/08 Python
Python GUI学习之登录系统界面篇
2019/08/21 Python
numpy ndarray 取出满足特定条件的某些行实例
2019/12/05 Python
Pycharm调试程序技巧小结
2020/08/08 Python
纯css3实现走马灯效果
2014/12/26 HTML / CSS
Html5 audio标签样式的修改
2016/01/28 HTML / CSS
米兰网婚纱礼服法国网上商店:Milanoo法国
2016/08/20 全球购物
我能否用void** 指针作为参数, 使函数按引用接受一般指针
2013/02/16 面试题
大学生简历中个人的自我评价
2013/10/06 职场文书
求职信模板
2014/05/23 职场文书
建设工地安全标语
2014/06/07 职场文书
工作疏忽、懈怠的检讨书
2014/09/11 职场文书
2015年医务人员医德医风自我评价
2015/03/03 职场文书
2015政治思想表现评语
2015/03/25 职场文书
2016年度员工工作表现评语
2015/12/02 职场文书