SpringBoot + Vue フロントエンドとバックエンドの分離プロジェクトの実践 || 1: Vue フロントエンドの設計

一連の記事:
SpringBoot + Vue フロントエンドとバックエンドの分離プロジェクトの実践 || 1 つ: Vue フロントエンド設計
SpringBoot + Vue フロントエンドとフロントエンドの分離プロジェクトの実践 || 2 つ: Spring Boot バックエンドとデータベース接続
SpringBoot + Vue フロントエンドとフロントエンド分離プロジェクトの実践 || 3: Spring Boot バックエンドと Vue フロントエンド接続
SpringBoot + Vue フロントエンドとバックエンド分離プロジェクトの実践 || 4: ユーザー管理機能実装
SpringBoot + Vue フロントエンド分離プロジェクト実践 || 5: ユーザー管理機能フォローアップ

Bilibili のビデオ説明: 2023 年の最もシンプルだが実用的な SpringBoot+Vue フロントエンドとバックエンドの分離プロジェクト。

ビデオを見たくない場合は、この記事のメモを参照して詳細を確認してください。

環境構成

Nodejs: 8.17.0
Vue: 3.11.0
Maven: 3.6.0
Java版本: 1.8.0_371
MySQL: 5.5_56
Redis: 5.0.14

一般推荐使用低版本，因为高版本兼容低版本，反之不行

開発ツール

IDEA 2021 (バックエンド)
VScode (フロントエンド)

Vue フロントエンド テンプレートをダウンロード

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

ここから1と2をダウンロードすることをお勧めします このプロジェクトは主に2をベースに開発していますが、フロントエンド機能を拡張します1 のコードを使用する必要があります

2を選択すると、他のバージョンをダウンロードできます。v3.0.0

ダウンロードが完了すると、第2个基础模版見つけられる任意のディレクトリに解凍されます (ディレクトリに中国語の文字が含まれることはお勧めできません)。

VScodeを開き、选择 文件 -> 打开文件夹

以下のように正常に開きます

フロントエンドプロジェクト始動

統合ターミナルを開き、必ずpackage.jsonそのレベルのディレクトリに移動してください。

次に、ターミナルにコマンドを入力しますnpm install

プロジェクトの依存関係を自動的にダウンロードします

依存関係がダウンロードされたら、プロジェクトを開始してコマンドを実行します。npm run dev

成功を示す次のメッセージが表示されるので、

リンクを開きます。

フロントエンドの説明と変更

フロントエンドの全体的な構成はvue.config.jsファイルにあります

16 行目はポート番号で、変更可能です。ここでは次のように変更しました。8888

行 34 は、プロジェクトを開始するかどうかをデフォルトでブラウザーを開きます。Vue はホット変更をサポートしているため、フロントエンドの変更を完了するたびに再起動する必要はありません。変更が保存された後、フロントエンド ページは自動的に変更されます, ここで設定されています。false

すべてのページはフォルダに保存されていますsrc/views。viewここのフォルダは私が修正したものです。修正プロセスについては後ほど説明します。

まずログインページを変更しますsrc/views/login/index.vue

6行目を見つけて変更しますtitle

187 行目に移動し、背景画像を変更します。この時点で、背景画像を見つけてsrc/assetsフォルダーに配置する必要があります。

background-image: url(../../assets/bg.png); //背景图
background-size: 100%;

保存後、ページも同時に変更されます。

ここで背景画像を変更できるのはなぜですか?

ブラウザでF12開発者モードを開き、「1」を選択し、マウスを動かしてページ全体を選択すると、左下隅にクラス名が表示されるので.login.container、名前を覚えておいてください。

VScode検索を開くと、.login-containerページに表示されている.login.container2 番目の検索結果が"become".に置き換えられていることがわかります。ここでスタイルを変更する必要があります。その他の変更:-.login-container

1. 英語を中国語に変更するには、対応する英語の単語を見つけて中国語に変更する必要があります。ページ上の英語の単語を覚えてから、コードを入力して対応する英語の単語の場所を見つけ、中国語を入力します。
   
