【SpringBoot+Vue】ネットワーク全体で最もシンプルだが実用的なフロントエンドとバックエンドの分離プロジェクトの実戦ノート - フロントエンド

対応動画アドレス：https://www.bilibili.com/video/BV1dG4y1T7yp/

フロントエンドの注意事項

1. ノード環境

公式サイト：https://nodejs.org

ノードは私よりわずかに低くすることができますが、高くすることはできないことに注意してください

2. vue-admin-template をダウンロード

https://panjiachen.gitee.io/vue-element-admin-site/zh/guide/

3. プロジェクトの初期化

1. スペースなしで中国語以外のディレクトリに解凍します

2. vscode プロジェクトを開く

3. 依存関係をインストールする

   npm config set registry http://registry.npm.taobao.org/
   

   npm install
   

4. テストを実行

   npm run dev
   

5. 構成の変更

   

6. テストを再開する

4. ログインページの修正

1. 中国語の説明

2. 背景画像

   写真をアセットに入れて、.login-container を変更します

   background-image: url('../../assets/bg.jpeg');
   

   ログインボックスの調整

3. ログインユーザー名キャンセル制限
   

5. 右上隅のユーザー ドロップダウン メニューを変更します。

6. ホームページのブレッドクラム ナビゲーション

7. メニューの初期化

1. src\views ディレクトリに sys モジュール ディレクトリと test モジュール ディレクトリを作成します (課金用、後で権限割り当てテストに使用できます)。

2. sys の下に 2 つのコンポーネント ファイル user.vue と role.vue を作成します。

   テスト対象の test1.vue、test2.vue、test3.vue を作成する

3. ルーティング構成を変更する

   {
         
         
       path: '/sys',
       component: Layout,
       redirect: '/sys/user',
       name: 'sys',
       meta: {
         
          title: '系统管理', icon: 'sys' },
       children: [
         {
         
         
           path: 'user',
           name: 'user',
           component: () => import('@/views/sys/user'),
           meta: {
         
          title: '用户管理', icon: 'userManage' }
         },
         {
         
         
           path: 'role',
           name: 'role',
           component: () => import('@/views/sys/role'),
           meta: {
         
          title: '角色管理', icon: 'roleManage' }
         }
       ]
     },
   
     {
         
         
       path: '/test',
       component: Layout,
       redirect: '/test/test1',
       name: 'test',
       meta: {
         
          title: '功能测试', icon: 'form' },
       children: [
         {
         
         
           path: 'test1',
           name: 'test1',
           component: () => import('@/views/test/test1'),
           meta: {
         
          title: '测试点一', icon: 'form' }
         },
         {
         
         
           path: 'test2',
           name: 'test2',
           component: () => import('@/views/test/test2'),
           meta: {
         
          title: '测试点二', icon: 'form' }
         },
         {
         
         
           path: 'test3',
           name: 'test3',
           component: () => import('@/views/test/test3'),
           meta: {
         
          title: '测试点三', icon: 'form' }
         }
       ]
     }
   

   アイコン svg ファイルは、https://www.iconfont.cn/ からダウンロードできます。

8. タブバーのナビゲーション

1. @/layout/components/AppMain.vue
   

   <keep-alive :include="cachedViews">
       <router-view :key="key" />
   </keep-alive>
   

   cachedViews() {
         
         
       return this.$store.state.tagsView.cachedViews
   }
   

2. vue-element-admin プロジェクトのファイルを対応するディレクトリにコピーします

   @/layout/components/TagsView
   @/store/modules/tagsView.js
   @/store/modules/permission.js

3. ファイル @store/getters.js を変更します
   

   visitedViews: state => state.tagsView.visitedViews,
   cachedViews: state => state.tagsView.cachedViews,   
   permission_routes: state => state.permission.routes
   

4. ファイル @store/index.js を変更します
   

5. ファイル @\layout\index.vue を変更します
   

6. ファイル @layout\components\index.js を変更します。

   追加

   export {
         
          default as TagsView } from './TagsView'
   

7. Affix ピン
   ルート宣言時に Affix 属性を付加すると、tags-view で現在のタグが固定されます (削除不可)。
   

9.ログインインターフェースコーミング

インターフェース	URL	方法
ログイン	/ユーザー/ログイン	役職
ユーザー情報を取得する	/ユーザー情報	得る
ログアウト	/ユーザー/ログアウト	役職

{
    
    "code":20000,"data":{
    
    "token":"admin-token"}}

{
    
    "code":20000,"data":{
    
    "roles":["admin"],"introduction":"I am a super administrator","avatar":"https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif","name":"Super Admin"}}

{
    
    "code":20000,"data":"success"}

10. ドッキング バックエンド インターフェイス

1. .env.development の基本 API を変更し、パッケージ化してデプロイする場合は .env.production を変更します。

   VUE_APP_BASE_API = 'http://localhost:9999'
   

2. vue.config.js を変更してモック リクエストをブロックする
   

3. src\api\user.js を変更し、URL の /vue-admin-template を削除します
   

4. テスト済み、予想されるクロスドメイン エラー

5. バックエンドでのクロスドメイン処理テストは成功するはずであり、デバッグ ウィンドウでインターフェイス呼び出しを確認できます。

11. ユーザー管理

プレビュー

• ユーザークエリ

  1. define-userManager.js

  2. ページ シーケンス番号の処理

     <template slot-scope="scope">
         {
            
            {(searchModel.pageNo-1) * searchModel.pageSize + scope.$index + 1}}
     </template>
     

• 新しいユーザー

  1. ウィンドウを閉じた後もデータは残っています

     閉じるのを聞いて、フォームをクリーンアップします

  2. フォーム データの検証

     定期的な確認

     カスタム検証

  3. ウィンドウを閉じた後も、最後の検証結果が残っています

• ユーザー変更

• ユーザー削除