Vue 로그인 등록 SQL 문을 작성하는 방법

Vue.js는 사용자 인터페이스 및 단일 페이지 애플리케이션 구축을 위한 많은 기능을 제공하는 인기 있는 JavaScript 프레임워크입니다. Vue.js는 또한 JavaScript 개발자에게 백엔드 서버와 더 쉽게 통신할 수 있는 다양한 옵션을 제공합니다. 이 기사에서는 SQL 데이터베이스와 결합된 Vue.js를 사용하여 로그인 및 등록 기능을 구현하고 해당 SQL 문을 제공하는 방법을 알아봅니다.

Vue.js에서 로그인 기능을 구현할 때 다음 측면에 주의해야 합니다.

1. 프런트 엔드에서 사용자가 입력한 로그인 정보(예: 사용자 이름 및 비밀번호)를 가져옵니다.
2. 획득한 정보를 데이터베이스의 기록과 일치시켜 사용자의 신원을 확인하세요.
3. 인증에 성공하면 향후 세션에서 사용할 수 있도록 사용자 정보를 브라우저의 로컬 저장소에 저장하세요.

다음은 MySQL 데이터베이스를 이용하여 Vue.js 로그인 기능을 구현한 코드 예시입니다.

Register

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

})

Login

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 프레임워크를 사용하여 두 개의 경로를 정의합니다. 하나는 등록용이고 다른 하나는 로그인용입니다. 게시물 요청에서는 req.body에서 사용자 이름과 비밀번호를 가져와 확인을 위해 데이터베이스로 보냅니다. 확인이 성공하면 userInfo 개체에 사용자 정보를 저장하고 이를 프런트엔드로 다시 보냅니다.

Vue.js를 사용할 때 일반적으로 사용자 정보를 브라우저의 로컬 저장소에 저장하고 향후 세션에서 사용한다는 점에 유의하는 것이 중요합니다. 다음은 localStorage에 사용자 정보를 저장하는 방법을 보여주는 간단한 예입니다.

사용자 정보 저장

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

사용자 정보 가져오기

localStorage.getItem( 'userInfo' )

간단히 말하면 Vue.js는 SQL 데이터베이스와 쉽게 통합되어 일반적인 로그인 및 등록 기능을 구현할 수 있는 강력한 프레임워크입니다. 위의 코드 예제는 Vue.js 및 MySQL을 사용하여 인증하고 이를 브라우저의 로컬 저장소에 저장하는 방법을 보여줍니다. 이 기사가 도움이 되기를 바랍니다!

위 내용은 Vue 로그인 등록 SQL 문을 작성하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!