2. ログインフォームを半透明に変更して查找元素検索login-form
   
   

   .login-form {
         
         
       position: relative;
       width: 520px;
       max-width: 100%;
       padding: 30px 35px 0;
       margin: 0 auto;
       overflow: hidden;
       background-color: #2d3a4b;  // 背景颜色
       border-radius: 5px;             // 表单圆角
       opacity: 0.85;                  // 透明度，值越小越越透明，取值为[0,1]
   }
   

3. src\views\login\inde.vue私のファイルの完全なコードを添付します

   <template>
     <div class="login-container">
       <el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form" auto-complete="on" label-position="left">
   
         <div class="title-container">
           <h3 class="title">神盾局管理系统</h3>
         </div>
   
         <el-form-item prop="username">
           <span class="svg-container">
             <svg-icon icon-class="user" />
           </span>
           <el-input
             ref="username"
             v-model="loginForm.username"
             placeholder="用户名"  
             name="username"
             type="text"
             tabindex="1"
             auto-complete="on"
           />
         </el-form-item>
   
         <el-form-item prop="password">
           <span class="svg-container">
             <svg-icon icon-class="password" />
           </span>
           <el-input
             :key="passwordType"
             ref="password"
             v-model="loginForm.password"
             :type="passwordType"
             placeholder="密码"
             name="password"
             tabindex="2"
             auto-complete="on"
             @keyup.enter.native="handleLogin"
           />
           <span class="show-pwd" @click="showPwd">
             <svg-icon :icon-class="passwordType === 'password' ? 'eye' : 'eye-open'" />
           </span>
         </el-form-item>
   
         <el-button :loading="loading" type="primary" style="width:100%;margin-bottom:30px;" @click.native.prevent="handleLogin">登录</el-button>
   
         <!-- <div class="tips">
           <span style="margin-right:20px;">username: admin</span>
           <span> password: any</span>
         </div> -->
   
       </el-form>
     </div>
   </template>
   
   <script>
   
   import {
         
          validUsername } from '@/utils/validate'
   
   export default {
         
         
     name: 'Login',
     data() {
         
         
       const validateUsername = (rule, value, callback) => {
         
         
         if (!validUsername(value)) {
         
         
           callback(new Error('请输入正确的用户名'))
         } else {
         
         
           callback()
         }
       }
       const validatePassword = (rule, value, callback) => {
         
         
         if (value.length < 6) {
         
         
           callback(new Error('密码不能少于6位'))
         } else {
         
         
           callback()
         }
       }
       return {
         
         
         loginForm: {
         
         
           username: 'admin',
           password: '123456'
         },
         loginRules: {
         
         
           username: [{
         
          required: true, trigger: 'blur', validator: validateUsername }],
           password: [{
         
          required: true, trigger: 'blur', validator: validatePassword }]
         },
         loading: false,
         passwordType: 'password',
         redirect: undefined
       }
     },
     watch: {
         
         
       $route: {
         
         
         handler: function(route) {
         
         
           this.redirect = route.query && route.query.redirect
         },
         immediate: true
       }
     },
     methods: {
         
         
       showPwd() {
         
         
         if (this.passwordType === 'password') {
         
         
           this.passwordType = ''
         } else {
         
         
           this.passwordType = 'password'
         }
         this.$nextTick(() => {
         
         
           this.$refs.password.focus()
         })
       },
       handleLogin() {
         
         
         this.$refs.loginForm.validate(valid => {
         
         
           if (valid) {
         
         
             this.loading = true
             this.$store.dispatch('user/login', this.loginForm).then(() => {
         
         
               this.$router.push({
         
          path: this.redirect || '/' })
               this.loading = false
             }).catch(() => {
         
         
               this.loading = false
             })
           } else {
         
         
             console.log('error submit!!')
             return false
           }
         })
       }
     }
   }
   </script>
   
   <style lang="scss">
   /* 修复input 背景不协调 和光标变色 */
   /* Detail see https://github.com/PanJiaChen/vue-element-admin/pull/927 */
   
   $bg:#283443;
   $light_gray:#fff;
   $cursor: #fff;
   
   @supports (-webkit-mask: none) and (not (cater-color: $cursor)) {
         
         
     .login-container .el-input input {
         
         
       color: $cursor;
     }
   }
   
   /* reset element-ui css */
   .login-container {
         
         
     .el-input {
         
         
       display: inline-block;
       height: 47px;
       width: 85%;
   
       input {
         
         
         background: transparent;
         border: 0px;
         -webkit-appearance: none;
         border-radius: 0px;
         padding: 12px 5px 12px 15px;
         color: $light_gray;
         height: 47px;
         caret-color: $cursor;
   
         &:-webkit-autofill {
         
         
           box-shadow: 0 0 0px 1000px $bg inset !important;
           -webkit-text-fill-color: $cursor !important;
         }
       }
     }
   
     .el-form-item {
         
         
       border: 1px solid rgba(255, 255, 255, 0.1);
       background: rgba(0, 0, 0, 0.1);
       border-radius: 5px;
       color: #454545;
     }
   }
   </style>
   
   <style lang="scss" scoped>
   $bg:#2d3a4b;
   $dark_gray:#889aa4;
   $light_gray:#eee;
   
   .login-container {
         
         
     min-height: 100%;
     width: 100%;
     background-color: $bg;
     overflow: hidden;
   
     background-image: url(../../assets/bg.png); //背景图
     background-size: 100%;
   
   
     display: flex;
     align-items: center;
   
   
     .login-form {
         
         
       position: relative;
       width: 520px;
       max-width: 100%;
       padding: 30px 35px 0;
       margin: 0 auto;
       overflow: hidden;
       background-color: #2d3a4b;  // 背景颜色
       border-radius: 5px;             // 表单圆角
       opacity: 0.85;                  // 透明度，值越小越越透明，取值为[0,1]
     }
   
     .tips {
         
         
       font-size: 14px;
       color: #fff;
       margin-bottom: 10px;
   
       span {
         
         
         &:first-of-type {
         
         
           margin-right: 16px;
         }
       }
     }
   
     .svg-container {
         
         
       padding: 6px 5px 6px 15px;
       color: $dark_gray;
       vertical-align: middle;
       width: 30px;
       display: inline-block;
     }
   
     .title-container {
         
         
       position: relative;
   
       .title {
         
         
         font-size: 26px;
         color: $light_gray;
         margin: 0px auto 40px auto;
         text-align: center;
         font-weight: bold;
       }
     }
   
     .show-pwd {
         
         
       position: absolute;
       right: 10px;
       top: 7px;
       font-size: 16px;
       color: $dark_gray;
       cursor: pointer;
       user-select: none;
     }
   }
   </style>
   

   复制代码后注意背景图的链接地址下要有文件存在

