マイクロサービス プロジェクト: Shangrongbao (14) (フロントエンド プラットフォーム: Shangrongbao 管理システム ルーティング構成)

現実を認め、空想を捨て、戦う準備をする

1. コンポーネントの定義

1. vue コンポーネントを作成する

src/views フォルダーの下に次のフォルダーとファイルを作成します。

2、core/integral-grade/list.vue

<template>
  <div class="app-container">
    积分等级列表
  </div>
</template>

 3、core/integral-grade/form.vue

<template>
  <div class="app-container">
    积分等级表单
  </div>
</template>

2.ルーティング定義

src/router/index.js ファイルを変更し、constantRoutes を再定義して、ダッシュボードのルーティング ノードにコピーします。

注: 各ルートの名前を同じにすることはできません

{
    path: '/core/integral-grade',
    component: Layout,
    redirect: '/core/integral-grade/list',
    name: 'coreIntegralGrade',
    meta: { title: '积分等级管理', icon: 'el-icon-s-marketing' },
    alwaysShow: true,
    children: [
      {
        path: 'list',
        name: 'coreIntegralGradeList',
        component: () => import('@/views/core/integral-grade/list'),
        meta: { title: '积分等级列表' }
      },
      {
        path: 'create',
        name: 'coreIntegralGradeCreate',
        component: () => import('@/views/core/integral-grade/form'),
        meta: { title: '新增积分等级' }
      },
      {
        path: 'edit/:id',
        name: 'coreIntegralGradeEdit',
        component: () => import('@/views/core/integral-grade/form'),
        meta: { title: '编辑积分等级' },
        hidden: true
      }
    ]
},

1. フルスタック開発プロセス

1. フロントエンド呼び出しプロセス

次の図は、開発プロセスに関連するいくつかのコア モジュールを示しています。ルーティングの構成とページ コンポーネントの作成が完了しました。次に、ページ コンポーネントのテンプレート <template> 部分とスクリプトをさらに改善する必要があります。 <script> およびその他のパーツを作成し、フロントエンドとバックエンドのドッキングに必要な api モジュールを作成し、最後に api モジュールを介してバックエンド インターフェイスへの呼び出しを開始します。

2.nginx リバース プロキシ設定

現在、アプリケーションのフロントエンドとバックエンドの基本アーキテクチャは次のとおりです。srb-admin はフロントエンド プログラムであり、バックエンドの srb-core マイクロサービスを直接呼び出します。

 フロントエンド プログラムが同時に複数のバックエンド サービスに接続できるようにするために、nginx リバース プロキシ、マイクロサービス ゲートウェイなどのさまざまなソリューションを使用できます。ここではまず、フロントエンドとバックエンドの間のリバース プロキシ レイヤーとして nginx を使用します。アーキテクチャは次のとおりです。

 

nginx 構成 

server {
	listen       80;
	server_name  localhost;

	location ~ /core/ {           
	    proxy_pass http://localhost:8110;
	}
	location ~ /sms/ {           
	    proxy_pass http://localhost:8120;
	}
	location ~ /oss/ {           
            proxy_pass http://localhost:8130;
	}
}

nginx コマンド

nginx の開始 #nginx の開始
-s stop
#nginx の停止 -s reload #構成のリロード

フロントエンド構成: .env.development 

# ベース api: nginx に接続
VUE_APP_BASE_API = 'http://localhost'

3・モックサーバー

VUE_APP_BASE_API の変更は、プラットフォームの模擬ログイン機能のモックデータに影響を与えるため、モックサーバーのアドレスを変更する必要があります。

mock/mock-server.js ファイルの 37 行目を変更します。

url: new RegExp(`/dev-api${url}`),

 src/api/user.js のインターフェイス呼び出しを変更し、各リモート呼び出しの構成を追加します

baseURL: '/dev-api',

第二に、フロントエンドコンポーネントの開発

1. api モジュールを定義する

ファイル src/api/core/integral-grade.js を作成します

// @ 符号在vue.config.js 中配置， 表示 'src' 路径的别名
import request from '@/utils/request'

export default {
  list() {
    return request({
      url: '/admin/core/integralGrade/list',
      method: 'get'
    })
  }
}

2. ページ コンポーネント スクリプトを定義する

src/views/core/integral-grade/list.vue

<script>
import integralGradeApi from '@/api/core/integral-grade'
export default {
  // 定义数据模型
  data() {
    return {
      list: [] // 数据列表
    }
  },

  // 页面渲染成功后获取数据
  created() {
    this.fetchData()
  },

  // 定义方法
  methods: {
    fetchData() {
      // 调用api
      integralGradeApi.list().then(response => {
        this.list = response.data.list
      })
    }
  }
}
</script>

3. ページ コンポーネント テンプレートを定義する

<template>
  <div class="app-container">
    <!-- 表格 -->
    <el-table :data="list" border stripe>
      <el-table-column type="index" width="50" />
      <el-table-column prop="borrowAmount" label="借款额度" />
      <el-table-column prop="integralStart" label="积分区间开始" />
      <el-table-column prop="integralEnd" label="积分区间结束" />
    </el-table>
  </div>
</template>

4. Axios レスポンス インターセプターの変更

src/utils/request.js の 49 行目 

if (res.code !== 20000) {
     
     

に変更

if (res.code !== 0 && res.code !== 20000) {
     
     

バックエンドインターフェースの統合結果は0を成功応答結果と判断し、モックデータは20,000件の正解結果を判断するため