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 相关文章推荐
向当前style sheet中插入一个新的style实现方法
Apr 01 Javascript
Ext中下拉列表ComboBox组件store数据格式用法介绍
Jul 15 Javascript
js验证电话号码与手机支持+86的正则表达式
Jan 23 Javascript
使用node.js 制作网站前台后台
Nov 13 Javascript
使用Web Uploader实现多文件上传
Jun 08 Javascript
纯js和css完成贪吃蛇小游戏demo
Sep 01 Javascript
js运动事件函数详解
Oct 21 Javascript
JS用斜率判断鼠标进入DIV四个方向的方法
Nov 07 Javascript
小发现之浅谈location.search与location.hash的问题
Jun 23 Javascript
react开发教程之React 组件之间的通信方式
Aug 12 Javascript
vue实现简单的星级评分组件源码
Nov 16 Javascript
bootstrapValidator表单校验、更改状态、新增、移除校验字段的实例代码
May 19 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
Sample script that deletes a SQL Server database
2007/06/16 Javascript
javascript下过滤数组重复值的代码
2007/09/10 Javascript
利用JS重写Cognos右键菜单的实现代码
2010/04/11 Javascript
jquery一句话全选/取消全选
2011/03/01 Javascript
获取body标签的两种方法
2011/10/13 Javascript
jquery获取一组checkbox的值(实例代码)
2013/11/04 Javascript
jQuery操作元素css样式的三种方法
2014/06/04 Javascript
js实现按钮控制图片360度翻转特效的方法
2015/02/17 Javascript
js仿土豆网带缩略图的焦点图片切换效果实现方法
2015/02/23 Javascript
基于JavaScript实现类似于百度学术高级检索功能
2016/03/02 Javascript
js只执行1次的函数示例
2016/07/20 Javascript
js实现简单的碰壁反弹效果
2016/08/30 Javascript
AngularJS+Bootstrap3多级导航菜单的实现代码
2017/08/16 Javascript
jquery实现动态添加附件功能
2018/10/23 jQuery
js实现小星星游戏
2020/03/23 Javascript
vuex实现购物车功能
2020/06/28 Javascript
jQuery实现可以计算进制转换的计算器
2020/10/19 jQuery
[01:16:01]VGJ.S vs Mski Supermajor小组赛C组 BO3 第一场 6.3
2018/06/04 DOTA
python中的对象拷贝示例 python引用传递
2014/01/23 Python
Python自定义scrapy中间模块避免重复采集的方法
2015/04/07 Python
pycharm debug功能实现跳到循环末尾的方法
2018/11/29 Python
Python3.5常见内置方法参数用法实例详解
2019/04/29 Python
自定义django admin model表单提交的例子
2019/08/23 Python
Python3将数据保存为txt文件的方法
2019/09/12 Python
Pytorch在NLP中的简单应用详解
2020/01/08 Python
Python处理PDF与CDF实例
2020/02/26 Python
美国领先的家居装饰和礼品商店:Kirkland’s
2017/01/30 全球购物
世界领先的在线地板和建筑材料批发商:BuildDirect
2017/02/26 全球购物
大学生自荐书范文
2013/12/10 职场文书
《海伦?凯勒》教学反思
2014/04/17 职场文书
大学新闻系求职信
2014/06/03 职场文书
小学生感恩老师演讲稿
2014/08/28 职场文书
2015初一年级组工作总结
2015/07/24 职场文书
Python初学者必备的文件读写指南
2021/06/23 Python
Golang日志包的使用
2022/04/20 Golang
Android RecyclerView实现九宫格效果
2022/06/28 Java/Android