内容简介:分享一下我老师大神的人工智能教程!零基础,通俗易懂!给我老师的人工智能教程打call!
分享一下我老师大神的人工智能教程!零基础,通俗易懂! http://blog.csdn.net/jiangjunshow
也欢迎大家转载本篇文章。分享知识,造福人民,实现我们中华民族伟大复兴!
Vue2+VueRouter2+Webpack+Axios 构建项目实战2017重制版(五)配置 Axios api 接口调用文件
前情回顾
在上一篇《 Vue2+VueRouter2+Webpack+Axios 构建项目实战2017重制版(四)调整 App.vue 和 router 路由 》,我们通过配置基本的信息,已经让我们的项目能够正常的跑起来了。但是,这里还没有涉及到 AJAX
请求接口的内容。
vue
本身是不支持 ajax
接口请求的,所以我们需要安装一个接口请求的 npm
包,来使我们的项目拥有这个功能。
这其实是一个重要的 unix
思想,就是一个 工具 只做好一件事情,你需要额外的功能的时候,则需要安装对应的软件来执行。如果你以前是一个 jquery
重度用户,那么可能理解这个思想一定要深入的理解。
支持 ajax
的工具有很多。一开始,我使用的是 superagent
这个工具。但是我发现近一年来,绝大多数的教程都是使用的 axios
这个接口请求工具。其实,这本来是没有什么差别的。但是为了防止你们在看了我的博文和其他的文章之后,产生理念上的冲突。因此,我也就改用 axios
这个工具了。
本身, axios
这个工具已经做了很好的优化和封装。但是,在使用的时候,还是略显繁琐,因此,我重新封装了一下。当然,更重要的是,封装 axios
这个工具是为了和我以前写的代码的兼容。不过我封装得很好,也推荐大家使用。
封装 axios 工具,编辑 src/api/index.js 文件
首先,我们要使用 axios
工具,就必须先安装 axios
工具。执行下面的命令进行安装
npm install axios -D
由于宿舍翻墙条件不好,这里使用 cnpm
替代
这样,我们就安装好了 axios
工具了。
还记得我们在第三篇博文中整理的系统结构吗?我们新建了一个 src/api/index.js
这个空文本文件,就那么放在那里了。这里,我们给它填写上内容。
// 配置API接口地址var root = 'https://cnodejs.org/api/v1'// 引用axiosvar axios = require('axios')// 自定义判断元素类型JSfunction toType (obj) { return ({}).toString.call(obj).match(/\s([a-zA-Z]+)/)[1].toLowerCase()}// 参数过滤函数function filterNull (o) { for (var key in o) { if (o[key] === null) { delete o[key] } if (toType(o[key]) === 'string') { o[key] = o[key].trim() } else if (toType(o[key]) === 'object') { o[key] = filterNull(o[key]) } else if (toType(o[key]) === 'array') { o[key] = filterNull(o[key]) } } return o}/* 接口处理函数 这个函数每个项目都是不一样的,我现在调整的是适用于 https://cnodejs.org/api/v1 的接口,如果是其他接口 需要根据接口的参数进行调整。参考说明文档地址: https://cnodejs.org/topic/5378720ed6e2d16149fa16bd 主要是,不同的接口的成功标识和失败提示是不一致的。 另外,不同的项目的处理方法也是不一致的,这里出错就是简单的alert*/function apiAxios (method, url, params, success, failure) { if (params) { params = filterNull(params) } axios({ method: method, url: url, data: method === 'POST' || method === 'PUT' ? params : null, params: method === 'GET' || method === 'DELETE' ? params : null, baseURL: root, withCredentials: false }) .then(function (res) { if (res.data.success === true) { if (success) { success(res.data) } } else { if (failure) { failure(res.data) } else { window.alert('error: ' + JSON.stringify(res.data)) } } }) .catch(function (err) { let res = err.response if (err) { window.alert('api error, HTTP CODE: ' + res.status) } })}// 返回在vue模板中的调用接口export default { get: function (url, params, success, failure) { return apiAxios('GET', url, params, success, failure) }, post: function (url, params, success, failure) { return apiAxios('POST', url, params, success, failure) }, put: function (url, params, success, failure) { return apiAxios('PUT', url, params, success, failure) }, delete: function (url, params, success, failure) { return apiAxios('DELETE', url, params, success, failure) }}
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 73
- 74
- 75
- 76
- 77
- 78
- 79
- 80
- 81
- 82
好,我们写好这个文件之后,保存。
2017年10月20日补充,删除了评论中有人反映会出错的 return
,确实这个 return
是没有什么作用的。不过我这边确实没出错。没关系啦,本来就没啥用,只是一个以前的不好的习惯代码。
有关 axios
的更多内容,请参考官方 github
: https://github.com/mzabriskie/axios ,中文资料自行百度。
但就是这样,我们还不能再 vue
模板文件中使用这个工具,还需要调整一下 main.js
文件。
调整 main.js 绑定 api/index.js 文件
这次呢,我们没有上来就调整 main.js
文件,因为原始文件就配置得比较好,我就没有刻意的想要调整它。
原始文件如下:
import Vue from 'vue'import App from './App'import router from './router'Vue.config.productionTip = false/* eslint-disable no-new */new Vue({ el: '#app', router, template: '<App/>', components: { App }})
- 10
- 11
- 12
- 13
我们插入以下代码:
// 引用API文件import api from './api/index.js'// 将API方法绑定到全局Vue.prototype.$api = api
也就是讲代码调整为:
import Vue from 'vue'import App from './App'import router from './router'// 引用API文件import api from './api/index.js'// 将API方法绑定到全局Vue.prototype.$api = apiVue.config.productionTip = false/* eslint-disable no-new */new Vue({ el: '#app', router, template: '<App/>', components: { App }})
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
好了,这样,我们就可以在项目中使用我们封装的 api
接口调用文件了。
测试一下看看能不能调通
我们来修改一下 src/page/index.vue
文件,将代码调整为以下代码:
<template> <div>index page</div></template><script>export default { created () { this.$api.get('topics', null, r => { console.log(r) }) }}</script>
- 10
- 11
- 12
好,这里是调用 cnodejs.org
的 topics
列表接口,并且将结果打印出来。
我们在浏览器中打开控制台,看看 console
下面有没有输出入下图一样的内容。如果有的话,就说明我们的接口配置已经成功了。
好,如果你操作正确,代码没有格式错误的话,那么现在应该得到的结果是和我一样的。如果出错或者怎么样,请仔细的检查代码,看看有没有什么问题。
如果文章由于我学识浅薄,导致您发现有严重谬误的地方,请一定在评论中指出,我会在第一时间修正我的博文,以避免误人子弟。
本文由 FungLeo 原创,允许转载,但转载必须保留首发链接。
给我老师的人工智能教程打call! http://blog.csdn.net/jiangjunshow
你好! 这是你第一次使用 **Markdown编辑器** 所展示的欢迎页。如果你想学习如何使用Markdown编辑器, 可以仔细阅读这篇文章,了解一下Markdown的基本语法知识。
新的改变
我们对Markdown编辑器进行了一些功能拓展与语法支持,除了标准的Markdown编辑器功能,我们增加了如下几点新功能,帮助你用它写博客:
- 全新的界面设计 ,将会带来全新的写作体验;
- 在创作中心设置你喜爱的代码高亮样式,Markdown 将代码片显示选择的高亮样式 进行展示;
- 增加了 图片拖拽 功能,你可以将本地的图片直接拖拽到编辑区域直接展示;
- 全新的 KaTeX数学公式 语法;
- 增加了支持 甘特图的mermaid语法 功能;
- 增加了 多屏幕编辑 Markdown文章功能;
- 增加了 焦点写作模式、预览模式、简洁写作模式、左右区域同步滚轮设置 等功能,功能按钮位于编辑区域与预览区域中间;
- 增加了 检查列表 功能。
功能快捷键
撤销: Ctrl/Command + Z
重做: Ctrl/Command + Y
加粗: Ctrl/Command + B
斜体: Ctrl/Command + I
标题: Ctrl/Command + Shift + H
无序列表: Ctrl/Command + Shift + U
有序列表: Ctrl/Command + Shift + O
检查列表: Ctrl/Command + Shift + C
插入代码: Ctrl/Command + Shift + K
插入链接: Ctrl/Command + Shift + L
插入图片: Ctrl/Command + Shift + G
合理的创建标题,有助于目录的生成
直接输入1次 # ,并按下 space 后,将生成1级标题。
输入2次 # ,并按下 space 后,将生成2级标题。
以此类推,我们支持6级标题。有助于使用 TOC
语法后生成一个完美的目录。
如何改变文本的样式
强调文本 强调文本
加粗文本 加粗文本
标记文本
删除文本
引用文本
H 2 O is是液体。
2 10 运算结果是 1024.
插入链接与图片
链接:link.
图片:
带尺寸的图片:
当然,我们为了让用户更加便捷,我们增加了图片拖拽功能。
如何插入一段漂亮的代码片
去博客设置页面,选择一款你喜欢的代码片高亮样式,下面展示同样高亮的 代码片
.
// An highlighted block var foo = 'bar';
生成一个适合你的列表
- 项目
- 项目
- 项目
- 项目
- 项目1
- 项目2
- 项目3
- 计划任务
- 完成任务
创建一个表格
一个简单的表格是这么创建的:
项目 | Value |
---|---|
电脑 | $1600 |
手机 | $12 |
导管 | $1 |
设定内容居中、居左、居右
使用 :---------:
居中
使用 :----------
居左
使用 ----------:
居右
第一列 | 第二列 | 第三列 |
---|---|---|
第一列文本居中 | 第二列文本居右 | 第三列文本居左 |
SmartyPants
SmartyPants将ASCII标点字符转换为“智能”印刷标点HTML实体。例如:
TYPE | ASCII | HTML |
---|---|---|
Single backticks | 'Isn't this fun?' |
‘Isn’t this fun?’ |
Quotes | "Isn't this fun?" |
“Isn’t this fun?” |
Dashes | -- is en-dash, --- is em-dash |
– is en-dash, — is em-dash |
创建一个自定义列表
- Markdown
- Text-to- HTML conversion tool
- Authors
- John
- Luke
如何创建一个注脚
一个具有注脚的文本。
注释也是必不可少的
Markdown将文本转换为 HTML 。
KaTeX数学公式
您可以使用渲染LaTeX数学表达式 KaTeX :
Gamma公式展示 是通过欧拉积分
你可以找到更多关于的信息 LaTeX 数学表达式 here .
新的甘特图功能,丰富你的文章
gantt dateFormat YYYY-MM-DD title Adding GANTT diagram functionality to mermaid section 现有任务 已完成 :done, des1, 2014-01-06,2014-01-08 进行中 :active, des2, 2014-01-09, 3d 计划一 : des3, after des2, 5d 计划二 : des4, after des3, 5d
- 关于 甘特图 语法,参考 这儿 ,
UML 图表
可以使用UML图表进行渲染。 Mermaid . 例如下面产生的一个序列图::
这将产生一个流程图。:
- 关于 Mermaid 语法,参考 这儿 ,
FLowchart流程图
我们依旧会支持flowchart的流程图:
- 关于 Flowchart流程图 语法,参考 这儿 .
导出与导入
如果你想尝试使用此编辑器, 你可以在此篇文章任意编辑。当你完成了一篇文章的写作, 在上方工具栏找到 文章导出 ,生成一个.md文件或者.html文件进行本地保存。
如果你想加载一篇你写过的.md文件或者.html文件,在上方工具栏可以选择导入功能进行对应扩展名的文件导入,
继续你的创作。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网
猜你喜欢:- JeeSite v4.0.8 社区版无限制版发布啦
- 产业链爆料:中国定制版iPhone将至,取消Face ID用屏幕指纹
- Python升级3.6 强力Django+杀手级Xadmin打造在线教育平台 (完整重制版)
- 「Flask实战」鱼书项目实战一
- 「Flask实战」鱼书项目实战三
- 「Flask实战」鱼书项目实战四
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
机器与人:埃森哲论新人工智能
【美】保罗•多尔蒂 詹姆斯•威尔逊 / 赵亚男 / 中信出版社 / 2018-10-1 / 49.00元
自人工智能问世以来,人们普遍持有人机对立的观点,且无时无刻不在害怕自己的工作会被人工智能取代。作者认为,是时候抛开这些无谓的担忧了,因为人类社会正走向一个与机器共融共生的时代。 未来的新型工作模式是什么?未来有哪些工作不会被人工智能取代?人工智能时代重要的生存技能是什么?本书围绕这三大核心问题做了透彻的分析。作者带我们见识了置于业务流程背景之下的人工智能,阐述了其在不同职能部门中起到的推动作......一起来看看 《机器与人:埃森哲论新人工智能》 这本书的介绍吧!