ナビゲーション バー、カプセル化された 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',parameter) は、
子コンポーネントが親コンポーネントのメソッドを呼び出す必要がある場合に使用されます。
対照的に、親コンポーネントが子コンポーネントを呼び出す必要がある場合は、 this.$refs のメソッドが使用されます。
This.$refs. 子コンポーネントの ref. 子コンポーネントのメソッド。

コンテンツの動的幅

コンテンツの動的スタイル バインディング
親ページ:

コンテンツ ページのスタイルがtrueisCollapseの場合、コンテンツ内の小さなスタイルをアクティブにします。これでアニメーション効果は完成です。

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 および await は、アスタリスクおよび yield よりも明確なセマンティクスを持っています。async は関数内に非同期操作があることを意味し、await は次の式が結果を待つ必要があることを意味します。

結果：

3. データ処理フィルター

新しいフィルターを作成します。

フィルターはデータ形式を変換する num メソッドです。call:効果
の使用:管道符

4. Eチャートを使用する

Echarts 公式 Web サイトを参照してください: https://echarts.apache.org/handbook/zh/get-started/

次のコマンドを使用して、npm 経由で ECharts をインストールできます。

npm install echarts --save

デモ: EChart の使用

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]
    }
  ]
});

プロジェクトでの Echart の使用

次のコマンドを使用して、npm 経由で ECharts をインストールできます。

npm install echarts --save

グローバルにインポートするか、
使用するページにグローバル main.js を導入します。

またはページ紹介:

dom要素

描画の準備

効果

その他のパラメータについては、公式 Web サイトの設定項目マニュアルを参照してください:
https://echarts.apache.org/zh/option.html#title