目录

axios使用get方法给后端传值,登录功能的实现

JAY.LIN 收录于 Vue Node Javascript

2024-12-21 约 310 字预计阅读 1 分钟

https://bing.ee123.net/img/rand?artid=102668035

目录

axios使用get方法给后端传值，登录功能的实现

前端使用vue实现页面，使用axios进行前后端交互

后端使用node.js提供接口

数据库使用navicat for mysql

前端代码：( 组件中使用axios前后端交互 )

import axios from 'axios'
export default{
    name:'myAdmin',
    data(){
        return{
            username:'',
            password:''
        }
    },
    methods:{
        handleClick:function(){
            axios({
                url:'http://*******:8000/login',
                methods:'get',
                params:{
                    'username':this.username,
                    'password':this.password
                }
            }).then(this.getUserInfo).catch((err)=>{
                alert('用户名不存在！！')  // 抛错，输入的用户名不存在，sql语句查询不到
            })
        },
        getUserInfo:function(res){
            var res = res.data
            // console.log(res.data)
            if(this.username == res.data[0].username && this.password == res.data[0].password){
                alert('登录成功！')
                this.username = this.password = ''
            }else if(this.username == res.data[0].username || this.password == res.data[0].password){
                alert('用户名或密码出错！')
            }
        }
    }
}

 后端代码：

//登录
app.all('/login',(req,res)=>{
    // 查询语句根据用户名查询用户信息
    conn.query("select * from `user` where username = '" + req.query.username +"'",(e,r)=>res.json(new Result({data:r})))
})
function Result({code=1,msg='',data={}}){
  this.code = code;
  this.msg = msg;
  this.data = data
}

效果如图：