この記事の例では、ログインと登録を実装するための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 をインストールし、環境変数を設定します。 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 } } アカウントとパスワードを入力して、簡単な登録とログイン機能を実装します。 以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
<<: ubuntu14.04 に jdk1.8 をインストールするチュートリアル
>>: Ubuntu 18.04 サーバーのパスワードを忘れたり改ざんされた場合にパスワードをリセットする方法
ブラウザの互換性は、実際の開発では見落とされがちな最も重要な部分です。古いバージョンのブラウザの互換...
1. getBoundingClientRect() 分析getBoundingClientRect...
まず効果を見てみましょう: html <a href="#"> &l...
まず、href 属性と onclick イベントの実行順序について説明します。マウスが a タグをク...
1. 公式サイトを参照してdockerをインストールする2. MySQLイメージをプルします(デフォ...
Ubuntu 18.04.4 に MySQL をインストールするプロセスを見てみましょう。内容は次の...
1. ユーザーを作成して承認するMySQL 8.0 では、ユーザーの作成と認証が以前とは異なります...
httpsを取得する方法を勉強しています。最近、Tencent Cloud が提供する無料の SSL...
目次1. インデックスの基礎知識1.1 インデックスの利点1.2 インデックスの有用性1.3 インデ...
効果画像:実装コードは以下のとおりですビュー <canvas id="radar-c...
目次親コンポーネントリストボックスリストコンポーネントボタンコンポーネント PageButton昨年...
MySql 8.0 対応ドライバパッケージのマッチングMySql データベースをバージョン 8.0 ...
フロントエンド開発では、スクロールバーを非表示にしながらスクロールをサポートしなければならないという...
ステートフック例: 'react' から useState をインポートします。 関...
CSSを導入する3つの方法1. インラインスタイル利点: 書きやすく、重みがある 欠点: 構造とスタ...