ログインと登録を実現するSpringboot+VUE

この記事の例では、ログインと登録を実装するためのspringboot+VUEの具体的なコードを参考までに共有しています。具体的な内容は次のとおりです。

1. スプリングブート

springBootプロジェクトを作成する

これは、リソースディレクトリの下のコントローラー、サービス、dao、および xml ファイルという 3 つのパッケージに分かれています。

ユーザーコントローラ.java

パッケージ springbootmybatis.controller;

org.springframework.web.bind.annotation.CrossOrigin をインポートします。
org.springframework.web.bind.annotation.PostMapping をインポートします。
org.springframework.web.bind.annotation.RequestBody をインポートします。
org.springframework.web.bind.annotation.RestController をインポートします。
springbootmybatis.pojo.User をインポートします。
springbootmybatis.service.UserService をインポートします。

javax.annotation.Resource をインポートします。


@レストコントローラ
パブリッククラスUserController{
    @リソース
    ユーザーサービス ユーザーサービス;

    @PostMapping("/register/")
    @クロスオリジン("*")
    文字列登録(@RequestBody User ユーザー) {
        System.out.println("誰かが登録をリクエストしました!");
        int res = userService.register(user.getAccount(), user.getPassword());
        （res==1）の場合{
            「登録成功」を返します。
        } それ以外 {
            「登録に失敗しました」を返します。
        }
    }

    @PostMapping("/ログイン/")
    @クロスオリジン("*")
    文字列ログイン(@RequestBody User ユーザー) {
        int res = userService.login(user.getAccount(), user.getPassword());
        （res==1の場合）{
            「ログイン成功」を返します。
        } それ以外 {
            「ログインに失敗しました」を返します。
        }
    }
}

ユーザーサービス.java

パッケージ springbootmybatis.service;

org.springframework.stereotype.Service をインポートします。
springbootmybatis.dao.UserMapper をインポートします。

javax.annotation.Resource をインポートします。

@サービス
パブリッククラスUserService{
    @リソース
    ユーザーマッパー ユーザーマッパー;

    パブリック int レジスタ(文字列アカウント、文字列パスワード) {
        userMapper.register(アカウント、パスワード) を返します。
    }

    public int login(文字列アカウント、文字列パスワード) {
        userMapper.login(アカウント、パスワード) を返します。
    }
}

User.java (lombokプラグインをインストールしました)

パッケージ springbootmybatis.pojo;

lombok.Data をインポートします。

@データ
パブリッククラスUser{
    プライベート文字列アカウント。
    プライベート文字列パスワード;
}

ユーザーマッパー.java

パッケージ springbootmybatis.dao;

org.apache.ibatis.annotations.Mapper をインポートします。

@マッパー
パブリックインターフェースUserMapper{
    int register(String アカウント、String パスワード);

    int login(文字列アカウント、文字列パスワード);
}

ユーザーマッパー.xml

<?xml バージョン="1.0" エンコーディング="UTF-8" ?>
<!DOCTYPE マッパー
        パブリック "-//mybatis.org//DTD マッパー 3.0//EN"
        「http://mybatis.org/dtd/mybatis-3-mapper.dtd」 を参照してください。