変更ファイルを页面标签見つけて3 行目を変更しますsrc\settings.jstitle

変更が完了すると、ブラウザのラベルが変わります

ナビゲーションバーを変更する

ここをクリックしてナビゲーションウィンドウを表示します

変更をカスタマイズし、scr\layout\components\Navbar.vueファイルを見つけて、赤いボックス内のコードを変更できます。

<el-dropdown-menu slot="dropdown" class="user-dropdown">
  <router-link to="/">
     <el-dropdown-item>
       个人信息
     </el-dropdown-item>
   </router-link>

   <a target="_blank" href="https://www.chinaums.com/">
     <el-dropdown-item>公司主页</el-dropdown-item>
   </a>
   <a target="_blank" href="https://www.hhu.edu.cn/">
     <el-dropdown-item>学校主页</el-dropdown-item>
   </a>
   <el-dropdown-item divided @click.native="logout">
     <span style="display:block;">退出登录</span>
   </el-dropdown-item>
 </el-dropdown-menu>

カスタムメニューとサブメニュー

まず、次の図に示すように、と のsrc\views\下に新しいフォルダーを作成し、次にこれら 2 つのフォルダーに新しい、、、ファイルを作成します。systestrole.vueuser.vuetest1.vuetest2.vuetest3.vue

Enter を押しrole.vueてコードを記述します。Enter を押すと、
自動コード プロンプトが表示されます (プラグインをインストールする必要があります)。Enter キーを押すだけです。VScodevueVScodevue

テンプレートは自動的に生成されます

この時点でコードを書きます

他の新規作成vueファイルも同じ手順に従います。

次に、src\router\index.jsこれらの新しく作成されたvueファイルをルートにリンクします。

コードとコメントを追加する

