Vue——day5

目录

一、axios

二、Mockjs

三、echarts

---

一、axios

 学习资料：axios文档

通过axios从浏览器向服务器发送ajax（异步）请求和接收服务器响应来更新数据，实现数据的前后端交互。

 对axios进行封装，将常用的请求方法封装成一个个的函数，提供给项目中其他模块使用。可以方便项目中其他模块调用，也可以提高代码的复用性。

axios在项目中的封装：

1.安装依赖

npm i axios

2.在项目的src下创建utils，utils下创建request.js文件

（1）创建axios实例

（2）添加请求拦截器和响应拦截器

import axios from "axios";

//创建axios实例
const http = axios.create({
    //通用请求的地址前缀
    baseURL: '/api',
    //超时时间
    timeout: 10000,
})

//添加请求拦截器
http.interceptors.request.use(function (config) {
    //在发送请求之前做些什么
    return config;
}, function (error) {
    //对请求错误做些什么
    return Promise.reject(error);
})

//添加响应拦截器
http.interceptors.response.use(function (response) {
    //对响应数据做些什么
    return response;
}, function (error) {
    //对响应错误做些什么
    return Promise.reject(error);
})

//暴露
export default http;

3.在项目的src下创建api文件，通常把与后端接口交互的请求封装在api文件中。

   （1）在api下创建index.js文件，在文件中定义接口

import http from '../utils/request'

//请求首页数据接口
export const getData = () => {
    //返回一个promise对象
    return http.get('/home/getData') //后端接口名称 
} 

   （2）在定义了接口的地方进行使用（如上图在首页定义了接口），将方法进行解构调用

<script>
//解构
import { getData } from '../api'
export default {
    name: 'Home',
    data() {
        return {}
    },
    mounted() {
         //调用
         getData().then(({ data }) => {
             ...
         })
    }
}
</script>

二、Mockjs

 学习资料：Mock.js文档

我们在前端开发时，需要拿到后端的接口来调用数据，如果我们没有后端或者后端还没设计好，我们可以用Mockjs来生成模拟数据进行测试。

当后端接口设计好后，我们只需要把对应的接口请求函数的路径（'/api/home/getData'）换掉，其他的地方不变即可。

用Mockjs生成模拟数据的步骤如下：

1.安装依赖

npm i mockjs

2.在api下创建mock.js文件

（1）定义mock请求拦截，并在main.js下进行引入

（2）在api下创建mockServeData，在该文件下创建home.js存放首页数据

（3）在mock.js中首页的请求拦截下，调用home.js中的方法

//home.js文件

//mock数据模拟
import Mock from 'mockjs'

export default {
    getStatisticalData: () => {
           ...
        }
}

//mock.js文件下

import Mock from 'mockjs'
import homeApi from './mockServeData/home'

//定义mock请求拦截
Mock.mock('/api/home/getData', 'get', homeApi.getStatisticalData)

3.最后在对应的页面上可以拿到模拟数据去使用

三、echarts

 学习资料：echarts文档

 echarts是一款基于JavaScript的数据可视化图标库。

步骤：

1.安装依赖，并在需要用到的组件中进行引入

npm i echarts

import * as echarts from 'echarts'

2.初始化

var echart=echarts.init(dom节点)

3.定义选项option

 const option2 = {
    //标题
    title: { },

    //图例
    legend: { },
              
   //提示框
    tooltip: {
      //trigger: "axis",
     },

    //轴线X
    xAxis: {  },

    //轴线Y
    yAxis: [ ],

    //调试版本
    color: [ ],

    //系列数据
    series: [ ],
}

4.更新选项

echart.setOption(option);