卵: パラメータの検証と登録インターフェイスの小さなデモに joi を使用する

目次

序文:

準備:

フロントエンド コード:

バックエンド ディレクトリのスクリーンショット:

1. パラメータを取得する

2. パラメータの確認

3. ユーザーがデータベースに既に存在するかどうかを照会する

4. ユーザーストレージ

5. テストしてみる

ユーザーを追加しました

 同じユーザー名で再登録する

編集者の要約:


序文:

        この記事を読む前に、Egg についての予備的な知識が必要です.egg プロジェクトの作成方法、mysql データベースの構成方法などについては、ここでは詳しく説明しません.公式の卵に行って調べてください--卵の公式文書;

        この記事では、Joi を使用して Egg のパラメーターを検証する方法と、小規模なユーザー登録インターフェイスの開発に焦点を当てています。ノードを書くことはあまりないので、コードはあまり標準的ではありませんが、ご容赦ください!

準備:

        私が設計したユーザー登録プロセスについてお話ししましょう。非常にシンプルで、ユーザー名 ユーザー名、パスワード パスワードです。使用される uniapp は、次のように h5 まで実行されます。

        バックエンドにフォーカスしているため、フロントエンドのフィールドでの検証は行わず、登録ボタンをクリックして、私たちが書いたインターフェースをリクエストするだけです. バックエンドのプロセスは大まかに次のステップに分けられます!

  1. フロントエンド リクエスト パラメータを取得し、パラメータ検証を実行して、パラメータが検証ルールに準拠するようにします。
  2. 検証に合格すると、ユーザー名 username がデータ クエリに使用され、ユーザー名の重複は許可されません。
  3. ユーザー名に問題がなければ、パスワードを暗号化してください!
  4. データベースに格納し、レスポンス内容をフロントエンドに返す!

フロントエンド コード:

<template>
	<view class="register">
		<view class="input">
			username:
			<input type="text" v-model="user.username">
		</view>
		<view class="input">
			password:
			<input type="text" v-model="user.password">
		</view>
		<view class="">
			<button @click="formSubmit">注册</button>
		</view>
	</view>
</template>

<script setup>
	import { reactive } from 'vue';

	const user = reactive({
		username: '',
		password: ''
	})

	const formSubmit = () => {
		uni.request({
			url: "http://127.0.0.1:7001/api/user/register",
			method: "POST",
			data: user,
			success: (res) => {
				console.log(res);
			},
			fail: (err) => {
				console.log(err);
			}
		})
	};
</script>

<style lang="scss" scoped>
	.register {
		padding: 100rpx 0;
		width: 700rpx;
		margin: 0 auto;
	}

	.input {
		margin-bottom: 30rpx;

		input {
			border: solid 1px #cecece;
			height: 60rpx;
			padding: 0 20rpx;
		}
	}
</style>

バックエンド ディレクトリのスクリーンショット:

丸で囲んだディレクトリ ファイルに注目してください

 

 アプリ/拡張/context.js:

これは、返されたコンテンツの小さなパッケージに相当し、this.ctx を使用してアクセスできます。

module.exports = {
  sendSuccess({ code = 200, data = {}, msg = "ok" }) {
    this.body = { code, data, msg };
  },

  sendFail({ code = 400, data = {}, msg = "fail" }) {
    this.body = { code, data, msg };
  },
};

1. パラメータを取得する

まず、 app/controllerの下に新しいuser.jsを作成し、次の内容を記述する必要があります。

"use strict";

const { Controller } = require("egg");

class userController extends Controller {
  /* 用户注册 */
  async register() {
    const { ctx, service } = this;
    const { body } = ctx.request;
    console.log(body);
    ctx.sendSuccess({ msg: "egg进行中" });
  }
}

module.exports = userController;

次に、app/routerに新しいuser.jsを作成します

module.exports = (app) => {
  const { router, controller } = app;
  router.post("/api/user/register", controller.user.register);
};

最後にapp/router.jsに以下の内容を記述します

"use strict";

module.exports = (app) => {
  require("./router/user")(app);
};

 ご覧のとおり、フロントエンドから渡されたパラメーターを既に取得できます

2. パラメータの確認

app/rules の下に新しいuser.jsを作成し ます 

最初に Joi をインストールする必要があります。npm install joi を実行するだけです! JOIドキュメンテーション