{
    
    
    path: '/sys',       // 浏览器访问路径
    component: Layout,
    redirect: '/sys',   // 本地views下的sys文件夹
    name: 'sysManage',  // 名字，唯一标识
    meta: {
    
     title: '系统管理', icon: '1' },   // 标题和图标
    children: [       // 子菜单   
      {
    
    
        path: 'user',   // 子菜单的浏览器访问路径，与父菜单结合 /sys/user 最终形成http://localhost:8888/#/sys/user
        name: 'user',   // 名字，唯一标识
        component: () => import('@/views/sys/user'),   // 新建views下的user.vue文件，该文件一定要存在
        meta: {
    
     title: '用户管理', icon: '个人中心'}    // 标题和图标
      },
      {
    
    
        path: 'role',   // 子菜单的浏览器访问路径，与父菜单结合 /sys/role
        name: 'role',
        component: () => import('@/views/sys/role'),  // 新建view下的user.vue界面，必须存在
        meta: {
    
     title: '角色管理', icon: '新增组织' }
      }
    ]
 },

このコードではicon:'1'、これはカスタマイズされたアイコンであることに注意してください。Alibabaベクター アイコン ライブラリからお気に入りのアイコンをダウンロードできます。

好きなアイコンをクリックしてくださいSVG下载

ダウンロードしたアイコンは名前を変更してsrc\icons\svgフォルダーに保存されます。

路径そうすれば、何も書かずにコード内でアイコンを使用できます。后缀名

アイコンの効果は以下の通り

私のすべてのsrc\router\index.jsコード

import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

/* Layout */
import Layout from '@/layout'

/**
 * Note: sub-menu only appear when route children.length >= 1
 * Detail see: https://panjiachen.github.io/vue-element-admin-site/guide/essentials/router-and-nav.html
 *
 * hidden: true                   if set true, item will not show in the sidebar(default is false)
 * alwaysShow: true               if set true, will always show the root menu
 *                                if not set alwaysShow, when item has more than one children route,
 *                                it will becomes nested mode, otherwise not show the root menu
 * redirect: noRedirect           if set noRedirect will no redirect in the breadcrumb
 * name:'router-name'             the name is used by <keep-alive> (must set!!!)
 * meta : {
    roles: ['admin','editor']    control the page roles (you can set multiple roles)
    title: 'title'               the name show in sidebar and breadcrumb (recommend set)
    icon: 'svg-name'/'el-icon-x' the icon show in the sidebar
    breadcrumb: false            if set false, the item will hidden in breadcrumb(default is true)
    activeMenu: '/example/list'  if set path, the sidebar will highlight the path you set
  }
 */

/**
 * constantRoutes
 * a base page that does not have permission requirements
 * all roles can be accessed
 */
export const constantRoutes = [
  {
    
    
    path: '/login',
    component: () => import('@/views/login/index'),
    hidden: true
  },

  {
    
    
    path: '/404',
    component: () => import('@/views/404'),
    hidden: true
  },

  {
    
    
    path: '/',
    component: Layout,
    redirect: '/dashboard',
    children: [{
    
    
      path: 'dashboard',
      name: 'Dashboard',
      component: () => import('@/views/dashboard/index'),
      meta: {
    
     title: '首页', icon: 'dashboard' , affix:true}
    }]
  },

  {
    
    
    path: '/sys',       // 浏览器访问路径
    component: Layout,
    redirect: '/sys',   // 本地views下的sys文件夹
    name: 'sysManage',  // 名字，唯一标识
    meta: {
    
     title: '系统管理', icon: '1' },   // 标题和图标
    children: [       // 子菜单，此子菜单   
      {
    
    
        path: 'user',   // 子菜单的浏览器访问路径，与父菜单结合 /sys/user 最终形成http://localhost:8888/#/sys/user
        name: 'user',   // 名字，唯一标识
        component: () => import('@/views/sys/user'),   // 新建views下的user.vue文件，该文件一定要存在
        meta: {
    
     title: '用户管理', icon: '个人中心'}    // 标题和图标
      },
      {
    
    
        path: 'role',   // 子菜单的浏览器访问路径，与父菜单结合 /sys/role
        name: 'role',
        component: () => import('@/views/sys/role'),  // 新建view下的user.vue界面，必须存在
        meta: {
    
     title: '角色管理', icon: '新增组织' }
      }
    ]
  },

  {
    
    
    path: '/test',
    component: Layout,
    redirect: '/test',
    name: 'test',
    meta: {
    
     title: '功能模块', icon: 'tree' },
    children: [   //子菜单
      {
    
    
        path: 'test1',
        name: 'test1',
        component: () => import('@/views/test/test1'),   // 新建view下的user.vue界面
        meta: {
    
     title: '功能1', icon: '维护管理' }
      },
      {
    
    
        path: 'test2',
        name: 'test2',
        component: () => import('@/views/test/test2'),  // 新建view下的user.vue界面，必须存在
        meta: {
    
     title: '功能2', icon: '维护管理' }
      },
      {
    
    
        path: 'test3',
        name: 'test3',
        component: () => import('@/views/test/test3'),  // 新建view下的user.vue界面，必须存在
        meta: {
    
     title: '功能3', icon: '维护管理' }
      }
    ]
  },



  // 404 page must be placed at the end !!!
  {
    
     path: '*', redirect: '/404', hidden: true }
]

