Vue.js est un framework JavaScript populaire qui fournit de nombreuses fonctionnalités pour créer des interfaces utilisateur et des applications d'une seule page. Vue.js fournit également aux développeurs JavaScript de nombreuses options pour faciliter la communication avec les serveurs backend. Dans cet article, nous apprendrons comment utiliser Vue.js, combiné à une base de données SQL, pour implémenter les fonctions de connexion et d'enregistrement, et fournir les instructions SQL correspondantes.

Lors de la mise en œuvre de la fonction de connexion dans Vue.js, vous devez faire attention aux aspects suivants :

1. Obtenez les informations de connexion (telles que le nom d'utilisateur et le mot de passe) saisies par l'utilisateur depuis le front-end.
2. Faites correspondre les informations obtenues avec les enregistrements de la base de données pour vérifier l'identité de l'utilisateur.
3. Si l'authentification réussit, stockez les informations utilisateur dans le stockage local du navigateur pour les utiliser lors de sessions futures.

Ce qui suit est un exemple de code pour implémenter la fonction de connexion Vue.js, en utilisant la base de données MySQL.

S'inscrire

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:'注册成功！'
        })
    }
})

})

Connexion

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
        })
    }
})

})

Dans le code ci-dessus, nous définissons deux itinéraires en utilisant un framework express : un pour l'inscription et un autre pour la connexion. Dans la demande de publication, nous obtenons le nom d'utilisateur et le mot de passe de req.body et les envoyons à la base de données pour vérification. Si la vérification réussit, nous stockons les informations utilisateur dans l'objet userInfo et les renvoyons au frontend.

Il est important de noter que lorsque nous utilisons Vue.js, nous stockons généralement les informations utilisateur dans le stockage local du navigateur et les utilisons dans les sessions futures. Voici un exemple simple montrant comment stocker les informations utilisateur dans localStorage :

Stocker les informations utilisateur

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

Obtenir des informations utilisateur

localStorage.getItem( 'userInfo' )

En bref, Vue.js est un framework puissant qui peut être facilement intégré à une base de données SQL pour implémenter des fonctions communes de connexion et d'enregistrement. L'exemple de code ci-dessus montre comment s'authentifier à l'aide de Vue.js et MySQL et le stocker dans le stockage local du navigateur. J'espère que cet article vous sera utile !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!