Little fox AI 決済作成システム chatgpt 管理の背景 - フロントエンド インターフェイス vue ソース コードに新しいログイン メソッド構成を追加

小キツネAI有償作成システムchatgpt管理バックグラウンドvueフロントエンド環境を構築済みです

次に、使用するログイン方法を構成できるように設定を変更します。

ルーティングインターフェイスを表示する

一般に、インターフェイスのソース コードを見つけて、最初にルーティング部分を調べ、次にどのインターフェイスが含まれているかを知ることができます。

/src/ルーター/index.js

設定場所 /views/module/web/pc を直接見つけることができます。

      {
        path: 'web',
        component: () => import('@/views/module/web/layout'),
        children: [
          {
            path: 'index',
            name: 'ModuleWebPC',
            components: { subRouter: () => import('@/views/module/web/pc') },
            meta: { title: 'PC版' }
          },
          {
            path: 'upload',
            name: 'ModuleWebH5',
            components: { subRouter: () => import('@/views/module/web/h5') },
            meta: { title: 'H5版' }
          }
        ],
        hidden: true
      }

チェックボックスを追加する

          <el-form-item label="登录方式" prop="login_way">
              <el-select v-model="form['login_way']" placeholder="请选择登录方式">
                <el-option
                  label="扫码关注公众号"
                  value="wechat">
                </el-option>
                <el-option
                  label="账号密码登录"
                  value="account">
                </el-option>
              </el-select>
          </el-form-item>

これは直接でも問題ありませんが、最終的には設定テーブルの Web フィールドに保存されます。

{"is_open":1,"bind_wxapp_user":0,"page_title":"字匠AI付费创作系统","copyright":"","copyright_link":"","login_way":"account"}

PCのWeb側でlogin_wayを判断・処理することができます。