탐색 표시줄, 캡슐화된 API 인터페이스, 데이터 처리 필터, Echarts 사용 (2)

이전 글(1)에 이어 단순지식은 직접 필터링하기 때문에 기록이 완전하지 않고 개인노트 참고용으로는 적합하지 않습니다.기본을 배우고 싶다면 그래도 체계적으로 공부해야 합니다.

이 기사 이후에는 몇 가지 간단한 컨트롤의 사용에 중점을 두므로 더 이상 기록이 없습니다. 프로젝트 소스코드를 보고 싶으시면 저에게 비공개 메시지를 보내주세요.

1. 왼쪽 탐색 모음

처음에는 메뉴가 하드코딩되어 있으며 나중에 메뉴는 권한과 결합됩니다. 권한을 통해 맞춤형 메뉴를 얻을 수 있습니다. Element를 통해 메뉴 아래 인덱스 페이지에 원하는 메뉴를 직접 복사할 수 있습니다.

El 요소 색상 재정의

색상은 직접 맞추시면 됩니다. el 요소의 색상을 다시 작성하려면 선택기를 사용하여

수정하려는 요소의 스타일을 선택하고 CSS에서 다시 작성

하면 border-right가 새로 수정된 값이 됩니다.

라우터 모드로 이동

기본적으로 열려 강조표시되는 페이지 경로에 el-menu라우터를 추가하면 동적 강조표시로 변경됩니다 . 클릭하는 메뉴가 강조표시되며 새로고침해도 이 페이지에 계속 남아 있습니다.

default-activedefault-active:default-active="$route.path"

내비게이션 바가 접혀있습니다.(형제 페이지는 아버지의 도움을 받아 데이터를 전송합니다.)

먼저 collaspe 속성을 통해 제어되며 스타일에 따라 너비가 결정되는 페이지 접기 이벤트를 살펴보겠습니다.

메뉴 속성에 속성이 없으면 collapse(접힌 것이 아님) 너비는 200px이고, 그렇지 않으면 기본값입니다(메뉴 너비는 처음에 정의되어 있으므로 제거해야 함).

동일한 페이지에 있지 않기 때문에 콘텐츠의 버튼 클릭 이벤트를 통해 왼쪽 탐색 모음의 상태를 제어합니다 .

따라서 상태를 제어하기 위해 상위 페이지를 통해 매개변수를 전달할 수 있으며, 상위 요소에서 매개변수를 직접 정의할 수 있습니다: 하위 페이지:

콘텐츠
에서 클릭 이벤트 정의:
콘텐츠는 상위 페이지의 이벤트를 호출하고 값을 isCollapse반전시킵니다 .

상위 페이지:

콘텐츠 페이지:

확장:
this.$emit('event', 매개변수)는
하위 구성요소가 상위 구성요소의 메소드를 호출해야 할 때 사용됩니다.
반면, 상위 컴포넌트가 하위 컴포넌트를 호출해야 하는 경우에는 this.$refs의 메소드,
This.$refs, 하위 컴포넌트의 참조, 하위 컴포넌트의 메소드를 사용합니다.

콘텐츠 동적 너비

콘텐츠 상위 페이지 의 동적 스타일 바인딩 :

콘텐츠 페이지 스타일이 true isCollapse인 경우 콘텐츠에서 작은 스타일을 활성화합니다 . 이 애니메이션 효과가 완료되었습니다.

2. 요청을 캡슐화하는 API 인터페이스

인터페이스 주소 관리

src 아래에 새 api 폴더를 만들고 base.js 및 index.js

base.js를 만듭니다.
인터페이스 주소를 구성하고

index.js를

내보냅니다 . axios는 직접 복사할 수 있는 캡슐화된 메서드입니다.
request.js:

/* 
    对axios网络请求方法 进行二次封装 

    简单封装：
        不改变本身的功能 继续扩展新的功能

    企业封装好了：
        项目已经创建完毕 
        
    
*/
//先导入需要的axios模块
import axios from 'axios'
import qs from 'querystring'
//可以使用自定义配置新建一个 axios 实例  axios.create([config])
const instance = axios.create({
    
    
    //发送请求的公共的基础路径接口位置 
    // baseURL: 'http://iwenwiki.com',//配置请求的基础路径
    //如果是打包的项目 请求的接口的基本的网络地址就是 配置在环境变量的了  VUE_APP_BASE_API
    baseURL:process.env.NODE_ENV=='production'?process.env.VUE_APP_BASE_API:'',
    timeout: 5000,//请求设置超时时间 单位毫秒 5s超时 接口请求5s没有响应数据 停止请求
})

