Vueはログイン認証コードを実装する
|
この記事では、ログイン認証コードを実装するためのvueの具体的なコードを例として紹介します。具体的な内容は以下のとおりです。 まずはデモ効果図から始めましょう
Canvas 検証コード コンポーネント (変更せずに直接コピーできます)
<テンプレート>
<div class="s-canvas">
<canvas id="s-canvas" :width="contentWidth" :height="contentHeight"></canvas>
</div>
</テンプレート>
<スクリプト>
エクスポートデフォルト{
名前: "SIdentify",
小道具: {
識別コード:
タイプ: 文字列、
デフォルト: '1234'
},
フォントサイズ最小: {
タイプ: 数値、
デフォルト: 25
},
フォントサイズ最大: {
タイプ: 数値、
デフォルト: 30
},
背景色最小: {
タイプ: 数値、
デフォルト: 255
},
背景色最大: {
タイプ: 数値、
デフォルト: 255
},
色最小:
タイプ: 数値、
デフォルト: 0
},
色最大値: {
タイプ: 数値、
デフォルト: 160
},
ラインカラー最小: {
タイプ: 数値、
デフォルト: 100
},lineColorMax: {
タイプ: 数値、
デフォルト: 255
},
ドットカラー最小: {
タイプ: 数値、
デフォルト: 0
},
ドットカラーマックス: {
タイプ: 数値、
デフォルト: 255
},
コンテンツ幅: {
タイプ: 数値、
デフォルト: 112
},
コンテンツの高さ: {
タイプ: 数値、
デフォルト: 31
}
},
メソッド: {
// 乱数を生成する randomNum(min, max) {
Math.floor(Math.random() * (max - min) + min) を返します。
},
// ランダムな色を生成する randomColor(min, max) {
r = this.randomNum(最小値, 最大値) とします。
g = this.randomNum(min, max) とします。
b = this.randomNum(最小値, 最大値) とします。
'rgb(' + r + ',' + g + ',' + b + ')' を返します
},
描画画像() {
キャンバス = document.getElementById('s-canvas') とします。
ctx = canvas.getContext('2d') とします。
ctx.textBaseline = '下'
// 背景を描画します ctx.fillStyle = this.randomColor(this.backgroundColorMin, this.backgroundColorMax)
ctx.fillRect(0, 0, this.contentWidth, this.contentHeight)
// テキストを描画する for (let i = 0; i < this.identifyCode.length; i++) {
this.drawText(ctx, this.identifyCode[i], i)
}
this.drawLine(ctx)
this.drawDot(ctx)
},
テキストを描画します(ctx, txt, i) {
ctx.fillStyle = this.randomColor(this.colorMin, this.colorMax)
ctx.font = this.randomNum(this.fontSizeMin, this.fontSizeMax) + 'px SimHei'
x = (i + 1) * (this.contentWidth / (this.identifyCode.length + 1)) とします。
y = this.randomNum(this.fontSizeMax, this.contentHeight - 5) とします。
var deg = this.randomNum(-45, 45)
// 座標原点と回転角度を変更する ctx.translate(x, y)
ctx.rotate(度 * Math.PI / 180) です。
ctx.fillText(txt, 0, 0)
// 座標原点と回転角度を復元します ctx.rotate(-deg * Math.PI / 180)
ctx.translate(-x, -y)
},
描画線(ctx) {
// 干渉線を描く for (let i = 0; i < 5; i++) {
ctx.strokeStyle = this.randomColor(this.lineColorMin、this.lineColorMax)
ctx.beginPath()
ctx.moveTo(this.randomNum(0, this.contentWidth), this.randomNum(0, this.contentHeight))
ctx.lineTo(this.randomNum(0, this.contentWidth), this.randomNum(0, this.contentHeight))
ctx.ストローク()
}
},
描画ドット(ctx) {
// 干渉点を描画する for (let i = 0; i < 80; i++) {
ctx.fillStyle = this.randomColor(0, 255)
ctx.beginPath()
ctx.arc(this.randomNum(0, this.contentWidth), this.randomNum(0, this.contentHeight), 1, 0, 2 * Math.PI)
ctx.fill()
}
}
},
時計：
識別コード() {
この.drawPic()
}
},
マウント() {
この.drawPic()
}
}
</スクリプト>
<スタイルスコープ>
.s-キャンバス{
高さ: 38px;
}
.s-canvas キャンバス{
上マージン: 1px;
左マージン: 8px;
}
</スタイル>ログインページのHTML部分は必要に応じて変更できます
検証コードコンポーネントの紹介
方法
ログインページの完全なコード
<スタイル lang="less">
@import './login.less';
</スタイル>
<テンプレート>
<div class="ログイン" @keydown.enter="handleSubmit">
<div class="ログイン-con">
<カード:bordered="false" style="width: 350px;height: 380px">
<div class="form-con">
<タブ値="name1" :animated="false">
<TabPane label="ログイン" name="name1">
<フォーム ref="loginForm" :model="form" :rules="rules" :label-width="90" インライン>
<FormItem label="アカウント" prop="ユーザー名">
<Input v-model="form.username" placeholder="アカウント番号を入力してください" ref="input" clearable style="width: 200px"/>
</フォーム項目>
<FormItem label="パスワード" prop="パスワード">
<Input v-model="form.password" placeholder="パスワードを入力してください" clearable style="width: 200px"/>
</フォーム項目>
<FormItem label="検証コード" prop="検証コード">
<Input v-model="form.verificationCode" placeholder="確認コードを入力してください" clearable style="width: 200px"/>
<div @click="refreshCode" style="margin-top: 20px">
<!--検証コードコンポーネント-->
<s-identify :identifyCode="identifyCode"></s-identify>
</div>
</フォーム項目>
<div スタイル="text-align: center">
<Button @click="handleSubmit" type="primary" style="margin-right: 20px">ログイン</Button>
</div>
</フォーム>
</タブペイン>
<TabPane label="登録" name="name2">
<フォーム ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="90" インライン>
<FormItem label="アカウント" prop="ユーザー名">
<Input v-model="formValidate.username" placeholder="アカウント番号を入力してください" ref="input" clearable style="width: 200px"/>
</フォーム項目>
<FormItem label="パスワード" prop="パスワード">
<Input v-model="formValidate.password" placeholder="パスワードを入力してください" clearable style="width: 200px"/>
</フォーム項目>
<FormItem label="携帯電話番号" prop="mobile">
<Input v-model="formValidate.mobile" placeholder="携帯電話番号を入力してください" clearable style="width: 200px" />
</フォーム項目>
<FormItem label="SMS認証コード" prop="ヘッダー">
<Input v-model="formValidate.header" placeholder="SMS認証コード" style="width: 200px"/>
<Button type="primary" size="small" @click="getCode" :disabled="codeDisabled">{{codeMsg}}</Button>
</フォーム項目>
<div スタイル="text-align: center">
<Button type="primary" @click="register('formValidate')">登録</Button>
</div>
</フォーム>
</タブペイン>
</タブ>
</div>
</カード>
</div>
<!--<vue-パーティクル
カラー="#FF4500"
:particleOpacity="0.7"
:粒子数="300"
形状タイプ="円"
:粒子サイズ="7"
線の色="#00FF00"
:行幅="2"
:lineLinked="true"
:line不透明度="0.4"
:線の距離="150"
:移動速度="4"
:hoverEffect="true"
hoverMode="つかむ"
:clickEffect="true"
clickMode="repulse"
>
</vue-particles>-->
</div>
</テンプレート>
<スクリプト>
'js-cookie' から Cookies をインポートします。
'@/service/service' から {apiRequest、login、getCode} をインポートします。
'@/components/SIdentify' から SIdentify をインポートします。
エクスポートデフォルト{
コンポーネント: { SIdentify },
名前: 'ログイン',
データ（） {
戻る {
形状： {}、
フォーム検証: {},
ルール:
ユーザー名: [
{必須: true、メッセージ: 'ログインユーザー名は空にできません'、トリガー: 'blur'}
]、
パスワード: [
{必須: true、メッセージ: 'ログイン パスワードは空にできません'、トリガー: 'blur'}
]、
検証コード：
{必須: true、メッセージ: '確認コードは空欄にできません'、トリガー: 'blur'}
]
},
ルール検証: {
ユーザー名: [
{必須: true、メッセージ: 'ログインユーザー名は空にできません'、トリガー: 'blur'}
]、
パスワード: [
{必須: true、メッセージ: 'ログイン パスワードは空にできません'、トリガー: 'blur'}
]、
携帯： [
{必須: true、メッセージ: '電話番号は空欄にできません'、トリガー: 'blur'}
]、
ヘッダー: [
{必須: true、メッセージ: 'SMS 認証コードは空欄にできません'、トリガー: 'blur'}
]
},
画像:'../../static/grey_wolf.jpg',
// ボタンを無効にするかどうか codeDisabled: false,
// カウントダウン秒 countdown: 60,
// ボタンのテキスト codeMsg: '認証コードを取得',
//タイマー timer: null,
識別コード: ''、
識別コード: '1234567890abcdefjhijklinopqrsduvwxyz',
};
},
メソッド: {
// 確認コードを更新する refreshCode () {
this.identifyCode = ''
this.makeCode(this.identifyCodes,4);
},
コードを作る (o,l) {
(i = 0; i < l; i++ とします) {
this.identifyCode += this.identifyCodes[this.randomNum(0, this.identifyCodes.length)]
}
},
ランダム数 (最小, 最大) {
Math.floor(Math.random() * (max - min) + min) を返します。
},
// SMS認証コードを取得する getCode() {
// 確認コードの60秒カウントダウン if (!this.timer) {
有効なStrを取得します。
this.timer = setInterval(this.getValidStr, 1000);
}
apiRequest(this, getCode(this.form.mobile), レスポンス => {
});
},
getValidStr(){
（this.countdown > 0 && this.countdown <= 60）の場合{
this.countdown--;
（this.countdown !== 0）の場合{
this.codeMsg = "再送信(" + this.countdown + ")";
this.codeDisabled = true;
} それ以外 {
タイマー間隔をクリアします。
this.codeMsg = "確認コードを取得";
this.countdown = 60;
this.timer = null;
this.codeDisabled = false;
}
}
},
ハンドル送信() {
this.$refs.loginForm.validate((有効) => {
（有効）の場合{
// ログインパスワードの MD5 暗号化 let password = this.$copyto.md5(this.form.password);
//ログインインターフェースリクエスト apiRequest(this, login(this.form.username, password), response => {
this.$store.commit('setUserInfo', response.data);
Cookies.set('user', this.form.username);
Cookies.set('userId', response.data.id);
ローカルストレージ.sessionId = レスポンス.sessionId
this.$store.commit('setAvator', '');
if (this.form.userName === 'admin') {
Cookies.set('access', 0);
} それ以外 {
Cookies.set('access', 1);
}
this.$router.push({name: 'home_index'});
});
}
});
},
登録する（） {
}
},
マウントされた（）{
// 検証コードを初期化します this.identifyCode = ''
this.makeCode(this.identifyCodes, 4)
},
};
</スクリプト>
<スタイル>
</スタイル>以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
<<: MySQL クエリのソートとクエリ集計関数の使用法の分析
推薦する
Dockerデータストレージのバインドマウントの詳細な説明
この記事を読む前に、Volumes について予備知識を身に付けておいてください。詳細については、こち...
Webデザイナーの成長体験
<br />まず最初に、私はこのグループの中では完全な新人だということを述べなければなり...
ROS2のインストールとdocker環境の使い方について
目次Docker を使用する理由は何ですか? DockerのインストールROSイメージを取得するRO...
CSS の記述基準と順序を共有する [すべての人に使用を推奨]
CSSの記述順序1. 位置属性（位置、上、右、z-index、表示、フロートなど） 2. サイズ（...
Webデザインチュートリアル（8）：Webページの階層と空間デザイン
<br />前回の記事：Webデザイン講座（７）：Webページ制作の効率化１：必要な小言...
HTMLにおけるbackground-image属性の設定の詳細な説明
写真といえば、まず背景画像が思い浮かびます。私たちの装飾の多くは背景画像を使用して実現されているから...
MySQLは文字列関数のSQL文をインターセプトします
1. left(name,4)は左の4文字をインターセプトしますリスト： SELECT LEFT(2...
Mysql マルチテーブル結合クエリの実行の詳細について簡単に説明します。
まず、このブログのケースデモンストレーション テーブルを作成します。 create table a(...
MySQL マルチインスタンス構成のアプリケーションシナリオ
目次MySQL 複数インスタンスマルチインスタンスの概要マルチインスタンスとは何ですか?複数のインス...
Linux suse11でルートパスワードを忘れた場合に変更する方法の簡単な分析
SUSE Linuxでルートパスワードを忘れた場合の解決方法SUSE (Linux オペレーティング...
MySQL テーブルの断片化を解消し、スペースを再利用する方法
目次MySQL テーブルの断片化の原因行の断片化行内断片化空き領域の断片化MySQL で極度に断片化...
Dockerがsudo操作を使用する必要がある問題を解決する
手順は以下のとおりです1. dockerグループを作成する: sudo groupadd docke...
5分でWebRTCビデオチャットを構築する
前回の記事では、Ubuntu 上の webrtc ベースの多人数ビデオチャット サービスの詳細なコー...
CSS変数がJSインタラクティブコンポーネント開発にもたらす改善と変更のサンプルコードの詳細な説明
1. CSS変数がもたらす質的変化CSS 変数によってもたらされる改善は、CSS コードの節約や C...
Pengyou.com モバイル クライアントのダウンロード ページのデザイン共有 (画像とテキスト)
まずは簡単なデータを見てみましょう。 Googleが発表したレポートによると、 ①中国の都市の97％...