<マッパー名前空間="springbootmybatis.dao.UserMapper">

    <挿入id="登録">
       User (アカウント、パスワード) に値 (#{account}、#{password}) を挿入します。
    </挿入>

    <select id="ログイン" resultType="整数">
        account=#{account} かつ password=#{password} の場合、User から count(*) を選択します。
    </選択>
</マッパー>

バックボーン構成

アプリケーション.yaml

サーバーポート: 8000
春：
  データソース:
    ユーザー名: root
    パスワード: 123456
    URL: jdbc:mysql://localhost:3306/community?serverTimezone=UTC&useUnicode=true&characterEncoding=utf-8
    ドライバークラス名: com.mysql.cj.jdbc.Driver
マイバティス:
    タイプエイリアスパッケージ: springbootmybatis.pojo
    マッパーの場所: クラスパス:mybatis/mapper/*.xml
    構成：
      アンダースコアをキャメルケースにマップ: true

データベースは対応するテーブルを作成する必要がある

テーブル `user` を作成します (
  `account` varchar(255) COLLATE utf8_bin デフォルト NULL,
  `password` varchar(255) COLLATE utf8_bin デフォルト NULL
) エンジン=InnoDB デフォルト文字セット=utf8 COLLATE=utf8_bin;

2. VUEプロジェクトを作成する

node、npm をインストールし、環境変数を設定します。
ダウンロードを高速化するために cnpm リポジトリを構成します。

npm i -g cnpm --registry=https://registry.npm.taobao.org

VUEをインストールする

vue.js のコマンドプロンプトで vue.js を起動します。

パッケージ構造を初期化する

vue init webpack プロジェクト

プロジェクトを開始する

# プロジェクトディレクトリに入る cd vue-01
# コンパイル npm install
# npm run dev を起動します

次の構造に従ってプロジェクトファイルを変更します

アプリ

<テンプレート>
  <div id="アプリ">
    <ルータービュー/>
  </div>
</テンプレート>

<スクリプト>
エクスポートデフォルト{
  名前: 'アプリ'
}
</スクリプト>

<スタイル>

</スタイル>

ようこそ。

<テンプレート>
  <div>
    <el-input v-model="account" placeholder="アカウント番号を入力してください"></el-input>
    <el-input v-model="password" placeholder="パスワードを入力してください" show-password></el-input>
    <el-button type="primary" @click="login">ログイン</el-button>
    <el-button type="primary" @click="register">登録</el-button>
  </div>
</テンプレート>

<スクリプト>
エクスポートデフォルト{
  名前: 'ようこそ',
  データ （） {
    戻る {
      アカウント： ''、
      パスワード: ''
    }
  },
  メソッド: {
    登録: 関数 () {
      this.axios.post('/api/register/', {
        アカウント: this.account,
        パスワード: this.password
      }).then(関数 (応答) {
        console.log(応答);
      }).catch(関数(エラー) {
        コンソール.log(エラー);
      });
      // this.$router.push({path:'/registry'});
    },
    ログイン: 関数 () {
      this.axios.post('/api/login/', {
        アカウント: this.account,
        パスワード: this.password
      }).then(関数() {
        alert('ログインに成功しました');
      }).catch(関数(e) {
        警告する
      })
      // this.$router.push({path: '/board'});
    }
  }
}
</スクリプト>

<スタイルスコープ>

</スタイル>

メイン.js

// `import` コマンドで読み込む Vue ビルド バージョン
// (ランタイムのみまたはスタンドアロン) が webpack.base.conf にエイリアスとともに設定されています。
'vue' から Vue をインポートします
'./App' から App をインポートします
'./router' からルーターをインポートします
'element-ui' から ElementUI をインポートします。
'element-ui/lib/theme-chalk/index.css' をインポートします。
'axios' から axios をインポートします
'vue-axios' から VueAxios をインポートします

Vue.use(VueAxios、axios) を使用します
Vue.use(要素UI)
Vue.config.productionTip = false

/* eslint を無効にする no-new */
新しいVue({
  el: '#app',
  ルーター、
  コンポーネント: {App},
  テンプレート: '<App/>'
})

ルーター/index.js

'vue' から Vue をインポートします
'vue-router' から Router をインポートします。
'@/components/welcome' から welcome をインポートします。

Vue.use(ルーター)

デフォルトの新しいルーターをエクスポートします({
  ルート: [
    {
      パス： '/'、
      名前: 'ようこそ',
      コンポーネント: ようこそ
    }
  ]
})

config/index.js

「厳密な使用」
// テンプレートバージョン: 1.3.1
// ドキュメントについては http://vuejs-templates.github.io/webpack を参照してください。

定数パス = require('path')

モジュール.エクスポート = {
  開発者: {

    // パス
    資産サブディレクトリ: 'static'、
    アセットパブリックパス: '/',
    プロキシテーブル: {
      '/api': {
        target: 'http://localhost:8000', //バックエンドインターフェースのドメイン名// secure: false, //httpsインターフェースの場合は、このパラメータを設定する必要があります changeOrigin: true, //インターフェースがクロスドメインの場合は、このパラメータを設定する必要があります pathRewrite: {
          '^/api': '' //URLに/api/v1/tenantなどのapiフィールドが含まれている場合のパス書き換え
          // パスをルールと同じ名前に書き換えることができるため、開発中に API を追加する必要はありません。}
      }
    },

    // さまざまな開発サーバー設定
    ホスト: 'localhost', // process.env.HOST によって上書きされる可能性があります
    port: 8080, // process.env.PORT によって上書きされる可能性があります。ポートが使用中の場合は、空いているポートが決定されます。
    autoOpenBrowser: false、
    エラーオーバーレイ: true、
    エラー通知: true、
    ポーリング: false、// https://webpack.js.org/configuration/dev-server/#devserver-watchoptions-

    // Eslint Loader を使用しますか?
    // trueの場合、コードはバンドル中にlintされ、
    // リンティングエラーと警告がコンソールに表示されます。
    useEslint: true、
    // true の場合、eslint のエラーと警告もエラーオーバーレイに表示されます
    // ブラウザで。
    showEslintErrorsInOverlay: false、

    /**
     * ソースマップ
     */

    // https://webpack.js.org/configuration/devtool/#開発
    開発ツール: 'cheap-module-eval-source-map',

    // devtoolsでvueファイルのデバッグに問題がある場合は、
    // これをfalseに設定すると役立つ場合があります
    // https://vue-loader.vuejs.org/en/options.html#キャッシュバスティング
    キャッシュバスティング: true、

    cssソースマップ: true
  },

  建てる： {
    // index.html のテンプレート
    インデックス: path.resolve(__dirname, '../dist/index.html'),

    // パス
    アセットルート: path.resolve(__dirname, '../dist'),
    資産サブディレクトリ: 'static'、
    アセットパブリックパス: '/',

    /**
     * ソースマップ
     */

    プロダクションソースマップ: true、
    // https://webpack.js.org/configuration/devtool/#production
    開発ツール: '#source-map',

    // 多くの一般的な静的ホストでは、デフォルトでGzipがオフになっています。
    // Surge または Netlify はすでにすべての静的アセットを gzip 圧縮しています。
    // `true` に設定する前に、次の点を確認してください。
    // npm install --save-dev 圧縮Webpackプラグイン
    productionGzip: false、
    productionGzip拡張子: ['js', 'css'],

    // 追加の引数を指定してビルドコマンドを実行します
    // ビルドが完了したらバンドル アナライザー レポートを表示します。
    // `npm run build --report`
    // 常にオンまたはオフにするには、`true` または `false` に設定します
    バンドルアナライザーレポート: process.env.npm_config_report
  }
}