const createRouter = () => new Router({
    
    
  // mode: 'history', // require service support
  scrollBehavior: () => ({
    
     y: 0 }),
  routes: constantRoutes
})

const router = createRouter()

// Detail see: https://github.com/vuejs/vue-router/issues/1234#issuecomment-357941465
export function resetRouter() {
    
    
  const newRouter = createRouter()
  router.matcher = newRouter.matcher // reset router
}

export default router

注意复制代码时，确认好自己的icon图标文件

ナビゲーションラベル機能を追加

下図に示すように、新しい関数を追加する必要があります

この関数のコードは前に紹介した最初のプロジェクトにあります。ここでcopyコードを転送する必要があります。

最新の圧縮パッケージをダウンロード後、解凍すると以下の 3 つのファイルが見つかります。ただし这些文件复制到正在开发的项目中对应的路径中去、2 つのプロジェクトのパス設定は同じです。
src/layout/components/TagsView
src/store/modules/tagsView.js
src/store/modules/permission.js

次に、VScodeコードを入力して追加します。

1. src/layout/components/AppMain.vue赤いボックス内のコードを変更するファイルを入力します
   

   <keep-alive :include="cachedViews">
       <router-view :key="key" />
   </keep-alive>
   
   
   export default {
         
         
     name: 'AppMain',
     computed: {
         
         
       key() {
         
         
         return this.$route.path
       },
       cachedViews() {
         
         
           return this.$store.state.tagsView.cachedViews
       }
     }
   }
   

2. ファイルを変更するsrc/store/getters.js
   

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

3. ファイルを変更するsrc/store/index.js
   

   import Vue from 'vue'
   import Vuex from 'vuex'
   import getters from './getters'
   import app from './modules/app'
   import settings from './modules/settings'
   import user from './modules/user'
   import tagsView from './modules/tagsView'
   
   Vue.use(Vuex)
   
   const store = new Vuex.Store({
         
         
     modules: {
         
         
       app,
       settings,
       user,
       tagsView
     },
     getters
   })
   
   export default store
   

4. ファイルを変更するsrc\layout\index.vue
   

5. ファイルを変更するsrc\layout\components\index.js
   

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

これで完了です。プロジェクトを再開するnpm run dev

首页下の図のラベルなど、閉じることができないラベルを設定したい場合は、src\router\index.jsファイル内でそれを見つけ首页て属性を追加する必要があります。affix:true

また、ラベルナビゲーションは右クリックでも可能ですが、ここでは英語を中国語に変更してみました。

VScodeChina Global でブラウザに表示される英語を検索して、中国語に対応するように変更します。変更されたパスは中央の行src\layout\components\TagsView\index.vueです20。

このときのフロントエンドページの修正もほぼ同様です。

フロントエンドのデータ形式

フロントエンドとバックエンドのドッキングには、フロントエンド ログインのjsonデータ転送形式を知っている必要があります。

ブラウザインターフェイスを開き、F12「選択」を押します网络

次に をクリックすると登录、ブラウザがステータスを記録します。

クリックすると、login赤枠で示したデータ応答形式が表示されます。この形式は、バックエンドでコードを記述するときに使用されます。

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