vueログイン登録SQL文の書き方

Vue.js は、ユーザー インターフェイスや単一ページ アプリケーションを構築するための多くの機能を提供する人気のある JavaScript フレームワークです。 Vue.js は、JavaScript 開発者にバックエンド サーバーとの通信を容易にする多くのオプションも提供します。この記事では、Vue.js を SQL データベースと組み合わせて使用​​し、ログインおよび登録機能を実装し、対応する SQL ステートメントを提供する方法を学びます。

Vue.js でログイン機能を実装するときは、次の点に注意する必要があります。

1. Vue.js で入力されたログイン情報 (ユーザー名やパスワードなど) を取得します。フロントエンドからのユーザー。
2. 取得した情報をデータベース内のレコードと照合して、ユーザーの身元を確認します。
3. 認証が成功した場合は、今後のセッションで使用できるようにユーザー情報をブラウザのローカル ストレージに保存します。

次は、MySQL データベースを使用する Vue.js ログイン関数を実装するコード例です。

登録

app.post('/register',function(req,res){

const {username, password} = req.body
const sql = 'insert into users (username,password) values (?,?)'
connection.query(sql,[username,password],(err,result)=>{
    if(err){
        console.log(err)
        res.send({
            code:1,
            msg:'用户名已存在！'
        })
    }else{
        res.send({
            code:0,
            msg:'注册成功！'
        })
    }
})

})

ログイン

app.post('/login',function(req,res){

const {username, password} = req.body
const sql = 'select * from users where username=? and password=?'
connection.query(sql,[username,password],(err,result)=>{
    if(err){
        console.log(err)
    }
    if(result.length===0){
        res.send({
            code:1,
            msg:'用户名或密码错误！'
        })
    }else{
        const userInfo = JSON.stringify({
            id:result[0].id,
            username:result[0].username
        })
        res.send({
            code:0,
            msg:'登录成功',
            userInfo
        })
    }
})

})

上記のコードでは、Express フレームワークを使用して 2 つのルートを定義します。1 つは for です。登録用とログイン用のもう 1 つです。投稿リクエストでは、req.body からユーザー名とパスワードを取得し、検証のためにデータベースに送信します。検証が成功した場合、ユーザー情報を userInfo オブジェクトに保存し、フロントエンドに送り返します。

Vue.js を使用する場合、通常はユーザー情報をブラウザのローカル ストレージに保存し、今後のセッションで使用することに注意してください。ユーザー情報を localStorage に保存する方法を示す簡単な例を次に示します。

ユーザー情報の保存

localStorage.setItem('userInfo', JSON.stringify(userInfo))

ユーザー情報の取得

localStorage.getItem('userInfo')

つまり、Vue.js は SQL データベースと簡単に統合できる強力なフレームワークであるため、共通のログインと登録を実装できます。機能。上記のコード例は、Vue.js と MySQL を使用して認証し、ブラウザのローカル ストレージに保存する方法を示しています。この記事がお役に立てば幸いです!

以上がvueログイン登録SQL文の書き方の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。