day59( 使用Element U , 使用axios )

2022/5/23 23:22:54

本文主要是介绍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.小结



这篇关于day59( 使用Element U , 使用axios )的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!


扫一扫关注最新编程教程