const Joi = require("joi");

/* 验证注册信息 */
async function registerValidate(params) {
  const registerSchema = Joi.object({
    username: Joi.string().min(1).max(10).required().messages({
      "string.empty": "用户名不能为空",
      "any.required": "用户名必填",
      "string.max": "用户名长度不能超过10",
    }),
    password: Joi.string()
      .min(6)
      .max(12)
      .pattern(new RegExp("^[a-zA-Z0-9]{6,12}$"))
      .required()
      .messages({
        "string.empty": "密码不能为空",
        "any.required": "密码必填",
        "string.min": "密码长度不低于6",
        "string.max": "密码长度不能超过12",
        "string.pattern.base": "密码只能包含大小写字母以及数字",
      }),
  });
  try {
    await registerSchema.validateAsync(params);
  } catch (error) {
    return error.message ?? "参数错误";
  }
}

module.exports = { registerValidate };

公式に推奨されているEgg-validateを使わない理由を聞かれれば 、慣れていないことと、カスタム エラー メッセージが不快だからです。

このように、  app/controller/user.js で導入して使用できます。

"use strict";

const { Controller } = require("egg");
const validate = require("../rules/user");

class userController extends Controller {
  /* 用户注册 */
  async register() {
    const { ctx, service } = this;
    const { body } = ctx.request;
    /* 用户字段验证 */
    const validateResult = await validate.registerValidate(body);
    if (validateResult) {
      ctx.sendFail({ msg: validateResult });
      return;
    }
    ctx.sendSuccess({ msg: "egg进行中" });
  }
}

module.exports = userController;

テストがあります:

ユーザー名を入力しない場合

ユーザー名の長さが 10 を超えています

パスワードを入力しないでください

パスワードの入力が正規表現に準拠していません

 

待ってください、他にもいくつかのルールがあります。自分で試してみてください。

3. ユーザーがデータベースに既に存在するかどうかを照会する

app /service/user.jsに移動します

const { Service } = require("egg");

class userService extends Service {
  /* 添加用户 */
  async registerUser(params) {
    const { ctx } = this;
    const data = await this.app.mysql.get("users", {
      username: params.username,
    });
    if (data) {
      ctx.sendFail({ msg: "用户名重复,换一个吧" });
      return;
    }
  }
}

module.exports = userService;

4. ユーザーストレージ

まだ アプリ/service/user.jsにあります

npm install bcryptjsコマンドを実行して、bcryptjs メソッドを使用してパスワードを暗号化する必要があります

const { Service } = require("egg");
const bcrypt = require("bcryptjs");

class userService extends Service {
  /* 添加用户 */
  async registerUser(params) {
    const { ctx } = this;
    const data = await this.app.mysql.get("users", {
      username: params.username,
    });
    if (data) {
      ctx.sendFail({ msg: "用户名重复,换一个吧" });
      return;
    }
    /* 密码入库前加密 */
    params.password = bcrypt.hashSync(params.password, 10);
    const result = await this.app.mysql.insert("users", params);
    return result.affectedRows === 1;
  }
}

module.exports = userService;

app/controller/user.jsでデータベース操作に接続する 必要があります

"use strict";

const { Controller } = require("egg");
const validate = require("../rules/user");

class userController extends Controller {
  /* 用户注册 */
  async register() {
    const { ctx, service } = this;
    const { body } = ctx.request;
    /* 用户字段验证 */
    const validateResult = await validate.registerValidate(body);
    if (validateResult) {
      ctx.sendFail({ msg: validateResult });
      return;
    }
    /* 进行数据库操作 */
    try {
      const result = await service.user.registerUser(body);
      if (result) {
        ctx.sendSuccess({ msg: "用户添加成功!" });
      }
    } catch (error) {
      ctx.sendFail({ msg: "用户添加失败!" });
    }
  }
}

module.exports = userController;

5. テストしてみる

ユーザーを追加しました

 同じユーザー名で再登録する

要約:

卵を使ってバックエンドサービスを書くのは気持ちがいい. 箱から出してすぐに動作し、一連のルールが定式化されている. ルールに従ってコードを書くことができ、スケーラビリティが高く、本当に悪くない!

 

おすすめ

転載: blog.csdn.net/qq_42543244/article/details/129425292