メッセージ：フロントエンド開発者もバックエンドを理解する必要がありますよね？答えはイエスです。バックエンドのデータストレージ、モジュール分割、フロントエンド開発のためのインターフェイスデザインを理解することもとても良いことです。
まず、効果のイメージ
server
データベースmysql, redis
セッションへのアクセス頻度が高くなることや、その後のユーザのログイン状態の判定を考慮。メモリキャッシュデータベースのredisを利用することで、アクセス速度を高速化します。redisの操作をカプセル化します：
const redis = require("redis");
const { REDIS_CONF } = require("../conf/db");
const redisClient = redis.createClient(REDIS_CONF.port, REDIS_CONF.host);
redisClient.on("error", err => {
console.log("err", err);
});
const set = (key, value) => {
if (typeof value === "object") {
value = JSON.stringify(value);
}
redisClient.set(key, value, redis.print);
};
const get = key => {
return new Promise((resolve, reject) => {
redisClient.get(key, (err, value) => {
if (err) {
reject(err);
return;
}
if (value == null) {
resolve(null);
return;
}
try {
resolve(JSON.parse(value));
} catch {
resolve(value);
}
});
});
};
module.exports = {
get,
set
};
const mysql = require('mysql')
const { MYSQL_CONF } = require('../conf/db')
const con = mysql.createConnection(MYSQL_CONF)
con.connect()
const exec = sql => {
return new Promise((resolve, reject) => {
con.query(sql, (err, result) => {
if (err) {
reject(err)
return
}
resolve(result)
})
})
}
module.exports = {
exec
}
インターフェースとルーティングの設計
リクエスト・ヘッダ内のクッキーをkey, valueに解析し、req.cookieに格納します。 ユーザーが最初にログインするとき、クッキーにuserIdがあるかどうかを判断します（ユーザー識別フィールドを決定するため）。もしなければ、レスポンス・ヘッダのクッキーにuserIdを設定します。
getリクエストのパラメータをkey,valueにカプセル化し、request.queryに格納します。
postインタフェースのパラメータはrequest.bodyに格納されます。
urlパスの判定を要求し、それぞれ対応するインターフェイスのルーティング処理を行います。処理の前に毎回、userIdが有効なログイン期間内かどうかを判断する必要があります。例
if (method === "POST" && req.path === "/api/blob/new") {
const loginCheckResult = loginCheck(req);
if (loginCheckResult) {
return loginCheckResult;
}
req.body.author = req.session.username;
const result = newBlob(req.body);
return result.then(data => new SuccessModel(data));
}
controller
リクエストパラメータをルートから取得し、対応する sql 文をスプライスして結果を返します。
const newBlob = (blobData = {}) => {
const { title, content, author, createTime = Date.now() } = blobData;
const sql = `insert into blogs (title, content, createTime, author)
values('${title}', '${content}', ${createTime}, '${author}')
`;
return exec(sql).then(insertData => insertData.insertId);
};
クライアント側
特別な注意：フロントエンドサービスとバックエンドサービスは異なるポートにあるため、ブラウザクロスドメインの制限があります、あなたはumiでプロキシサーバーを設定することができます例えば。
proxy: {
'/api': {
target: '"http://localhost:9000"',
changeOrigin: true
}
}
この時点で、プロジェクト全体のフロントエンドとバックエンドのチューニングは完了です！
todo-next， todo-next:
- パスワードの暗号化
- server