// 添加请求拦截器
instance.interceptors.request.use(function (config) {
    
    //config发送请求的配置参数信息
    //config可以判断请求的方式get/post 请求url参数地址 headers请求头配置 参数data发送的数据等信息
    // console.log('config-请求拦截器',config);
    //对post请求处理参数
    if(config.method =='post'){
    
    
        config.data = qs.stringify(config.data)
    }
    // 在发送请求之前做些什么--对post请求参数 处理字符串拼接
    return config;
  }, function (error) {
    
    
    // 对请求错误做些什么
    return Promise.reject(error);
});


// 添加响应拦截器 -- 对错误的数据处理参数
//网络请求常见错误信息 
// 404 地址接口错误  500 505 服务器错误 200 成功  300 重定向 
instance.interceptors.response.use(function (response) {
    
    
    // 对响应数据做点什么
    return response;
  }, function (error) {
    
    
    console.log('error',error);
    // 对响应错误做点什么
    const {
    
     response } = error;
    //response.status 错误状态   500 服务器错误  response.info 信息提示
    errorHandle(response.status,response.info)
    // return Promise.reject(error);
});

//错误响应处理提示信息
function errorHandle(status,info){
    
    
    switch(status){
    
    
        case 400:
            console.log("400-表示请求报文中存在语法错误");
            break;
        case 401:
            console.log("401-未经许可，需要通过HTTP认证");
            break;
        case 403:
            console.log("403-服务器拒绝该次访问（访问权限出现问题）");
            break;
        case 404:
            console.log("404-表示服务器上无法找到请求的资源");
            break;
        case 500:
            console.log("500-表示服务器在执行请求时发生了错误");
            break;
        case 503:
            console.log("503-表示服务器暂时处于超负载或正在进行停机维护");
            break;
        case 504:
            console.log("504-（网关超时）  服务器作为网关或代理，但是没有及时从上游服务器收到请求");
            break;
        default:
            console.log(info);
            break;
    }
}



//导出请求
export default instance

캡슐화된 Api를 전역적으로 중단:
main.js에 추가

교차 도메인 구성

vue.config.js 인터페이스 호출에서 구성

:
페이지에서 직접 API를 호출할 수 있습니다.

확장:
비동기 비동기 호출, async 및 대기는 별표 및 항복보다 더 명확한 의미를 갖습니다. async는 함수에 비동기 작업이 있음을 의미하고, wait는 다음 표현식이 결과를 기다려야 함을 의미합니다.

결과:

3. 데이터 처리 필터

새 필터를 만듭니다.

필터는 데이터 형식을 변환하는 num 메소드입니다. 통화
사용 : 효과:管道符

4. Echart를 사용하세요

Echarts 공식 웹사이트를 참고하세요: https://echarts.apache.org/handbook/zh/get-started/

다음 명령을 사용하여 npm을 통해 ECharts를 설치할 수 있습니다.

npm install echarts --save

데모: ECharts 사용

import * as echarts from 'echarts';

// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
// 绘制图表
myChart.setOption({
    
    
  title: {
    
    
    text: 'ECharts 入门示例'
  },
  tooltip: {
    
    },
  xAxis: {
    
    
    data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
  },
  yAxis: {
    
    },
  series: [
    {
    
    
      name: '销量',
      type: 'bar',
      data: [5, 20, 36, 10, 10, 20]
    }
  ]
});

프로젝트에서 Echarts 사용

다음 명령을 사용하여 npm을 통해 ECharts를 설치할 수 있습니다.

npm install echarts --save

전역으로 가져오거나
사용하는 페이지에 전역 main.js를 도입하세요.

또는 페이지 소개: DOM 요소 그리기

준비

효과

더 많은 매개변수에 대해서는 공식 웹사이트의 구성 항목 매뉴얼을 참조하십시오:
https://echarts.apache.org/zh/option.html#title