day59( 使用Element U , 使用axios )
作者:互联网
day59( 使用Element U , 使用axios , Vue CLI的嵌套路由 , 小结 )
1.使用Element U
1. 关于Element UI
-
Element UI是一套采用 Vue 2.0 作为基础框架实现的组件库,一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的组件库,提供了配套设计资源,帮助网站快速成型。
-
Element UI的官方网址是:https://element.eleme.cn/
-
由于Element UI定义了大量的组件,每个组件都有许多属性,所以,学习Element UI时需要记忆大量的组件特征,这将是一个非常漫长的过程,通常不建议刻意的死记硬背,应该重点关注Element UI可以做到什么,例如有哪些样式,各组件的核心属性等用法,然后结合官方文档(https://element.eleme.cn/#/zh-CN/component/)进行开发。
2.安装Element UI
-
首先进入工程文件夹(如果使用IntelliJ IDEA打开了此工程,直接点击IntelliJ IDEA下面的Terminal即可):
-
然后使用npm命令安装Element UI,以下2条命令是等效的(注意:以下命令区分大小写,例如最后的-S的字母是大写的): npm i element-ui -S 或者 npm install --save element-ui
-
安装完成后,在工程的main.js中导入并使用Element UI:
// main.js
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);<el-row type="flex" justify="center">
<el-col :span="12">
<!-- 页面元素 -->
</el-col>
</el-row>
2.使用axios
1.关于axios
-
axios是一个易用、简洁且高效的http库,主要用于发起HTTP请求,并获取响应的结果。
-
axios的官方网址是:http://www.axios-js.com/
-
axios的主要特点有:
-
从浏览器中创建 XMLHttpRequests
-
从 node.js 创建 http 请求 – 支持 Promise API
-
拦截请求和响应
-
转换请求数据和响应数据
-
取消请求
-
自动转换 JSON 数据
-
客户端支持防御 XSR
-
2.axios基本使用
-
发起GET请求示例:
// 为给定 ID 的 user 创建请求
axios.get('/user?ID=12345')
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
-
发起GET请求示例:
axios.get('/user', { params: { ID: 12345 } }).then(function (response) { console.log(response); }).catch(function (error) { console.log(error); });
-
发起POST请求示例:
axios.post('/user'
, {
firstName: 'Fred'
,
lastName: 'Flintstone'
})
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
}); -
更多示例请参考axios官方文档:http://www.axios-js.com/zh-cn/docs/
3.安装axios
npm i axios -S 或者 npm install --save axios
安装完成后,也需要在main.js中添加配置,配置代码为:
import axios from 'axios'
Vue.prototype.axios = axios
4.使用工程jar包文件命令启动此服务
java -jar vue-project-server-0.0.1.jar
3.Vue CLI的嵌套路由
4.小结
标签:axios,console,log,Element,day59,UI,response 来源: https://www.cnblogs.com/xiaoyezilei/p/16303100.html