目次
1.3.2: 教師のルーティングに対応するファイルを作成する
2. バックエンド インターフェース解析（バックエンド ゲートウェイとの接続）
1. フロントエンド ルーティングの実装の分析
1.1: エントリ ファイルでルートを呼び出す
-
src/main.js このファイルはルーティングをインポートし、ルーティングの場所 src の下でルーターを見つけます
1.2: ルーティング モジュールを定義する
ルートの下にある index.js ファイルを見つけます
モジュール: ルーティング モジュール ファイル
ステップ 1: teacher モジュール用のルーティング ファイル teacher.js を作成する
ステップ 2: teacher.js ファイルを index.js ファイルにインポートする
「./modules/teacher」から teacherRouter をインポートします
このファイルは使用が宣言されていないため、インポート後にグレー表示されていることがわかります
ステップ 3: teacher.js ファイルを宣言する
1.3: ルーティング モジュール ファイルを作成する
モジュールの teacher.js ファイルに、教師に対応するルーティング変数を記述できます。
1.3.1: 1 つ以上のサブルートを構成する
teacher.js を変更する
「@/layout」からレイアウトをインポート
const teacherRouter = {
path: '/teacher', // 現在のモジュール プレフィックス パスは / で始まる必要があります
component: Layout, // レイアウト コンポーネントを使用して現在のモジュールを表示 [デフォルト]
redirect: '/teacher/teacherList', // 「教師管理」はデフォルトでルートを表示します
name: 'Teacher management', // ルート名
メタ: {
title: 'Teacher management', // 第 1 レベルのメニューの名前, children.length==0 hide
icon: 'table' // レベル 1 メニュー アイコン、children.length==0 hidden
}、
子供： [
{
パス: 'teacherList',
コンポーネント: () => import('@/views/edu/teacher/teacherList'),
name: '教師リスト',
meta: { title: 'Teacher List' } //サブメニュー名
}、
{
パス: 'teacherAdd',
コンポーネント: () => import('@/views/edu/teacher/teacherAdd'),
name: '先生を追加',
meta: { title: '先生を追加' } // 2 番目のメニュー名
}
]
}
デフォルトの teacherRouter をエクスポートします
1.3.2: 教師のルーティングに対応するファイルを作成する
-
一覧ページを作成する
@/views/edu/teacher/teacherList.vue<template> <div> 所有老师 </div> </template> <script> export default { name: 'WORKSPACE_NAMEteacherList', data() { return { }; }, mounted() { }, methods: { }, }; </script> <style lang="scss" scoped> </style> -
追加ページを作成
@/views/edu/teacher/teacherAdd.vue
<template>
<div>
添加老师
</div>
</template>
<script>
export default {
name: 'WORKSPACE_NAMEteacherAdd',
data() {
return {
};
},
mounted() {
},
methods: {
},
};
</script>
<style lang="scss" scoped>
</style>
2. バックエンド インターフェース解析（バックエンド ゲートウェイとの接続）
2.1: アクセスプレフィックス
.env.developmentファイル を変更する
バックエンド ゲートウェイ アクセスとの一貫性
これは、以前のログイン アクセスへのパスです。
構成ファイルを介してバックエンド Web サイトに接続した後、アクセス パスを変更します。
2.2: axios ツール クラスの構成
2.2.1: ツール クラスの表示
element ui admin は、ネイティブ axios を強化するツール クラスを提供します
-
位置：
@/utils/request.js
2.2.2: ツール クラスを変更する
エラーを表示しやすいように request.js ファイルを変更します。
// リクエストが異常だった場合は、プロンプト (パスなど、データなど) を出力します
console.info(response.config, res)
2.2.3: モックデータを無効にする
これらの予備作業は完了しました
2.3: カスタム バックエンド インターフェイス
後段のプログラムを維持するために、すべての axios のアクセス パスを@/apiの下、モジュールごとに js ファイルを作成します。
2.3.1: ユーザーログインファイルを修正する
改訂@/api/user.js
import axios from '@/utils/request'
export function login(user) {
//这边登录功能属于user后端先不写
//return axios.post(`/user-service/user/login`,user)
//临时模拟数据进行登录完善老师模块的功能
return axios.post(`/teacher-service/user/login`,user)
}
export function getInfo(token) {
//return axios.get('/user-service/user/info',{
return axios.get('/teacher-service/user/info',{
params: {token}
});
}
export function logout() {
return axios({
url: '/vue-element-admin/user/logout',
method: 'post'
})
}この時点で、アクセスパスは完全に変更されており、404 は制御可能な例外です。
教師サービスで、一時的なログイン処理クラスを作成します
JavaBean: ユーザー
package com.czxy.zx.temp;
import lombok.Data;
@Data
public class User {
private String username;
private String password;
}
処理クラス: UserController、Element UI Admin
@RestController
@RequestMapping("/user")
@Api(tags = "主页登录",description = "模拟登录")
public class UserController {
/**
* 用户登录
* @param user
* @return
*/
@PostMapping("/login")
@ApiOperation("模拟登录")
public BaseResult login(@RequestBody User user) {
Map<String,Object> map = new HashMap<>();
if("admin".equals(user.getUsername())) {
map.put("token", "admin-token");
} else {
map.put("token", "editor-token");
}
return BaseResult.ok("登录成功",map);
}
@GetMapping("/info")
@ApiOperation("模拟登录")
public BaseResult login(String token) {
Map<String,Object> map = new HashMap<>();
if("admin-token".equals(token)) {
map.put("roles", Arrays.asList("admin"));
map.put("avatar", "https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif");
map.put("name", "Super Admin");
} else {
map.put("roles", Arrays.asList("editor"));
map.put("avatar", "https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif");
map.put("name", "Normal Editor");
}
return BaseResult.ok("登录成功",map);
}
}こちらもログイン成功